react 学习笔记更新2.0

1.性能优化
1.shouldComponentUpdate
在render调用之前会调用shouldComponentUpdate，不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。
该方法有两个参数：

nextProps 修改之后，最新的props属性
nextState 修改之后，最新的state属性
该方法返回值是一个boolean类型

返回值为true（默认返回true），那么就需要调用render方法
返回值为false，那么就不需要调用render方法

2.React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

2.react hook

useEffect

seEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。

useEffect的第二个参数：
1.当useEffect没有第二个参数时

通过这个例子可以看到useEffect没有第二个参数时不停的在调用

2.当useEffect第二个参数为空数组时

通过这个例子可以看出来useEffect在调用一次后就不再调用

3.当useEffect第二个参数为变量时

通过这个例子可以看出来useEffect在每次count发生变化时调用

useEffect的使用：

上面的例子可以看出来使用useEffect和和class component使用生命周期函数时的区别，使用useEffect将每次count变化的数据都打印出来，而使用componentDidUpdate打印了最后一个数据很多次，因为class component里面的state随着render是发生变化的，而useEffect里面的所有东西都是每次render独立的。

useEffect清除：

useCallback:缓存函数，不会重新创建函数
需要用到的状态放在回调中
const handleClickButton2 = useCallback(() => {
setCount2(count2 + 1)
}, [count2]);

useMemo 缓存组件

类似 vue 计算属性
const cachedValue = useMemo(function() {
return count + 1
}, [count])