react-redux 核心原理实现 - 附加 useMemo和UseCallBack

程和蔼
2023-12-01

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版本之后直接支持了useDispatchuseSelector这两个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
 类似资料: