w3ctech

如何存储 React 组件的数据

主要讲解这几个部分：state、store、static、this、module-global data

前言

随着 React 和 Redux 的到来，一个共同的问题被问到：

我应该将数据保存在 Redux Store 中呢？还是应该保存成本地 state?

其实这个问题是说的不完整（ 或者原文说的太简单 ），因为你能在组件中存储数据的方式还有两种：static 和 this.（其实就是静态数据，还是类的实例数据）

让我们来依次讨论一下，你应该在什么时候使用它们。

一、本地 state ( Local state )

ps：下面翻译的时候将 local state => 直接翻译成 state 吧，对于 state 其实的作用域是与组件挂钩的，直接翻译成本地 state 其实是不准确的。

当 React 在第一次被介绍的时候，我们就知道state。我们知道一个很重要的事情，就是当 state 的值改变的时候将触发组件的 re-render（重新渲染）。

这个 state 也能传递给子组件，子组件中通过 props 来获取传递的数据，这就允许你能够将你的组件分为：smart data-components（智能数据组件）and dumb presentational-components （填鸭式组件）。

这里有一个使用 state 来编写的 counter app（计数 APP）：

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
    this.addOne = this.addOne.bind(this)
  }

  addOne() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  render() {
    return (
      <div>
        <button
          onClick={ this.addOne }>
          Increment
        </button>
        { this.state.counter }
      </div>
    )
  }
}

export default App

你的数据（ counter 的值 ）是存储在 App 组件中，也能向下传递给子组件。

& 应用场景

假如 counter 数据在你的 app 中是很重要的，以及这个数据会存储下来用于其他组件，那么你将不希望使用 state 来保存这个值。

这最好的实践是处理用户接口 (UI, User Interface) 的状态数据。比如：使用一个 交互组件 去填写表单，这时候使用 state 是不错的选择。

另外的例子，就是在 UI 交互相关的数据中使用，比如你将在一个列表中记录当前选中的 tab （选项卡）的状态，你就能存储一个 state。

在你选择 state 的使用时机，也能够这样考虑：你存储的数据是否会在其他组件中使用。如果一个值是只有一个组件（或者也许只有一个子组件），这时使用 state 来保持这个值（或者说状态）都是安全的。

总结：保持 UI 状态和暂时的数据（比如：表单的输入），能够使用 state。

二、Redux store

随着发展，每个人开始选择单向数据流, 我们选择 Redux。

对于 Redux，我们将获得一个全局的 store。这个 store 将绑定在一个最高等级的组件中，然后将 App 的数据流入所有的子组件（其实整个 App 就已经是这个最高等级组件的子组件了）。你能 connect 全局 store，使用：connect wrap 和 mapStateToProps 方法.

首先，人们就将任何事情都交给了 Redux store。比如：Users, modals, forms, sockets...，主要你知道的。

下面是一个和之前相同的计数 App，然后使用了 Redux。主要需要注意的是 counter 数据，使用 mapStateToProps 映射了数据，并且使用 connect 方法包裹组件，this.state.counter 现在就变成了 this.props.counter，然后这个值就是通过全局 store 获取的，这个全局 store 将值传递给当前组件的 props。（如果想知道具体，我在 React.js 模式的文章中有介绍原理）。

import React from 'react'
import { connect } from 'react-redux'
import Actions from './Actions.js'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.addOne = this.addOne.bind(this)
  }

  addOne() {
    this.props.dispatch(Actions.addOne())
  }

  render() {
    return (
      <div>
        <button
          onClick={ this.addOne }>
          Increment
        </button>
        { this.props.counter }
      </div>
    )
  }
}

const mapStateToProps = store => {
  return {
    counter: store.counter
  }
}

export default connect(mapStateToProps)(App)

现在当你点击按钮的时候，通过一个 action => dispatched 使全局 store 更新。然后这个数据通过外层组件传递到当前组件。

值得注意的是：当 props 被更新的时候，这也将触发组件的 re-render（重新渲染）=> 这与你更新 state 的时候一样。

& 应用场景

对于 Redux store 是很好的保持了除 UI 状态数据外的应用状态。有一个不错的例子，比如用户的登录状态。对于在在登录状态改变的同时，多数组件需要访问这个数据信息做出响应。这些组件（至少有一个被渲染）将需要重新渲染与更新的信息。

Redux 触发事件在你需要跨组件或者跨路由的情况下是很有用的。比如有一个登录弹框，当你的 App 中有多个按钮点击都将触发弹出它的时候。而不是在你需要渲染这个弹框的多个地方做判断，你能通过一个顶层的 App 组件去使用 Redux action 去触发它并且修改 store 的值。

总结：你想将跨组件的保持数据的时候能够使用 store。

三、this.

在 React 的开发中，使用 this 来保存数据的场景很少。人们经常忘记了 React 使用的是 JavaScript 的 ES2015 的语法。任何你能够用 JavaScript 做的事情，你都能在 React 做（这也是我非常喜欢 React 的原因呢 ^0^ freedom）。

