How to use the rax.useState function in rax

function App(props) {
  const { appConfig, history, routes, InitialComponent } = props;
  const { component } = useRouter(() => ({ history, routes, InitialComponent }));

  if (isNullableComponent(component)) {
    // Return null directly if not matched.
    return null;
  } else {
    const [pageInitialProps, setPageInitialProps] = useState(
      // If SSR is enabled, set pageInitialProps: {pagePath: pageData}
      initialDataFromSSR ? { [initialDataFromSSR.pagePath || '']: initialDataFromSSR.pageData || {} } : {}
    );

    // If SSR is enabled, process getInitialProps method
    if (isWeb && initialDataFromSSR && component.getInitialProps && !pageInitialProps[component.__path]) {
      useEffect(() => {
        const getInitialPropsPromise = component.getInitialProps();

        // Check getInitialProps returns promise.
        if (process.env.NODE_ENV !== 'production') {
          if (!getInitialPropsPromise.then) {
            throw new Error('getInitialProps should be async function or return a promise. See detail at "' + Component.name + '".');
          }
        }

export default function Navigation(props) {
  const { appConfig, component, history, routes } = props;
  const { maxAlivePageNum, tabBar } = appConfig;

  const [updateTemp, setUpdateTemp] = useState(null);

  const Component = component;
  const currentPathname = history.location.pathname;
  const currentPage = routes.find(route => route.path === currentPathname) || {};

  const isAlivePage = currentPage.keepAlive;
  useEffect(() => {
    history.listen(() => {
      _updatePageTrigger(Date.now());
    });
    // Use display control alive page, need get alive page list.
    routes.forEach((route) => {
      if (route.keepAlive) {
        alivePages.push(route);
      }
    });

export function useRouter(routerConfig) {
  const [component, setComponent] = useState(getInitialComponent(routerConfig));

  useLayoutEffect(() => {
    if (_initialized) throw new Error('Error: useRouter can only be called once.');
    _initialized = true;
    const history = _routerConfig.history;
    const routes = _routerConfig.routes;

    router.root = Array.isArray(routes) ? { routes } : routes;

    const handleId = router.addHandle((component) => {
      setComponent(component);
    });

    // Init path match
    if (!_routerConfig.InitialComponent) {
      matchLocation(history.location);

const Component = () => {
      const [temp, setTemp] = useState(true);
      updateHandler = setTemp;
      return <div>;
    };
</div>

const Component = () => {
      const [temp, setTemp] = useState('');
      updateHandler = setTemp;
      return <p>{temp}</p>;
    };

export default (props) => {
  const [name, setName] = useState(props.name);
  const handleClick = () => {
    setName('rax');
  };
  return (
    <h1> Hello {name}</h1>
  );
};

function AliveRouter(props) {
  const { routerConfig = {}, tabConfig = {}, aliveConfig = {}, useRouter } = props;

  const { history, routes = [] } = routerConfig;
  const { textColor = '#666', selectedColor = '#333', backgroundColor = '#fff', items = [] } = tabConfig;
  const { maxSavePath = 5, paths = [] } = aliveConfig;

  const [updateTemp, setUpdateTemp] = useState(null);

  const { Router } = useRouter(routerConfig);

  maxSavePathNum = maxSavePath;
  routerProps = props;
  routerList = routes;
  updateComponentTrigger = setUpdateTemp;

  useEffect(() => {
    history.listen(() => {
      updateComponentTrigger(Date.now());
    });
  }, []);


  if (isNode && routerConfig.InitialComponent) {

export default (props) => {
  const [name, setName] = useState(props.name);
  const handleClick = () => {
    setName('rax');
  };
  return (
    <h1> Hello {name}</h1>
  );
};

export default (props) => {
  const [name, setName] = useState(props.name);
  const handleClick = () => {
    setName('rax');
  };
  return (
    <div style="{styles.hello}">
      <span style="{styles.title}">
      Hello {name}
      </span>
    </div>
  );
};

export default (props) => {
  const [name, setName] = useState(props.name);
  const handleClick = () => {
    setName('rax');
  };
  return (
    <div>
      <h1> Hello {name}</h1>
      <button> router.push('/about')}&gt;Go about</button>
    </div>
  );
};