react hooks注意事项

一、什么时候封装自定义Hook

React封装自定义Hook的时机是当我们需要在组件间复用某个逻辑时。自定义Hook将逻辑封装在一个可复用的函数内部，并返回值和函数提供给组件使用，从而避免了重复编写代码的情况。

二、如何封装自定义Hook

自定义Hook的规范：

1. 自定义Hook的命名应该以 use 命名，这样可以告诉其他开发者这是一个Hook。
2. 自定义Hook应该尽可能简单，单一职责，易于重用。
3. 自定义Hook应该返回一个数组或对象，包含所需要的值和函数。
4. 自定义Hook内不要依赖props，如果需要依赖组件数据，则传入作为参数。

下面是一个自定义Hook的示例代码，用于绑定和解绑resize事件：

import { useState, useEffect } from 'react';

function useResize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
}

export default useResize; 

在使用自定义Hook时，只需要导入该函数然后调用即可：

function App() {
  const windowSize = useResize();

  return (
    <div>
      <p>Width: {windowSize.width}</p>
      <p>Height: {windowSize.height}</p>
    </div>
  )
}

三、如何规避Hook的坑

在使用自定义Hook时需要注意以下几点来规避Hook的坑：

1. 不要在循环，条件或嵌套函数中调用Hook，避免出现状态不稳定，逻辑混乱的情况。每次组件渲染时自定义Hook都会执行，因此一定要放在组件的顶层。
2. 避免在自定义Hook中使用useState产生循环依赖的问题（即如果更新状态函数更新了状态，则会触发重新渲染，然后重新调用自定义Hook）。
3. 避免将自定义Hook直接传递给其他 Hook，这会导致每次渲染都会创建新的 Hook 实例。
4. 避免在自定义Hook中直接修改state，而应该使用useState提供的更新函数。