通过实例学习hooks

在本地用create-react-app创建了个项目，通过一个有状态组件（计数器）的实例来学习

useState

一.

介绍：react自带的hook函数，功能类似于之前的setstate函数
语法：

const [ 状态变量,状态函数 ] = useState(状态初始值) 

优势：代码简洁，提高效率

二.看一下实例代码

类组件写法：

image.png

方法组件写法：

image.png

三.总结

怎么理解useState，写法上是个数组解构，功能上就是之前的setState

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

  //  其实就是对数组的结构，可拆分为如下：
  let _useState = userState(0)
  let count = _useState[0]
  let setCount = _useState[1]

深入(暂存）

setState有哪些特性，useState是否有这些特性？

使用useState的时候只赋了初始值，并没有绑定任何的key,那React是怎么保证这三个useState找到它自己对应的state呢

useEffect

useEffect是异步执行，原来的是同步执行
useEffect和各个生命周期的对比：

基本使用
useEffect的解绑
useEffect的第二个参数

深入：
在函数组件中，也不再区分mount和update两个状态
使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新之前）这个生命周期，也就是说我们没有办法通过组件更新前条件来决定组件是否更新
而且在函数组件中，也不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行内部的所有逻辑，就带来了非常大的性能损耗

useEffect 会在每次渲染后都执行吗？ 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行

image.png

useContext的使用

易错点

1.useContext是新增的Hook函数，目前版本（16.8）里只能在function函数体内使用，不要在class组件内使用，也不要在条件语句内使用
2.Context需要在多个文件中传递数据，所以要在定义Context的地方加入export，在需要使用数据地方import进来，注意import的时候一定要加上花括号{CountContext}

3.不要在一个文件中provider提供完数据后，马上useContext消费数据，可能会取不到值。(为什么？)

useReducer的使用

（看demo中的Example.js）

学完useContext和useReducer之后我们会思考，是否可以用这两个实现redux呢？

useContext负责传值，useReducer负责处理数据

context的值变化会不会渲染？

最后准备一个实例，给大家轮着敲，先定好要做的各个小功能