useMemo Vs useCallBack
useMemo第一个参数返回的是值,useCallBack返回的是函数
useMemo和useCallBack第二个参数都是依赖项
useMemo避免组件非依赖项更新时参数的计算
useCallback避免父组件非依赖项更新时造成子组件的重复渲染
React.memo 使用场景
纯prue组件(没有内部依赖)
子组件有回调函数,搭配useCallBack使用
组件经常被相同props重复渲染
全局状态管理方案
Context官方提供的一种跨组件访问的一种方案
React.createContext 创建上下文,并接受默认参数,并返回provider和consumer组件
也可用useContext获取上下文
useReducer与useContext结合
useReducer创建state状态,再使用useContext共享数据
Redux 常用全局状态管理
创建createStore
App.js 中添加订阅:
<Provider store={reduxStore}>
{Childer}
</Provider>
使用
// useDispatch用于导出dispatch方法
const dispatch = useDispatch();
//state
const counter = useSelector<CounterState, number>((state) => state.counter);
Redux流程
用户操作或者函数触发dispatch,将数据请求传给store
store直接提交action给reducers,reducer根据action的类型处理数据后,并将处理结果返回store
store将结果返回到组件
setState
setState是异步更新
在合成事件,通过设置isBatchingUpdates设置为false,先获取state再赋值,体现为中同步更新:addEventListener、setTimeout、setInterval