React-hooks写法 — 代码优化

80 阅读1分钟

1、Fragment <></>

2、memo  // 只进行浅层比较(比较方法可用于深层比较)
const comp = memo(组件[, 比较方法]);

3、组件卸载之前 清理定时操作 useEffect

4、路由懒加载 lazy(() => import(/* webpackChunkName: ‘home’ */ ‘./home’))

5、不要使用内联函数
✖️:onChange={e => setState(e.target.value)}
✔️:onChange={onChangeValue}

6、不写内联样式 style={{display:’none’}}

7、render 方法内不写 setState

8、同时改变多个state 使用unstable_batchedUpdates

import { unstable_batchedUpdates } from 'react-dom';

unstable_batchedUpdates(() => {

        setData(res.records);

        setTotal(res.total);

      })