让你眼前一亮的React Hooks应用技巧

2023-09-30 07:43:05

众所周知，React Hooks 是一种声明式函数，为 React 函数组件提供了状态管理和其他的功能。Hooks 的出现大大简化了组件的编写，让 React 的开发变得更加容易和有趣。

useState 技巧

解决异步更新问题：
- const [count, setCount] = useState(0);
- setTimeout(() => setCount((prevCount) => prevCount + 1), 1000);
- 技巧： 通过传入一个函数给 setCount，我们可以在函数中访问到最新的 count 值，避免异步更新时出现的问题。
初始化 state 值：
- const [count, setCount] = useState(() => calculateInitialCount());
- 技巧： 将 state 的初始化逻辑放入 useState 的回调函数中，可以在组件初始化时动态计算 state 的值。
多个 state 使用同一个函数更新：
- const [count, setCount] = useState(0);
- const [todos, setTodos] = useState([]);
- const handleButtonClick = () => {
  setCount((prevCount) => prevCount + 1);
  setTodos((prevTodos) => [...prevTodos,Todo ${count}]);
  };
- 技巧： 通过将状态更新逻辑放入一个函数中，我们可以确保两个 state 在每次更新时都是同步的。

避免重复 effect：
- useEffect(() => {
  const fetchData = async () => {...};
  fetchData();
  }, [fetchData]);
- 技巧： 在 useEffect 的依赖数组中包含 fetchData 函数，可以确保只有当 fetchData 函数改变时才会重新执行 effect。
清理 effect：
- useEffect(() => {
  const listener = addEventListener(...);
  return () => {
  removeEventListener(...);
  };
  }, [listener]);
- 技巧： 在 useEffect 的返回函数中进行清理工作，确保在组件卸载时释放资源。
多个 effect 使用同一个函数：
- useEffect(() => {
  handleEffect1();
  handleEffect2();
  }, [handleEffect1, handleEffect2]);
- 技巧： 将 effect 逻辑放入多个函数中，可以在 useEffect 的依赖数组中分别包含这些函数，确保只有当其中一个函数改变时才会重新执行 effect。