React Hook 使用规则,UseEffect 使用注意

认真阅读和理解说明文档，能够让我们避免走入误区，提升开发效率。

Hook 使用规则（来自官网的介绍）

只在最顶层使用 Hook
**不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。**遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

只在 React 函数中调用 Hook
不要在普通的 JavaScript 函数中调用 Hook。你可以：

✅ 在 React 的函数组件中调用 Hook
✅ 在自定义 Hook 中调用其他 Hook
遵循此规则，确保组件的状态逻辑在代码中清晰可见。

effect使用误区

  **// 🔴 在条件语句中使用 Hook 违反第一条规则**
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

在第一次渲染中 name !== ‘’ 这个条件值为 true，所以我们会执行这个 Hook。但是下一次渲染时我们可能清空了表单，表达式值变为 false。此时的渲染会跳过该 Hook，Hook 的调用顺序发生了改变：

React 不知道第二个 useState 的 Hook 应该返回什么。React 会以为在该组件中第二个 Hook 的调用像上次的渲染一样，对应得是 persistForm 的 effect，但并非如此。从这里开始，后面的 Hook 调用都被提前执行，导致 bug 的产生。

这就是为什么 Hook 需要在我们组件的最顶层调用。如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

 useEffect(function persistForm() {
    **// 👍 将条件判断放置在 effect 中**
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

React官网地址链接

useState、 useEffect使用示例

const [boxId, setBoxId] = useState(0);/使用useState存入变量boxid

    //获取cpu信息
  let id;
  useEffect(() => {
    id = history.location.query.boxId;//获取上一个页面传入的boxid值
    setBoxId(id);
    //里面可以写入一些判断逻辑，比如 判断
    if（boxid!=0）{
     getCpeDashBoardInfo();//获取cpu信息
    }
  }, [])

  // 推荐使用箭头函数 ，用 const 定义一个静态变量，获取cpu信息
  const getCpeDashBoardInfo=()=>{
    getCpeDashBoard(boxId, beginTime, endTime)
      .then(result1 => {
        let cpuInfo = [];
        result1.map((item, index) => {
          cpuInfo.push([item.samplingTime.substr(11, 5), item.cpuUsage]);
        });
        setCpuMsgOne(cpuInfo);
      }).catch(e => {
    });
  }