React中不适当的Hooks使用问题及解决方案

function MyComponent({ show }) {
  if (show) {
    const [count, setCount] = useState(0); // 不允许在条件语句中调用 Hooks
  }

  return <div>{count}</div>;
}

class MyComponent extends React.Component {
  componentDidMount() {
    const [count, setCount] = useState(0); // 不允许在类组件中使用 Hooks
  }

  render() {
    return <div>{count}</div>;
  }
}

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

  useEffect(() => {
    console.log(count);
  }); // 未设置依赖项，导致每次渲染都触发副作用

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

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

  useEffect(() => {
    setCount(count + 1); // 无限循环更新状态
  }, [count]);

  return count;
}

function MyComponent({ value }) {
  useEffect(() => {
    console.log(value);
  }, []); // 依赖项未包含 value，导致不会重新执行副作用

  return <div>{value}</div>;
}

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

  if (show) {
    // 其他逻辑
  }

  return <div>{count}</div>;
}

function useCustomHook() {
  const [count, setCount] = useState(0);
  return [count, setCount];
}

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

  useEffect(() => {
    console.log(count);
  }, [count]); // 依赖项包含 count

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

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

  useEffect(() => {
    setCount(count + 1); // 避免无限循环
  }, []); // 仅在组件挂载时执行

  return count;
}

function MyComponent({ value }) {
  useEffect(() => {
    console.log(value);
  }, [value]); // 依赖项包含 value

  return <div>{value}</div>;
}

npm install eslint-plugin-react-hooks --save-dev

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}