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

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