React性能优化详解：useMemo React.memo useCalack useReducer.pdfVIP

性能优化相关API

useMemo/React.memo/useCallback

useReducer

作用：和useState的作用类似，用来管理相对复杂的状态数据

自增

count自减

重置

useReducer-基础用法

1.定义一个reducer函数（根据不同的action返回不同的新状态）

2.在组件中调用useReducer，并传入reducer函数和状态的初始值

3.发生时，通过dispatch函数分派一个action对象（reducer要返回哪个新状态并渲染UI）

useReducer-分派action时传参

useReducer-小结

useMemo

作用：在组件每次重新渲染的时候缓存计算的结果

看个需求：

useMemo-基础语法

说明：使用useMemo做缓存可以保证只有count1依赖项发生变化时才会重新计算

React.memo

作用：允许组件在Props没有改变的情况下跳过渲染

React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染

思考：如果Son组件本身