资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/实现React-redux的基本功能

实现React-redux的基本功能

dreamans / 2020人阅读

摘要：要实现先搞清楚的就是这么一个东西，某个组件只要往自己的里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。

1.要实现redux,先搞清楚context 
React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的
//现在我们修改 Index，让它往自己的 context 里面放一个 themeColor
class Index extends Component {
  static childContextTypes = {//要给组件设置 context，那么 childContextTypes 是必写的
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: "red" }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      

        

        

      

    )
  }
}
//子组件直接获取context里面的东西
//子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，
//它也是必写的
class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      
React.js

    )
  }
}
2.实现共享状态优化 
context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料,这时我们就需要规范对共享状态的修改

1.假设使用的是一个共享状态 appState，每个人都可以修改它
2.所有对共享状态的操作都是不可预料的（某个模块 appState.title = null 你一点意见都没有），出现问题的时候 debug 起来就非常困难
3.如果所有对数据的操作必须通过 dispatch 函数。它接受一个参数 action，这个 action 是一个普通的 JavaScript 对象，里面必须包含一个 type 字段来声明你到底想干什么，那就好操作了

4.我们可以把appState 和 dispatch抽离出来结合到一起形成store，构建一个函数 createStore，用来专门生产这种 state 和 dispatch 的集合

/*createStore 接受两个参数，一个是表示应用程序状态的 state；另外一个是 stateChanger，
它来描述应用程序状态会根据 action 发生什么变化*/
function createStore (state, stateChanger) {
  const getState = () => state
  const dispatch = (action) => stateChanger(state, action)
  return { getState, dispatch }
}
renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: "UPDATE_TITLE_TEXT", text: "《React.js 》" }) // 修改标题文本
store.dispatch({ type: "UPDATE_TITLE_COLOR", color: "blue" }) // 修改标题颜色
renderApp(store.getState()) // 把新的数据渲染到页面上
3.实现Redux数据刷新优化

1.细上面代码中更改数据后需要手动调用renderapp刷新，这里我们可以用观察者模式优化刷新

function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    stateChanger(state, action)
    listeners.forEach((listener) => listener())//dispatch后调用我传入subscribe的刷新方式
  }
  return { getState, dispatch, subscribe }
}
//可以用同一个APPstate去渲染不同的页面
const store = createStore(appState, stateChanger)
store.subscribe(() => renderApp(store.getState()))
store.subscribe(() => renderApp2(store.getState()))
store.subscribe(() => renderApp3(store.getState()))

2.避免重复渲染优化 这里直接引用胡子大叔的优化

function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = stateChanger(state, action) // 覆盖原对象
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

function renderApp (newAppState, oldAppState = {}) { // 防止 oldAppState 没有传入，所以加了默认参数 oldAppState = {}
  if (newAppState === oldAppState) return // 数据没有变化就不渲染了
  console.log("render app...")
  renderTitle(newAppState.title, oldAppState.title)
  renderContent(newAppState.content, oldAppState.content)
}

function renderTitle (newTitle, oldTitle = {}) {
  if (newTitle === oldTitle) return // 数据没有变化就不渲染了
  console.log("render title...")
  const titleDOM = document.getElementById("title")
  titleDOM.innerHTML = newTitle.text
  titleDOM.style.color = newTitle.color
}

function renderContent (newContent, oldContent = {}) {
  if (newContent === oldContent) return // 数据没有变化就不渲染了
  console.log("render content...")
  const contentDOM = document.getElementById("content")
  contentDOM.innerHTML = newContent.text
  contentDOM.style.color = newContent.color
}

let appState = {
  title: {
    text: "React.js 小书",
    color: "red",
  },
  content: {
    text: "React.js 小书内容",
    color: "blue"
  }
}

function stateChanger (state, action) {
  switch (action.type) {
    case "UPDATE_TITLE_TEXT":
      return { // 构建新的对象并且返回
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case "UPDATE_TITLE_COLOR":
      return { // 构建新的对象并且返回
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state // 没有修改，返回原来的对象
  }
}

const store = createStore(appState, stateChanger)
let oldState = store.getState() // 缓存旧的 state
store.subscribe(() => {
  const newState = store.getState() // 数据可能变化，获取新的 state
  renderApp(newState, oldState) // 把新旧的 state 传进去渲染
  oldState = newState // 渲染完以后，新的 newState 变成了旧的 oldState，等待下一次数据变化重新渲染
})

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: "UPDATE_TITLE_TEXT", text: "《React.js 小书》" }) // 修改标题文本
store.dispatch({ type: "UPDATE_TITLE_COLOR", color: "blue" }) // 修改标题颜色
4.Reducer 
其实 appState 和 stateChanger 可以合并到一起去

