React Hooks 常见陷阱

1. 在条件语句中使用 Hooks

在条件语句中使用 Hooks 会导致组件无法正确渲染。

错误示例：

function MyComponent() {
  const [state, setState] = useState(0);
  if (someCondition) {
    // 错误：条件语句内的Hooks调用
    useEffect(() => {
      // ...
    });
  }
}

正确做法：

function MyComponent() {
  const [state, setState] = useState(0);
  // 正确：Hooks调用在函数体的最顶层
  useEffect(() => {
    if (someCondition) {
      // ...
    }
  }, [someCondition]); // 依赖项包括someCondition
}

2. 错误的 Hooks 顺序

改变 Hooks 之间的顺序会导致状态更新问题。

错误示例：

function MyComponent({ flag }) {
  if (flag) {
    // 错误：条件性地调用 Hooks 会导致顺序变化
    const [state1, setState1] = useState(0);
  }
  const [state2, setState2] = useState(0);

  // ...
}

正确做法：

function MyComponent({ flag }) {
  // 正确：无论条件如何，Hooks 都按相同的顺序调用
  const [state1, setState1] = useState(flag ? 0 : null);
  const [state2, setState2] = useState(0);

  if (flag && state1 === null) {
    // 初始化 state1 的值
    setState1(0);
  }

  // ...
}

3. 使用状态更新函数而没有使用 useEffect

在事件处理函数中直接更新状态，而不通过 useEffect 来处理副作用。

错误示例：

function MyComponent() {
  const [count, setCount] = useState(0);

  // 错误：在事件处理函数中直接更新状态
  const handleClick = () => {
    setCount(count + 1);
  };
}

正确做法：

function MyComponent() {
  const [count, setCount] = useState(0);

  // 正确：在事件处理函数中不直接更新状态
  const handleClick = () => {
    // 执行一些逻辑，状态更新通过useEffect或其他方式处理
  };

  // 使用useEffect来处理副作用
  useEffect(() => {
    // ...
  }, [count]); // 依赖项列表确保副作用仅在count变化时执行
}

4. 在 useEffect 中执行异步操作而没有清理

错误示例：

function MyComponent() {
  useEffect(() => {
    // 错误：异步操作没有清理
    async function loadData() {
      // ...
    }
    loadData();
  }, []);
}

正确做法：

function MyComponent() {
  useEffect(() => {
    async function loadData() {
      // ...
    }
    loadData();

    return () => {
      // 正确：执行清理逻辑
    };
  }, []); // 空依赖项数组确保仅在组件挂载时执行
}

5. 过度使用 useEffect

错误示例：

function MyComponent() {
  useEffect(() => {
    // 错误：执行大量操作
    // ...
  }, [a, b, c]); // 依赖项过多
}

正确做法：

function MyComponent() {
  // 正确：合理拆分useEffect
  useEffect(() => {
    // ...
  }, [a]); // 仅依赖a
  useEffect(() => {
    // ...
  }, [b]); // 仅依赖b
}

6. 在 useEffect 中直接返回一个异步函数

错误示例：

function MyComponent() {
  useEffect(() => {
    // 错误：直接返回异步函数
    async function loadData() {
      // ...
    }
    return loadData();
  }, []);
}

正确做法：

function MyComponent() {
  useEffect(() => {
    async function loadData() {
      // ...
    }
    loadData();

    return () => {
      // 正确：返回一个清理函数
    };
  }, []); // 空依赖项数组确保仅在组件挂载时执行
}

7. 错误的使用 useEffect 的依赖项

错误示例：

function MyComponent() {
  const [state, setState] = useState(0);
  useEffect(() => {
    // 错误：没有指定依赖项
    // ...
  }, []);
}

正确做法：

function MyComponent() {
  const [state, setState] = useState(0);
  useEffect(() => {
    // 正确：指定依赖项
    // ...
  }, [state]); // 依赖state变量
}

8. 在 useEffect 中更新状态导致无限循环

错误示例：

function MyComponent() {
  const [state, setState] = useState(0);
  useEffect(() => {
    // 错误：更新它自己的依赖项
    setState(state + 1);
  }, [state]);
}

正确做法：

function MyComponent() {
  const [state, setState] = useState(0);
  useEffect(() => {
    // 正确：避免更新它自己的依赖项
    // ...
  }, []); // 空依赖项数组避免不必要的渲染
}

9. 错误的使用 useContext

错误示例：

// Context没有正确使用
const MyContext = React.createContext();
function MyComponent() {
  // 错误：没有使用useContext
  const contextValue = MyContext._currentValue;
  // ...
}

正确做法：

const MyContext = React.createContext();
function MyComponent() {
  // 正确：使用useContext来订阅Context的值
  const contextValue = useContext(MyContext);
  // ...
}

10. 忘记在函数组件中使用 Hooks

错误示例：

// 错误：在函数组件外部使用Hooks
const [state, setState] = useState(0);
function MyComponent() {
  // ...
}

正确做法：

function MyComponent() {
  // 正确：在函数组件内部使用Hooks
  const [state, setState] = useState(0);
  // ...
}

总结

正确使用 React Hooks 需要遵循一定的规则和最佳实践，以避免上述陷阱，确保应用的稳定性和性能。