React Hook 学习笔记（一）

知识点

• Hook始于React 16.8
• Hook不能在class中使用
• 只能在React组件函数最外层调用Hook（自定义 Hook 除外），不能在循环、条件判断或者子函数中调用
• Hook返回的更新函数类似this.setState，但不会将新旧state合并，并且这里的state不一定非要是对象
• 如果函数的名字以 use 开头并调用其他 Hook，这就是一个自定义 Hook
• React 保证了每次运行 effect 的同时，DOM 都已经更新完毕
• effect 的清除阶段在每次重新渲染时都会执行, React 会在执行当前 effect 之前对上一个 effect 进行清除
• 不同组件之间自定义 Hook 不会共享 state

学习心得

• 首先不去为什么需要Hook，因为这块理解起来有点困难，先去看看Hook具体能做什么，在看的时候思考Hook的优点

遗留问题

1. Hook 技术使得在不编写 class 的情况下使用 state 成为了可能（如下代码）。不过实话实说，头一次看到这种代码的时候，我真是不知道它究竟是如何实现的。setCount 是如何触发组件重绘的，一点也看不出来

   import React, { useState } from 'react';
   
   function Example() {
     // 声明一个新的叫做 “count” 的 state 变量
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
           Click me
         </button>
       </div>
     );
   }
   

2. React 官方文档中提到是依赖Hook调用的顺序来知晓 state 和 useState 的对应关系的，为什么要知晓二者的对应关系？这点令我感到费解。
3. useCallback、useMemo、useRef 这3个api缺少示例，读的时候看不懂