1将appstate放入statechanger

function stateChanger (state, action) {
  if (!state) {
    return {
      title: {
        text: "React.js 小书",
        color: "red",
      },
      content: {
        text: "React.js 小书内容",
        color: "blue"
      }
    }
  }
  switch (action.type) {
    case "UPDATE_TITLE_TEXT":
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case "UPDATE_TITLE_COLOR":
      return {
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state
  }
}

2.creactstore的参数就会被优化为一个

function createStore (stateChanger) {
  let state = null
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = stateChanger(state, action)
    listeners.forEach((listener) => listener())
  }
  dispatch({}) // 初始化 state
  return { getState, dispatch, subscribe }
}

3.最后我们规定createStore参数的名字为reducer，且reducer是一个纯函数

reducer 是不允许有副作用的。你不能在里面操作 DOM，也不能发 Ajax 请求，更不能直接修改 state，它要做的仅仅是 —— 初始化和计算新的 state
// 定一个 reducer
function reducer (state, action) {
  /* 初始化 state 和 switch case */
}
// 生成 store
const store = createStore(reducer)
// 监听数据变化重新渲染页面
store.subscribe(() => renderApp(store.getState()))
// 首次渲染页面
renderApp(store.getState()) 
// 后面可以随意 dispatch 了，页面自动更新
store.dispatch(...)
5.React-redux中的store和context 
React.js 的 context 中提出，我们可用把共享状态放到父组件的 context 上，这个父组件下所有的组件都可以从 context 中直接获取到状态而不需要一层层地进行传递了，但组件对其的改动会让context不可预料。 store 的数据不是谁都能修改，而是约定只能通过 dispatch 来进行修改，这样的话每个组件既可以去 context 里面获取 store 从而获取状态，又不用担心它们乱改数据了，所以将store和context结合起来

1.构建自己的React-redux

import React, { Component } from "react"
import PropTypes from "prop-types"
import ReactDOM from "react-dom"
import Header from "./Header"
import Content from "./Content"
import "./index.css"

function createStore (reducer) {
  let state = null
  const listeners = [
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state//这是函数表达式 调用它时state已经初始化了
  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach((listener) => listener())
  }
  dispatch({}) // 初始化 state
  return { getState, dispatch, subscribe }
}

const themeReducer = (state, action) => {
  if (!state) return {
    themeColor: "red"
  }
  switch (action.type) {
    case "CHANGE_COLOR":
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

const store = createStore(themeReducer)

class Index extends Component {
  static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
    return { store }//将store放入context
  }

  render () {
    return (
      

        

        
      

    )
  }
}

2.子组件获取context中的配置

class Header extends Component {
  static contextTypes = {
    store: PropTypes.object
  }

  constructor () {
    super()
    this.state = { themeColor: "" }
  }

  componentWillMount () {
    this._updateThemeColor()
  }

  _updateThemeColor () {
    const { store } = this.context//解构赋值取出来
    const state = store.getState()
    this.setState({ themeColor: state.themeColor })//放到state中来用
  }

  render () {
    return (
      
React.js 小书

    )
  }
}

3.用dispatch去改变配置刷新页面

//首先配置监听函数的刷新模式
componentWillMount () {
    const { store } = this.context
    this._updateThemeColor()//获取默认数据加载
    store.subscribe(() => this._updateThemeColor())//dispatch数据更改后加载
  }
//触发事件
  handleSwitchColor (color) {
    const { store } = this.context
    store.dispatch({
      type: "CHANGE_COLOR",
      themeColor: color
    })
  }
6.React-redux与组件拆分开,让组件无污染可复用性强 
可以把一些可复用的逻辑放在高阶组件当中，高阶组件包装的新组件和原来组件之间通过 props 传递信息，减少代码的重复程度,我们需要高阶组件帮助我们从 context 取数据，然后用高阶组件把它们包装一层，高阶组件和 context 打交道，把里面数据取出来通过 props 传给 Dumb 组件

1.这个高阶组件起名字叫 connect，因为它把 Dumb 组件和 context 连接
2.每个传进去的组件需要 store 里面的数据都不一样的，所以除了给高阶组件传入 Dumb 组件以外，还需要告诉高级组件我们需要什么数据

import React, { Component } from "react"
import PropTypes from "prop-types"
//connect 现在是接受一个参数 mapStateToProps，然后返回一个函数，这个返回的函数才是高阶组件
export const connect = (mapStateToProps) => (WrappedComponent) => {
  class Connect extends Component {
    static contextTypes = {
      store: PropTypes.object
    }

    render () {
      const { store } = this.context
      let stateProps = mapStateToProps(store.getState())
      // {...stateProps} 意思是把这个对象里面的属性全部通过 `props` 方式传递进去
      return 
    }
  }

  return Connect
}

----------
//mapStateToProps为传入数据的方式
const mapStateToProps = (state) => {
  return {
    themeColor: state.themeColor
  }
}
Header = connect(mapStateToProps)(Header)
//这里的mapStateToprops在connect里面执行并把获取的数据放到header的props中

3.除了传递数据我们还需要高阶组件来 dispatch

const mapDispatchToProps = (dispatch) => {
  return {
    onSwitchColor: (color) => {
      dispatch({ type: "CHANGE_COLOR", themeColor: color })
    }
  }
}

4.结合起来构建Connect

export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
  class Connect extends Component {
    static contextTypes = {
      store: PropTypes.object
    }

    constructor () {
      super()
      this.state = {
        allProps: {}
      }
    }

    componentWillMount () {
      const { store } = this.context
      this._updateProps()
      store.subscribe(() => this._updateProps())
    }

    _updateProps () {
      const { store } = this.context
      let stateProps = mapStateToProps
        ? mapStateToProps(store.getState(), this.props)
        : {} // 防止 mapStateToProps 没有传入
      let dispatchProps = mapDispatchToProps
        ? mapDispatchToProps(store.dispatch, this.props)
        : {} // 防止 mapDispatchToProps 没有传入
      this.setState({
        allProps: {
          ...stateProps,
          ...dispatchProps,
          ...this.props
        }
      })
    }

    render () {
      return 
    }
  }
  return Connect
}

