使用 Hooks 的重要规范

再次强调命名规范 useXxx

Hooks 使用规范

• 只能用于 React 函数组件和自定义 Hook 中，其他地方不可以
• 只能用于顶层代码，不能在循环，判断中使用 Hooks
• eslint 插件 eslint-plugin-react-hooks 可以帮到你

错误例子

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

  // 错误例子
  if (count) {
    useEffect(() => {
      console.log('count', count);
    });
  }
  // 错误例子
  for (let i = 0; i < 100; i++) {
    const [age, setAge] = useState(0);
  }
  // 错误例子
  if (!count) {
    return;
  }

  //....
}

eslint-plugin-react-hooks 配置

// ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

Hooks 的调用顺序

Hooks 调用顺序必须保持一致

• 无论是 render 还是 re-render，Hooks 调用顺序必须一致
• 如果 Hooks 出现在循环，判断里，则无法保证顺序一致
• Hooks 严重依赖于调用顺序！特别重要

例子

import React, { useEffect, useState } from 'react';

function TeachDemo({ couseName }) {
  // 函数组件，纯函数，执行完即销毁
  // 所以，无论组件初始化（render）还是组件更新（re-render）
  // 都会重新执行一次这个函数，获取最新的组件
  // 这一点和 class 组件不一样

  // render: 初始化 state 的值 '张三'
  // re-render: 读取 state 的值 '张三'
  const [studentName, setStudentName] = useState('张三');

  // 错误代码================
  // if(couseName){
  // const [studentName, setStudentName] = useState('张三')
  // }
  // 错误代码 end================

  // render: 初始化 state 的值 'lzw'
  // re-render: 读取 state 的值 'lzw'
  const [teacherName, setTeacherName] = useState('lzw');

  // 错误代码================
  // if(couseName){
  //   const [studentName, setStudentName] = useState('张三')
  //   const [teacherName, setTeacherName] = useState('lzw')
  // }

  // if(couseName){
  //   useEffect(() => {
  //     // 模拟学生签到
  //     localStorage.setItem('name', studentName)
  //   })
  // }
  // 错误代码 end================

  // render: 添加 effect 函数
  // re-render: 替换 effect 函数（内部的函数也会重新定义）
  useEffect(() => {
    // 模拟学生签到
    localStorage.setItem('name', studentName);
  });

  // render: 添加 effect 函数
  // re-render: 替换 effect 函数（内部的函数也会重新定义）
  useEffect(() => {
    // 开始上课
    console.log(`${teacherName} 开始上课，学生 ${studentName}`);
  });

  return (
    <div>
      课程：{couseName}， 讲师：{teacherName}， 学生：{studentName}
    </div>
  );
}

export default TeachDemo;

测试代码

<TeachDemo couseName={'前端课程'}></TeachDemo>