React hook 使用需要注意哪些？

在使用 React Hooks 时需要遵循一些最佳实践和注意事项，以确保代码的可维护性与功能的正确性。以下是一些关键点：

1. 遵守Hooks规则

不要在循环、条件或嵌套函数中调用Hooks

Hooks 应该始终在组件的顶层被调用，这样可以保证 Hooks 在每次渲染时都以相同的顺序被调用，这对于 React 的内部状态追踪机制非常重要。

只在React函数中调用Hooks

应该仅在React的函数组件或自定义 Hooks 中调用 Hooks。不要在普通的 JavaScript 函数中调用。

2. 使用 `useState`时的注意事项

初始化状态

对于复杂的状态逻辑，可以通过传递一个函数给 useState 来惰性初始化，这样可以避免在每次渲染时重新创建初始状态。

jsx
const [state, setState] = useState(() => {
    const initialState = someExpensiveComputation(props);
    return initialState;
});

状态更新函数的身份稳定

setState 函数是身份稳定的，这意味着你可以在其他 Hooks 中安全地引用它，而不用担心它会在重新渲染时改变。

3. 使用 `useEffect`时的注意事项

清理副作用

在 useEffect 中创建的订阅、定时器、监听事件等副作用，应该在返回的清理函数中进行清除，以避免内存泄漏。

jsx
useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
        // 清理订阅
        subscription.unsubscribe();
    };
}, [props.source]);

依赖列表的完整性

确保依赖列表包含了所有外部作用域中被 useEffect 使用到的值，这样才能正确响应这些值的变化。如果忽略了依赖，可能会导致旧的闭包中的值被捕获，从而引发错误。

jsx
useEffect(() => {
    function doSomething() {
        console.log(someProp);
    }

    doSomething();
}, [someProp]); // 确保所有使用到的变量都被包含在依赖列表中

4. 避免在 `useEffect`中进行不必要的操作

节流和防抖

如果 useEffect 中的操作非常昂贵，考虑使用节流（throttling）或防抖（debouncing）技术来减少操作的频率。

5. 自定义Hooks

代码复用

当你发现需要在不同组件之间复用状态逻辑时，可以将其抽离成自定义 Hooks。这有助于减少代码冗余并增强逻辑的可维护性。

例如，使用自定义 useForm Hook 来处理表单：

jsx
function useForm(initialValues) {
    const [values, setValues] = useState(initialValues);

    const handleChange = (event) => {
        setValues({
            ...values,
            [event.target.name]: event.target.value,
        });
    };

    return [values, handleChange];
}

6. 性能优化

`useMemo` 和 `useCallback`

在有必要的情况下，使用 useMemo 和 useCallback 来避免不必要的渲染或计算。useMemo 可以用来缓存复杂计算的结果，useCallback 可以用来缓存函数，这在将函数传递给子组件时特别有用，可以避免不必要的子组件重渲染。