Reactlesson3（react-redux）知识点

这一段不难美化，主要是react-reudx的核心部分，其实包括了redux，也就是Provider、connect、and等几个常用API的实现绑定动作创作者。直接导入核心代码importReact,{useLayoutEffect,useReducer,useCallback,useContext}from'react';constuseForceUpdata=()=>{const[_,forceUpdata]=useReducer(x=>x+1,0,);constupDate=useCallback(()=>forceUpdata(),[])returnupDate};constCunsumer=({store},mapStateToProps,mapDispatchToProps,WarppedComponent,props)=>{//stateProps实际上是将所有状态作为参数，mapStateProps执行的结果constforceUpdata=useForceUpdata()conststateProps=mapStateToProps(store.getStore());//dispatchProps需要麻烦，因为会有两种情况//第一种mapDispatchProps是函数//第二种mapDispatchProps是对象letdispatchProps={dispatch:store.dispacth};//这里是判断数据类型最准确的方法：Object.prototype.toString.call(mapDispatchProps)if(typeofmapDispatchToProps==="function"){dispatchProps=mapDispatchToProps(store.dispach)}elseif(typeofmapDispatchToProps==="object"){dispatchProps=bindActionCreators(mapDispatchToProps,store.dispach)}//*这里的重点是你必须写一个订阅否则我们的代码不会报错但是不会刷新页面，//*redux只是一个状态存储库，没有自动刷新页面的功能，需要我们自己写订阅代码//*这里使用useLayoutEffect而不是useEffect，因为useLayoutEffect是在dom发生变化后才开始同步执行的，useEffect是有延迟的=>{unsubscribe()};},[store])return};//创建上下文constContext=React.createContext();//ExportProvider组件exportconstProvider=({store,children})=>{return{children}};exportconstconnect=({mapStateToProps,mapDispatchToProps})=>WarppedComponent=>props=>{//后代组件使用父组件传下来的值return{(value)=>Cunsumer(value,mapStateToProps,mapDispatchToProps,WarppedComponent,props)}}exportconstbindActionCreators=(data,dispacth)=>{让obj={}for(constkeyindata){obj[key]=dispacth((...arg)=>obj[key](...arg))}returnobj};exportconstuseDispatch=()=>{conststore=useContext(Context)//直接返回store中的dispatchreturnstore.dispatch}exportconstuseSelector=(selctor)=>{conststore=useContext(Context)//这里同样是订阅或者页面不会更新useLayoutEffect(()=>{constunsubscribe=store.subscribe(()=>{forceUpdata()})return()=>unsubscribe()},[store])returnselctor(store.getStore())上面是几个常用API的基本实现。关键是我们这里写的useSelector不能重复调用，否则会产生重复订阅的效果，影响性能。订阅时使用useLayoutEffect而不是useEffect，因为useLayoutEffect在dom变化后开始同步执行，而useEffect有延时，请移步详情