下面的例子依然是一个计数应用，与之前的例子有点类似。

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.counter = 0
    this.addOne = this.addOne.bind(this)
  }

  addOne() {
    this.counter += 1
    this.forceUpdate()
  }

  render() {
    return (
      <div>
        <button
          onClick={ this.addOne }>
          Increment
        </button>
        { this.counter }
      </div>
    )
  }
}

export default App

我们是在组件中使用 this 存储 counter 变量的值，并且使用 forceUpdate() 方法来触发组件的重新渲染。这是因为没有任何的 state 和 props 修改，因此没有自动触发重新渲染机制。

这个例子实际上不应该使用 this。如果你发现你必须使用 forceUpdate() 才能满足需求，你可能代码哪里出了问题。如果想值修改的时候自动触发重新渲染，你应该使用 state 或者 props/Redux store（其实严格一点来说，作者这里的表述是不清的，其实重新渲染与 Redux 并无关系，本质上就是 props 的更新流入组件）。

& 应用场景

使用 this 来保存数据的时候，能够在改变的时候不需要去触发重新渲染的场景。比如：sockets 是很好的一个使用 this 保存数据的场景。

import React from 'react'
import { Socket } from 'phoenix'

class App extends React.Component {
  componentDidMount() {
    this.socket = new Socket('http://localhost:4000/socket')
    this.socket.connect()
    this.configureChannel("lobby")
  }

  componentWillUnmount() {
    this.socket.leave()
  }

  configureChannel(room) {
    this.channel = this.socket.channel(`rooms:${room}`)
    this.channel.join()
      .receive("ok", () => {
        console.log(`Succesfully joined the ${room} chat room.`)
      })
      .receive("error", () => {
        console.log(`Unable to join the ${room} chat room.`)
      })
  }

  render() {
    return (
      <div>
        My App
      </div>
    )
  }
}

export default App

大多数人们没有他们之前一直在使用 this 定义方法。放你定义 render()，你实际上是：this.prototype.render = function () { }，但是这在 ES2015 的 class 语法机制下是隐式的。

总结：在不需要数据改变的时候去触发重新渲染机制的时候，能够使用 this 去保存数据。

四、Static(静态的方式)

静态方法和属性也许是最少使用的（静下来，我知道他们不是真正在 class 下的一个机制），大多数是因为他们没有被频繁使用。但是他们不是很复杂。如果你用过 PropTypes，你就定义了一个 static 属性。

下面有两份代码块实际上是长得一样的。人们经常使用的方式是第一种，第二种是你能使用 static 关键字来定义。

class App extends React.Component {
  render() {
    return (<div>{ this.props.title }</div>)
  }
}

App.propTypes = {
  title: React.PropTypes.string.isRequired
}

class App extends React.Component {
  static propTypes {
    title: React.PropTypes.string.isRequired
  }

  render() {
    return (<div>{ this.props.title }</div>)
  }
}

正如你看到的，static 并不复杂。他们是一种另外的方式去声明一个类的值。这主要的不同是 static 不要像 this 那样去实例化一个类再去访问值。

class App extends React.Component {
  constructor() {
    super()
    this.prototypeProperty = {
      baz: "qux"
    }
  }
  static staticProperty = {
    foo: "bar"
  };

  render() {
    return (<div>My App</div>)
  }
}

const proto = new App();
const proto2 = proto.prototypeProperty // => { baz: "qux" }

const stat = App.staticProperty // => { foo: "bar" }

在这个例子中，你能看获取 staticProperty 的值，我们只组要直接通过类名去访问，而不是实例后。但是访问 proto.prototypeProperty 就必须要 new App().

& 应用场景

静态方法和属性是很少被使用，主要被用来定义工具方法或者特定类型的所有组件。

propTypes 是一个工具例子，比如一个 Button 组件，每一个按钮的渲染都需要相似的值。

另外个案例就是如果你关注获取的数据。如果你是使用 GraphQL 或者 Falcor，你能具体描述需要服务端返回什么数据。这种方法你能不用接受大量组件不需要的数据。

class App extends React.Component {
  static requiredData = [
    "username",
    "email",
    "thumbnail_url"
  ]

  render() {
    return(<div></div>)
  }
}

因此在例子中，在特殊组件请求数据之前，你能使用 App.requiredData 快速获取必要的 query 的值。

总结：你也许几乎不会使用 static 来保存数据。

五、其他方式...

其实是有另一个选择，我没有在标题中说明，因为你不应该这样做：你可以存储在一个全局变量，然后通过一个文件进行导出。

这是一个特别的场景，然后大多数情况下你不应该这样做。

import React from 'react'

let counter = 0

class App extends React.Component {
  constructor(props) {
    super(props)
    this.addOne = this.addOne.bind(this)
  }

  addOne() {
    counter += 1
    this.forceUpdate()
  }

  render() {
    return (
      <div>
        <button
          onClick={ this.addOne }>
          Increment
        </button>
        { counter }
      </div>
    )
  }
}

export default App

你能够看到和使用 this 是类似的，除了使用的是一个全局的变量。

如果你需要跨组件的共享数据以及保存一个全局变量，大多数更好的是使用 Redux store。

总结：不要使用全局变量。

原文出自：https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00#.yvhqqxdkh

博客原文：http://60sky.com/post/how-to-saved-react-component-data.html

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复