Hooks在应用中的实践

如何定义个Function Component

interface Props {
  title: string;
}
const App: React.FC<Props> = ({ title }) => {
  return React.useMemo(() => <div>{title}</div>, [title]);
};

App.defaultProps = {
  title: ''
}

处理状态

1. useState(推荐)
2. useRef(不提倡使用)
3. useReducer(未使用)

useState

1. 建议将多个相同逻辑需要的状态封装成对象统一管理
2. react-use(useMap, useSetState)

const [fetchParams, setFetchParams] = useState({pageIndex: 1, keywords: '', pageSize: 5})

useRef

1. 由于Hooks中每次状态的变化都会刷新，所以无法在函数中保留临时变量，使用useRef可以
2. useRef会将保留状态直到函数组件被销毁掉
3. useRef改变时不能触发组件更新
4. 不建议使用useRef

useReducer

1. 局部状态无需使用
2. 全局状态可以配合useContext一起使用
3. 全局状态可以参考react-reudx

副作用

1. useEffect
2. react-use(useAsync, useAsyncFn)

自定义Hooks

1. 可以参考react-use中hooks的写法
2. 根据自身业务分装逻辑