阅读react-redux源码(七) - 实现一个react-redux

最新推荐文章于 2024-03-29 21:17:35 发布
最新推荐文章于 2024-03-29 21:17:35 发布
阅读量266 收藏 1
点赞数
分类专栏： React javascript 文章标签： react-redux react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/letterTiger/article/details/107747285
版权

首先总结react-redux的实现原理，然后根据原理的指导来完成一个简易的react-redux。

  1. 之前说过可以引起React组件更新的元素有两种，一个是props的更新，一个是state的更新，但是props的跟新放眼整个react应用也是state的更新。所以React应用中组件重新渲染只能通过state的更新。
  2. 在React中需要跨层级传递消息可以使用Context。
  3. Redux可以通过subscribe来订阅store中state的更新。

react-redux是通过Context来向下跨组件传递store，然后后代组件通过某些方法来监听store中state的变化，后代组件监听到变化之后设置state来引起自身的更新。

在这其中需要注意的是后代组件监听的state之外的state变动需要避免，不要引起自身重新渲染，还有父组件重新render，子组件关注的props没有更新也需要避免重新render。

ReactRedux的使用方式

首先创建store：

import { createStore } from 'redux'

const UPDATE_A = 'UPDATE_A'

export function createUpdateA (payload) {
  return {
    type: UPDATE_A,
    payload
  }
}

const initialState = {
  a: 1,
  b: 1
}


function reducer (state = initialState, action) {
  const {type, payload} = action
  
  switch (type) {
    case UPDATE_A:
      return Object.assign({}, state, {a: payload})
    default:
      return state
  }
  
}

export default createStore(reducer)

将store提供给react-redux：

import ReactDOM from 'react-dom'
import React from 'react'
import Provider from './Provider'
import store from './store'
import ChildComponentA from './ChildComponentA'

function App () {
  return (
    <Provider store={store}>
    	<CildComponentA />
    </Provider>
	)
}

ReactDOM.render(<App />, document.querySelector('#root'))

将业务组件通过react-redux连接到store

import React from 'react'
import connect from './connect'
import { createUpdateA } from './store'

function _ChildComponentA (props) {
  console.log('ChildComponentA执行了')
  return (
  	<div>
    	<p>我是来自store的a：{props.a}</p>
    	<p onClick={() => props.updateA(props.a + 1)}>a+1</p>
    </div>
  )
}

function mapStateToProps (state) {
  return {
    a: state.a
  }
}