5.剥离出index.js

class Index extends Component {
  static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
    return { store }
  }//这些都是污染需要剥离

  render () {
    return (
      

        

        
      

    )
  }
}

6.Provider

//将index中污染部分放入Provider，再用成为index的父组件
export class Provider extends Component {
  static propTypes = {
    store: PropTypes.object,
    children: PropTypes.any
  }

  static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
    return {
      store: this.props.store
    }
  }

  render () {
    return (
      
{this.props.children}

    )
  }
}
...
// 头部引入 Provider
import { Provider } from "./react-redux"
...

// 删除 Index 里面所有关于 context 的代码
class Index extends Component {
  render () {
    return (
      

        

        
      

    )
  }
}

// 把 Provider 作为组件树的根节点
ReactDOM.render(
  
    
  ,
  document.getElementById("root")
)
云服务器 混合云 数据加密的基本功能 防火墙的基本功能 网络防火墙的基本功能 阿里云盾web应用防火墙的基本功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108899.html

相关文章

  • redux以及react-redux简单实现

    摘要：写在前头简介随着单页应用开发日趋复杂，需要管理比任何时候都要多的状态。如果一个的变化会引起另一个变化，那么当变化时，就可能引起对应以及另一个的变化，依次地，可能会引起另一个的变化。一些库如试图在视图层禁止异步和直接操作来解决这个问题。 写在前头 redux 简介   随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （...

    elliott_hu 评论0 收藏0

  • 实现React-redux的基本功能

    摘要：要实现先搞清楚的就是这么一个东西，某个组件只要往自己的里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。 1.要实现redux,先搞清楚context React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 co...

    dmlllll 评论0 收藏0

  • react-redux初级教程，纯白话讲述redux数据、开发流程整理，redux数据持久化实现

    摘要：日常项目直接使用是完全没有问题的，可是随着项目的日益壮大，组件数量的逐渐增长，组件之间的嵌套使得数据的管理越来越繁重。最后数据保存进了中的，页面也会根据的改变自动更新。 以下文章均为个人近期所学心得，自学react、redux，逐渐找到自己的方向，现将自己的方向方式写出来，以供大家学习参考，肯定会有不足，欢迎批评指正。 日常项目直接使用react是完全没有问题的，可是随着项目的日益壮大...

    gclove 评论0 收藏0

  • React 实践心得：react-redux 之 connect 方法详解

    摘要：但这并不是最佳的方式。最佳的方式是使用提供的和方法。也就是说，与的与完全无关。另外，如果使用对做属性类型检查，方法和方法为添加的属性是存在的。注意，的变化不会引起上述过程，默认在组件的生命周期中是固定的。 转载注： 本文作者是淘宝前端团队的叶斋。笔者非常喜欢这篇文章，故重新排版并转载到这里，同时也加入了一些自己的体会。 原文地址：http://taobaofed.org/blog/...

    张春雷 评论0 收藏0

发表评论

登陆后可评论

0条评论

dreamans

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<