在本地用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的值变化会不会渲染？
最后准备一个实例，给大家轮着敲，先定好要做的各个小功能
网友评论