React Hooks最佳实践

React Hooks彻底改变了React开发方式。以下是我总结的最佳实践。

Hooks规则

  1. 只在最顶层调用Hooks
  2. 只在React函数中调用Hooks

常用Hooks

useState

1
const [count, setCount] = useState(0);

useEffect

1
2
3
useEffect(() => {
document.title = `计数: ${count}`;
}, [count]);

useMemo和useCallback

这两个Hooks用于优化性能,避免不必要的重渲染。

自定义Hooks

提取可复用的逻辑到自定义Hooks中,提高代码复用性。

Hooks让组件逻辑更加清晰!