react hooks 使用实例

react hooks 使用实例

使用Suspense 和lazy实现模块懒加载功能

import React, {Suspense, lazy} from 'react';
const HomePage = lazy(() => {
  import('./modeles/home');
});
<Suspense fallback={<div>加载中...</div>}>
  <Switch>
      Route path="/home" component={HomePage} />
  </Switch>
</Suspense>

使用React Hooks 实现一个自定义的组件

export const useModal = (initTitle: string, initContent: string | React.Element) => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState(initTitle);
  const [content, setContent] = useState(initContent);
  const CustomModal = () => {
    return (
      <Modal
        visible={visible}
        title={title}
        closable={false}
        footer={null}>
        {content}
      </Modal>
    )
  }
  const show = (content?: string | React.ReactElement) => {
    content && setContent(content);
    setVisible(true);
  }
  const hide = (delay?: number) => {
    if(delay) {
      setTimeout(() => setVisible(false), delay);
    } else {
      setVisible(false)
    }
  }
  return {
    show, hide, CustomModal, setTitle, setContent
  }

}

使用：

const {hide, show, CustomModal} = useModal('系统提示'， '正在初始化...');
render() {
  <div><CusomModal /></div>
}