function mapDispatchToProps (dispatch) {
  return {
    updateA(a) {
      dispatch(createUpdateA(a))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(_ChildComponentA)

上面呈现了react-redux的使用方式，主要使用了两个方法，一个是Provider，一个是connect。下面将这两个方法填起来。

react-redux的实现

import { createContext } from 'react'

export const context = createContext(null)

export default function Provider (props) {
  return (
    <context.Provider value={props.store}>
    	{props.children}
    </context.Provider>
  )
}

这样Provider就完成了。

import React, { useContext, useState, useEffect } from 'react'
import { context as defaultContext } from './provider'

function mergeProps (stateProps, dispatchProps, ownProps) {
  return { ...ownProps, ...stateProps, ...dispatchProps }
}

export default function connectHoc (mapStateToProps = () => ({}), mapDispatchToProps = () => ({})) {
  return function wrapWithConnect (wrappedComponent) {
    function connectFunction (props) {
      const [_, setState] = useState(0)
      const store = useContext(defaultContext)
      
      useEffect(() => {
        return store.subscribe(update)
      }, [])
      
      function update () {
        setState(times => ++times)
      }
      
      const stateProps = mapStateToProps(store.getState())
      
      const dispatchProps = mapDispatchToProps(store.dispatch)
      
      const allProps = mergeProps(stateProps, dispatchProps, props)
      
      return <wrappedComponent {...allProps} />
      
    }
    // 为了阻止父组件render带来的不必要更新
    return React.memo(ConnectFunction)
  }
}

到这就完成一半了，实现了子组件订阅store变化重新渲染的功能，并且可以避免因为父组件更新导致子组件重新渲染引起的性能问题。

还缺一半是store中不关心的state的更新也会引起子组件渲染，现在即使是更新了store中的bChildComponentA也会执行。

添加代码如下：

store.js：

const UPDATE_B = 'UPDATE_B'

export function createUpdateB (payload) {
  return {
    type: UPDATE_B,
    payload
  }
}

function reducer (state = initialState, action) {
  const {type, payload} = action
  
  switch (type) {
      
		...
    
    case UPDATE_B:
        return Object.assign({}, state, {b: payload})
      
		...
    
  }
}

添加组件文件childComponentB.js：

import React from 'react'
import connect from '../copyReactRedux2/connect'
import { createUpdateB } from './store.js'

function _ChildComponentB (props) {
  console.log('connectFunctionB执行了')
  return (
  	<div>
    	<p>我是来自store的b：{props.b}</p>
    	<p onClick={() => props.updateB(props.b + 1)}>b+1</p>
    </div>
  )
}

function mapStateToProps (state) {
  return {
    b: state.b
  }
}

function mapDispatchToProps (dispatch) {
  return {
    updateB(b) {
      dispatch(createUpdateB(b))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(_ChildComponentB)

在index.js中添加代码：

function App () {
  return (
    ...
    
    <CildComponentB />
    
    ...
  )
}

准备就绪，点击b+1文字会发现控制台中不仅仅会打印 connectFunctionB执行了还会打印connectFunctionA执行了，这并不是我们希望的。

下面来修改connect的实现修复这个问题。

首先实现下mergeProps函数，让它具有对比记忆的特性，如果没有值改变则返回老的mergedProps。

mergeProps函数：

import { shallowEqual, strictEqual } from './equals'

function mergeProps (stateProps, dispatchProps, ownProps) {
  return { ...ownProps, ...stateProps, ...dispatchProps }
}

function mergedPropsFactory() {
  let hasOnceRun = false
  let stateProps = null
  let dispatchProps = null
  let ownProps = null
  let mergedProps = null
  
  return (newStateProps, newDispatchProps, newOwnProps) => {
    debugger
    if (!hasOnceRun) {
      stateProps = newStateProps
      dispatchProps = newDispatchProps
      ownProps = newOwnProps
			mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
      hasOnceRun = true
      return mergedProps
    }
    
    if (shallowEqual(stateProps, newStateProps) && shallowEqual(ownProps, newOwnProps)) {
      stateProps = newStateProps
      dispatchProps = newDispatchProps
      ownProps = newOwnProps
    } else {
      stateProps = newStateProps
      dispatchProps = newDispatchProps
      ownProps = newOwnProps
			mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
    }
    
    return mergedProps
  }
}

修改wrapWithConnect如下：

function wrapWithConnect (WrappedComponent) {
    function connectFunction (props) {
      const [_, setState] = useState(0)
      const store = useContext(defaultContext)
      
      useEffect(() => {
        return store.subscribe(update)
      }, [])
      
      function update () {
        if (cacheAllProps.current === mergeProps(mapStateToProps(store.getState()), cacheDispatchProps.current, cacheOwnProps.current)) return
        setState(times => ++times)
      }

      const mergeProps = useMemo(() => (mergedPropsFactory()), [])
      const stateProps = mapStateToProps(store.getState())
      const dispatchProps = mapDispatchToProps(store.dispatch)
      const allProps = mergeProps(stateProps, dispatchProps, props)

      const cacheAllProps = useRef(null)
      const cacheOwnProps = useRef(null)
      const cacheStatePros = useRef(null)
      const cacheDispatchProps = useRef(null)

      useEffect(() => {
        cacheAllProps.current = allProps
        cacheStatePros.current = stateProps
        cacheDispatchProps.current = dispatchProps
        cacheOwnProps.current = props
      }, [allProps])
      
      return <WrappedComponent {...allProps} />
      
    }
    // 为了阻止父组件render带来的不必要更新
    return React.memo(connectFunction)
  }

function is(x, y) {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y
  } else {
    return x !== x && y !== y
  }
}

export function shallowEqual(objA, objB) {
  if (is(objA, objB)) return true

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false
  }

  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  if (keysA.length !== keysB.length) return false

  for (let i = 0; i < keysA.length; i++) {
    if (
      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false
    }
  }

  return true
}

export function strictEqual (a, b) {
  return a === b
}

到这里整个都完整了，上面的代码实现了将React组建连接到redux，响应store中state的变动，并且还能做到规避不必要的更新。

葡萄糖o_o
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redux源码学习篇(二) -- react-redux实现
前端小愤青
06-21 226
本文会逐步探索redux到应用分为3个系列 redux 实现 react-redux 实现 redux中间件的应用与实现 文章目录作用核心实现ProviderConnect反思 作用 它帮助我们连接UI层和数据层。即帮我们合并一些重复操作即获取状态getState、修改状态dispatch、订阅更新subscribe。因此提供了两个核心API: Provider: 接收 store,并将其挂载到context上，目的是为了后代组件获取状态 Connect: 将 state、props传递组件并自动.
【重学React】动手实现一个react-redux
01-27
react-redux是redux官方React绑定库。...react-redux的使用，而是要动手实现一个简易的react-redux，希望能够对你有所帮助。 首先思考一下，倘若不使用react-redux，我们的react项目中该如何结合redux 进行开发呢。
原生实现一个react-redux的代码示例
01-19
自己动手实现一个react-redux 之前试过自己动手实现一个redux，这篇blog主要记录动手实现一个react-redux的过程。 这个react-redux还有一点点小瑕疵，我以一个计数器作为例子来实现的。 这是目录结构: 这里的connect.js文件就是react-redux。 ├─component │ connect.js │ counter.js │ └─store index.js index.js： import React from react; import ReactDom,{render} from react-dom; impo
React-redux源码解析--Provider.js
qq_33715850的博客
01-19 936
React-redux源码解析--Provider.js
「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）
zl_Alien的博客
03-10 602
前言 使用过redux的同学都知道,redux作为react公共状态管理工具，配合react-redux可以很好的管理数据,派发更新，更新视图渲染的作用，那么对于 react-redux 是如何做到根据 state 的改变，而更新组件，促使视图渲染的呢，让我们一起来探讨一下，react-redux 源码的奥妙所在。 在正式分析之前我们不妨来想几个问题: 1 为什么要在 root 根组件上使用 react-redux 的 Provider 组件包裹？ 2 react-redux 是怎么和 redux 契合，做
react-redux-源码解析
weixin_38245947的博客
01-05 203
返回值是：返回一个对象：{getState, dispatch, sunscribe}1.reducer函数，根据action的类型，对状态进行更改。redux的最核心api：createStore。3.enhancer：对store的功能进行增强。createStore用来创建store对象，
ReactRedux源码解析与实现
问白的博客
08-30 202
在Redux源码解析与实现（一）Redux源码解析与实现（二）两篇文章中我们知道了通过可以帮助我们在大型复杂的应用中解决状态管理的问题，但我们也发现，只是分析的基本使用和源码之后，梳理了整个逻辑图如下所示： react-redux的基本使用 ract-redux的核心实现 Redux源码解析与实现（一） Redux源码解析与实现（二）
react-redux-ts：React样板
02-06
**React-Redux-TS：React...总的来说，"react-redux-ts"是一个集成React、Redux、TypeScript、Redux-Saga、Ducks模式以及Storybook的开发样板，旨在简化和加速开发过程，提供一个强大且类型安全的前端应用基础架构。
react-Redux源码学习自己实现一个迷你Redux以及reactreduxthunk中间件
08-14
在本文中，我们将深入探讨React-Redux库的核心概念，并尝试自己动手实现一个迷你Redux，同时了解如何使用`react-redux-thunk`中间件。Redux作为JavaScript状态管理库，它简化了React应用中的数据流管理，而`react-...
react-redux-sourcecode-study:react-redux源码分析
03-24
＃React-Redux原始阅读笔记 原理简述 在分析原始代码之前，需要先将react-redux的原理简述一下，否则光干看代码还是会比较懵 先简单的画一个流程 react-redux的核心机制是通知Subscription模式，源码中有一个Subscription类，它的作用主要是Subscription父级的更新和通知子级的更新，也就是它既可以订阅别人，别人也可以订阅它，同时可以通知Subscription它的Subscription 最外层的Provider组件的Context里包含了的store （也就是我们重定向的）和生成的Subscription实例，它的Subscription实例Subscription的则是redux的subscrib() 当我们使用了connect()时，它会生成一个新组件<Component1> ，， <Component1>里会生成一个Subs
redux、react-redux源码解析
AI_rookie的博客
04-17 114
react-redux源码解析
Redux 源码解析系列(一) -- Redux的实现思想，web架构师
最新发布
m0_61418142的博客
03-29 779
=最近有同学问我Redux的一些知识，所以我又把我以前写的源码分析的文章搬出来啦，redux的源码都很简单，很适合初学者学习。虽然最近hooks已经出来了，但是在它真的能替代redux之前，我们还是要好好学习redux，顺便大家可以了解为啥需要redux这样的状态管理工具，对分析比较hooksredux也是有好处的。下面我们就开始吧作者：daisy，原文：https://zhuanlan.zhihu.com/p/57209324Redux简介。
React-redux源码解析--connect.js
qq_33715850的博客
01-19 444
React-redux源码解析--connect.js
react-redux使用及源码分析（上）
如故的博客
08-31 138
react-redux使用及源码分析（上） 一、为何使用react-redux 使用原生 redux，需要在页面中手动获取state和手动触发action，并且还要自己订阅，以便在state发生变化时重新渲染视图。 使用react-redux可以将state和触发action的方法，作为props传给组件，并且会自动订阅，props改变就自动渲染视图了。 二、如何使用react-redux 使用react-redux，有以下几个步骤： 1、使用 redux 创建一个 store import { creat
react-redux源码解析
weixin_41675013的博客
06-26 290
react-redux源码 1.Provider ：把基于属性传递进来的store挂载到上下文上 2.connect provider创建一个组件 并把store挂载到上下文中供后代使用 connect 是干啥的 把两次执行的返回结果 给app.js用 是一个组件 俩参数 connect(...)(...) 第一个执行返回是一个函数 第二个执行返回是一个组件 代理组件 Proxy 渲染proxy目的是把传进来的Task渲染 也就是第二个执行的参数是我们到处的一个代理组件Proxy，后续在在其他组件条用
react-redux的源码分析
我是小奶音啊的博客
08-01 269
react-redux的源码分析 这里简单带着大家看一下react-redux的源码： 但是第一因为这个教程不是讲源码为主的教程（穿插讲解部分源码），所以源码只会阅读核心的部分； 另外我经常会说，整个社区在hooks出现后大量的库转向了hooks，所以在源码中会出现大量的hooks代码； 因为某些hooks的作用在这里也不方便解释（可以学习完hooks之后再详细阅读）； 首先，我们简单看一下Provider的源码： 使用了一个useMemo来返回一个contextValue的对象； 这里使用useMe
React-Redux （部分源码解析以及图示）
小蚂蚁的世界
05-22 1495
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 试图让 state 的变化变得可预测。本章文章初步学习React-Redux，包括基本介绍，部分源码解析，图示。
react-redux 官网
11-14
根据提供的引用内容，React-Redux是一个将Redux与React结合使用的官方库。它提供了一种将Redux store与React组件连接起来的方式，使得组件可以访问store中的状态并对其进行操作。React-Redux还提供了一些高级特性，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值