Hooks在应用中的实践
如何定义个Function Component
interface Props {
title: string;
}
const App: React.FC<Props> = ({ title }) => {
return React.useMemo(() => <div>{title}</div>, [title]);
};
App.defaultProps = {
title: ''
}
处理状态
- useState(推荐)
- useRef(不提倡使用)
- useReducer(未使用)
useState
- 建议将多个相同逻辑需要的状态封装成对象统一管理
- react-use(useMap, useSetState)
const [fetchParams, setFetchParams] = useState({pageIndex: 1, keywords: '', pageSize: 5})
useRef
- 由于Hooks中每次状态的变化都会刷新，所以无法在函数中保留临时变量，使用useRef可以
- useRef会将保留状态直到函数组件被销毁掉
- useRef改变时不能触发组件更新
- 不建议使用useRef
useReducer
- 局部状态无需使用
- 全局状态可以配合useContext一起使用
- 全局状态可以参考react-reudx
副作用
- useEffect
- react-use(useAsync, useAsyncFn)
自定义Hooks
- 可以参考react-use中hooks的写法
- 根据自身业务分装逻辑
