react-redux 核心原理实现 - 附加 useMemo和UseCallBack
redux不是react官方出的库，react-redux才是react官方出的库，是在redux的基础上进行封装。react-redux是将组件再次进行细分，分成了容器组件和UI组件
为什么要使用react-redux
这一点在我刚学习react-redux的时候也一直是困扰了我许久，因为我感觉就直接使用redux已经是很方便的可以使用了。但是使用react-redux我们在写类组件的时候还要写很复杂的connect函数来链接容器组件和UI组件。
但是在我深入的学习并且在实际开发中用到了react了以后，发现直接使用redux是有问题的，比如每个组件我们要使用store的数据都需要手动引入store。再进行getState,subscribe,很复杂，而使用了react-redux之后就可以直接在最顶层向下传递，并且如果是类组件就可以直接将store中我们要用的东西通过connect方法链接到组件的props上，非常的方便
尤其是在react-redux@7.1.0版本之后直接支持了useDispatch和useSelector这两个hooks，可以让我们在函数组件中更加优雅的获取到state和dispatch。简直不要太好用。
API
-
Provider
是一个组件，可以接收一个 store 对象，store就是redux的那个store，一般都是放在整个项目的最外层根组件
<Provider store={store}><App /></Provider> -
connect
用于链接容器组件和UI组件的方法，是一个高阶函数，接收两个值，分别是mapStateToProps和mapDIspatchToProps，返回的函数时一个高阶组件，接收UI组件，返回一个新的组件，新的组件上的props就含有映射到props上的所有的值
NewComponent = connect(({count}) => ({ count }), {add:()=>({type:'ADD'}),addTen:()=>({type:'ADD',payload:10})})(Index)上面的代码中Index就是一个UI组件最终返回 NewComponent 这个新组件
mapStateToProps：最好的写法是写成一个函数 接收什么参数就返回什么参数
- 正常写法 state => ({count:state.count}) 但是实际上可以更加的优雅
- 优雅写法 ({count})=>({count}) 在接收形参的时候就进行了一次解构 直接将解构后的数据以对象形式返回
mapDispatchToProps：可以时object也可以是function
-
object:{add:()=>({type:‘ADD’}),addTen:()=>({type:‘ADD’,payload:10})}
-
function: dispatch => {
let creators = {
add: ()=>({type:‘ADD’}),
addTen: ()=>({type:‘ADD’,payload:10})
}
creators = bindActionCreators(creators,dispatch)
return {…creators,dispatch}
}
-
bindActionCreators
接收一个对象，和dispatch
这个函数的目的：将 {add:()=>({type:‘ADD’})} 类型的数据 改成 {add:() => { dispatch(value()) }}
-
useSelector
hooksAPI,直接获取redux的state，接收一个函数，用法和mapStateToProps是一样的
const state = useSelector(({count})=>({count})) -
useDispatch
hooksAPI，直接获取redux中store的dispatch函数
const dispatch = useDispatch()
基本用法
// 根组件
import { Provider } from 'react-redux'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// 使用connect方法为组件的props绑定参数
import React, { Component } from 'react'
import { connect,bindActionCreators } from 'react-redux'
class Index extends Component {
constructor(e) {
super(e)
}
render() {
console.log(this.props)
const { count, dispatch,add,addTen } = this.props
return (
<div>
<h3>ClassReactReduxPage</h3>
<p>{count}</p>
<button onClick={()=>{add()}}>+1</button>
<button onClick={()=>{addTen()}}>+10</button>
</div>
)
}
}
const NewComponent = connect(({count}) => ({ count }), {add:()=>({type:'ADD'}),addTen:()=>({type:'ADD',payload:10})})(Index)
export default NewComponent
// 使用hooks更加优雅的方式
import {useSelector,useDispatch} from 'react-redux'
const Index = () => {
const state = useSelector(({count})=>({count}))
const dispatch = useDispatch()
console.log(state,dispatch)
return (
<div>
<h3>FunctionReactReduxPage</h3>
<p>{state.count}</p>
<button onClick={()=>{dispatch({type:'ADD'})}}>+1</button>
<button onClick={()=>{dispatch({type:'ADD',payload:10})}}>+10</button>
</div>
)
}
export default Index
实现的思路
通过context在最外层传递store对象，里面的子组件再分别获取这个context上的值，就能拿到store的值。思路比较清晰，就是封装起来其实还蛮复杂，不过不会很难
核心实现
-
Provider
// 分别导入react和redux import React,{useContext,useEffect,useLayoutEffect,useReducer} from 'react' import store from '../store/index' // 创建全局的context const storeContext = React.createContext(store.getState()) // 创建Provider组件，这个组件接收store 组件内部返回的实际上是 context的provider 并绑定 value 这样所有的子组件都能接收到这个context const Provider = ({store,children})=>{ return ( <storeContext.Provider value={store}> {children} </storeContext.Provider> ) } // 最后到处这个组件 export {Provider} -
connect
import React,{useContext,useEffect,useLayoutEffect,useReducer} from 'react' import store from '../store/index' const storeContext = React.createContext(store.getState()) // 这里的细节实际上 connect 的写法，它是接收两个参数，mapStateToprops，mapDispatchToprops，返回一个函数，函数再接收一个组件，最终返回一个新组件。这里一定要理清了 才会看得懂这个connect 刚开始写可以不要全是箭头，可以把所有的括号和return都写出来，更有利于理解 const connect = (mapStateToProps = (state)=>{return state},mapDispatchToProps)=>Component=>props=>{ const store = useContext(storeContext) const {dispatch} = store const stateProps = mapStateToProps(store.getState()) let dispatchProps = null if(typeof mapDispatchToProps === "object"){ // {add:()=>{dispatch({type:'ADD'})}} dispatchProps = bindActionCreators(mapDispatchToProps,dispatch) }else if(typeof mapStateToProps === 'function'){ dispatchProps = mapDispatchToProps(dispatch) } // 函数组件通过 useReducer 改变state的方式实现类组件中的 foceUpdate 强制刷新 const [,foceUpdate] = useReducer(prev=>prev+1,0) useLayoutEffect(()=>{ store.subscribe(()=>{ // 执行组件的foceupdate foceUpdate() }) return ()=>{ // 这里相当于是 组件 willmounted 的生命周期 } },[store]) // react返回的组件一定要大写开头 return <Component {...props} {...stateProps} {...dispatchProps} /> } export {connect} -
bindActionCreators
// 这个函数比较简单，就正常的修改对象结构 function bindActionCreators (obj,dispatch){ /** * 这个函数的目的： * 将 {add:()=>{dispatch({type:'ADD'})}} 类型的数据 改成 {add:() => { dispatch(value()) }} */ let dispatchObj = {} for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { const value = obj[key]; dispatchObj[key] = ()=>{dispatch(value())} } } dispatchObj['dispatch'] = dispatch return dispatchObj } -
useSelector
function useSelector(fn){ /** * react的钩子 只能在函数组件和自定义hooks钟使用 */ const [,foceUpdate] = useReducer(prev=>prev+1,0) useEffect(()=>{ store.subscribe(()=>{ // 执行组件的foceupdate foceUpdate() }) return ()=>{ // 这里相当于是 组件 willmounted 的生命周期 } },[store]) const {getState} = useStore() // 获取全局的那个context const selectState = fn(getState()) return selectState } function useStore(){ return useContext(storeContext) } -
useDispatch
function useDispatch(){ const {dispatch} = useStore() let selectDispatch = dispatch return selectDispatch } function useStore(){ return useContext(storeContext) }
react-redux总结：
以上的那几个函数封装好之后其实就可以使用啦。react-redux的源码上还有处理很多的细节。但是核心的实现其实和这里不会差的很多。多写几遍，更有利于理解！
useMemo和useCallBack
这两个都是用于缓存数据的，区别在于，useMemo是缓存参数 useCallBack用于缓存函数，主要的目的都是为了性能优化，减少一些没有必要的渲染
-
useMemo
非常类似于vue中的computed
import {useState,useMemo} from 'react' const UseMemoPage = ()=>{ const [count,setCount] = useState(0) const [input,setInput] = useState(0) const expensive = ()=>{ console.log('expensive!!!') return count+1 } /** * useMemo 用于缓存数据 传递一个effect和一个依赖性 * 只有依赖项发生改变的时候才会去执行effect * 就算整个组件重新render也不会去反复执行没有必要的render * 是节约资源的一种使用方式 */ const expensiveMemo = useMemo(()=>{ // 只有count这个state发生改变的时候 这里的内容才会执行 否则其他state改变 这里不会执行 console.log('expensiveMemo!!!') return count+1 },[count]) return ( <div> <h3>UseMemoPage</h3> <p>expensive:{expensive()}</p> <p>expensiveMemo:{expensiveMemo}</p> <p>{count}</p> <button onClick={()=>{setCount(count+1)}}>+1</button> <input type="text" value={input} onChange={(e)=>{setInput(e.target.value)}} /> </div> ) } export default UseMemoPage -
useCallBack
import {useState,useCallback,PureComponent} from 'react' const UseCallBackPage = ()=>{ const [count,setCount] = useState(0) const [input,setInput] = useState(0) /** * useCallBack 函数 传递一个 effect 和 一个依赖性 * 会将这个effect函数给缓存起来 只有当依赖项发生改变的时候 子组件才会重新渲染 * * 但是细节是子组件 必须是 类组件且继承自 PureComponent 才能达到这个效果 * 函数组件和继承自Component的类组件都不行 */ const minsCount = useCallback(()=>{ let sum = 0 for(let i = 0; i<count;i++){ sum+=i } return sum },[count]) return ( <div> <h3>UseCallBackPage</h3> <p>{count}</p> <button onClick={()=>{setCount(count+1)}}>+1</button> <input type="text" value={input} onChange={(e)=>{setInput(e.target.value)}} /> <Child minsCount={minsCount} /> </div> ) } class Child extends PureComponent{ render(){ console.log('child render！') return ( <div> <h5>child!!</h5> <button onClick={()=>{this.props.minsCount()}}>min</button> </div> ) } } export default UseCallBackPage- 只有当依赖项发生改变的时候 子组件才会重新渲染
- 类组件且继承自 PureComponent 才能达到这个效果，函数组件和继承自Component的类组件都不行
总结
在开发react的时候就少不了性能优化，性能优化不够会造成资源的浪费，也会导致页面卡顿，所以react程序员一定要很注重性能优化，useMemo和useCallBack就是性能优化的手段
useEffect和useLayoutEffect
两者的API和函数签名都是一模一样的，区别在于两者的执行时间。
- useEffect是异步，也就是组件过载之后并不会立刻执行，而是会间隔一小段时间才去执行
- useLayoutEffect是同步的，组件一旦挂载成功就会立刻执行
- 大部分的场景使用useEffect即可，有的场景就必须使用useLayoutEffect，比如react-redux，在监听store的时候就需要使用useLayoutEffect，很有可能就是在那个间隔的时间内丢失监听最后造成bug
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
