1. function demo() {
  2.   // 函数组件，纯函数，执行完成即销毁
  3.   // 所以，无论组件初始化（render）还是组件更新（re-render）
  4.   // 都会重新执行一次这个函数，获取最新的组件
  5.   // 这一点和class组件不一样
  7.   // render：初始化 state 的值 zwx
  8.   // re-render：读取 state 的值 zwx
  9.   const [studentName, setStudentName] = useState('zwx')
  11.   // render：初始化 state 的值 pw
  12.   // re-render：读取 state 的值 pw
  13.   const [teachName, setTeachName] = useState('pw')
  16.   // render：添加 effect 函数
  17.   // re-render：替换 effect 函数（内部的函数也会重新定义）
  18.   useEffect(() => {})
  20.   useEffect(() => {})
  22.   // 同理，都是re-render的时候，如果顺序不对，会导致重新读取值或者函数错乱
  23. }

Hooks 调用顺序必须保持一致

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