一. React Hooks 的理解
实际上，类组件和函数组件是两套不同的设计思想：
类组件----面向对象and函数组件----函数式编程。而函数组件更契合 React 框架的设计理念。
React 组件本身的定位就是函数，一个输入数据、输出 UI 的函数。 其主要工作就是及时地把声明式的代码转换为命令的式的 DOM 操作，把数据层面的描述映射到用户可见的 UI 变化中去。即原则上讲，React 的数据应该总是和渲染绑定在一起的， 而类组件却做不到这一点，但是函数组件可以！！！而为了使开发者可以更好的去编写函数式组件。React Hooks 应运而生！！
<1> React Hooks解决了哪些问题？
-
复用组件之间的逻辑很难
- 没有 hooks ，我们就只能利用高阶组件、render props等复用代码，但这有可能会造成"嵌套地域"，而有了 hooks 的出现，我们就可以从组件中提取出状态逻辑，并进行单独测试和复用。 -
复杂组件变得难以理解
- 在类组件中，一个生命周期中可能包含多个不相关的逻辑，比如在 componentDidMount() 中我们可能要请求不同的数据，且需要做不同的处理。这就会导致代码逻辑不清晰，很容易出现 bug 。 - 而使用了 hooks 后，hooks 中模拟的生命周期钩子，useEffect() 是可以定义多次的。所以我们就可以把不相关的逻辑放在不同的 useEffect() 中 -
难以理解的 class
<2> 使用 Hooks 时需要注意的问题？
- 不要在循环、条件或者嵌套函数中使用 Hooks
becauseHooks 的设计是基于数组实现的【实质上 Hooks 的源码是基于链表实现的】，在定义时按顺序加入数组中，如果在循环、条件或者嵌套函数中使用，很可能会导致数组取值错位，而 React 需要利用调用顺序来正确的更新相应的状态，并调用相应的钩子函数。就会造成执行错误的 Hook 。
- 在使用 useState() 的时候，不能用 push、pop、slice进行修改数组，在 setState() ，这样是拿不到最新值的，需要析构方式
let [num,setNums] = useState([1,2,3]);
num.push(4);
setNums(num); // 错的，这样拿不到最新值
num = [...num , 1];
setNums(num); // 正确的
