react|扩展

1.setState

1.对象式写法（适用于）

第二个参数是callback，即setstate完成之后，执行的函数。因为setState调用时是同步的，但是通知state改变是异步的。所以直接在setState后log是未修改之前的state。

2.函数式写法

第一个参数改成函数，返回一个对象，此对象为state。有两个参数，一个参数是state，一个参数是prop

3.使用场景

2.lazyLoad

1.导入

2.用lazy方式引入组件

3.使用suspense来处理组件未显示的一些情况

作用

可以懒加载路由，优化首屏加载速度。

3.Hooks(react16.8.0新增的新特性)函数组件使用

可以在函数式组件中使用state以及其他的react特性

1.useState（）

1.初始化state

useState函数后面设置初始值。 数组解构赋值两个参数，第一个参数为state名，第二个参数是设置state的函数。

2.设置state的两种方式

3.注意

每次set函数调用后，会执行render，但是useState赋初值的行为是不会再次发生的。

2.useEffect()—相当于（didMount和update钩子的集合）

由于函数组件没有生命周期，所以使用useEffect可以达到类似的效果。

当，第二个参数没有时，相当于uopdate钩子，
当第二个参数为[]空数组的时候，相当于didmount钩子。
当第二个参数为所对应的state时，监测该数据，更新的时候执行。

3.useRef() 相当于createRef（）

4.fragment

1.可以使用<>来使用多标签，但是不能携带key

2.fragment可以携带key，唯一标识

5.context(相当于vue的project和inject)祖先传后代

1.类式组件写法

1.创建context，在父组件中引入

createContext的参数为默认值。

2.传数据

3.后代组件接收（static声明式）

数据在this,context中接收到，但接收的后代组件必须声明static

2.函数组件

函数组件与类式组件的传入方式相同，接收方式不同，因为函数组件没有this。

1.使用consumer来接受数据。

ctx参数是接受到的数据。

6.组件优化

因为组件中setState（）空也会进行render，所以我们如果需要控制render，需要一些措施。

1.shouldComponentUpdate(nextProps,nextState)

可以自定义，假如只有当count变化的时候才render，那就写一个判断，如果当前state的count和nextState的count不一致，返回true，其他时候返回false。false则不render，反之则调用render。
还有一个参数是props，也可以对props进行判断

但是如果逻辑复杂的话，使用不太方便。

2.PureComponent(自动进行优化)

PureComponent会对比当前对象和下一个状态的prop和state` ，而这个比较属于浅比较，比较基本数据类型是否相同，而对于引用数据类型，比较的是它的引用地址是否相同，这个比较与内容无关

7.Render Props(向组件内部动态传入带内容的结构(标签))

有点像vue中的slot

在外层组件中传一个函数，然后函数返回值是带内容的结构。在组件中传入数据，在回显在结构中。