摘要:四静态的方式静态方法和属性也许是最少使用的静下来,我知道他们不是真正在下的一个机制,大多数是因为他们没有被频繁使用。但是访问就必须要应用场景静态方法和属性是很少被使用,主要被用来定义工具方法或者特定类型的所有组件。
前言主要讲解这几个部分: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 ({ this.state.counter }) } } export default App
你的数据( counter 的值 )是存储在 App 组件中,也能向下传递给子组件。
& 应用场景假如 counter 数据在你的 app 中是很重要的,以及这个数据会存储下来用于其他组件,那么你将不希望使用 state 来保存这个值。
这最好的实践是处理用户接口 (UI, User Interface) 的状态数据。比如:使用一个 交互组件 去填写表单,这时候使用 state 是不错的选择。
另外的例子,就是在 UI 交互相关的数据中使用,比如你将在一个列表中记录当前选中的 tab (选项卡)的状态,你就能存储一个 state。
在你选择 state 的使用时机,也能够这样考虑:你存储的数据是否会在其他组件中使用。如果一个值是只有一个组件(或者也许只有一个子组件),这时使用 state 来保持这个值(或者说状态)都是安全的。
二、Redux store总结:保持 UI 状态和暂时的数据(比如:表单的输入),能够使用 state。
随着发展,每个人开始选择单向数据流, 我们选择 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 ({ this.props.counter }) } } 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 的值。
三、this.总结:你想将跨组件的保持数据的时候能够使用 store。
在 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 ({ this.counter }) } } 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 (My App) } } export default App
大多数人们没有他们之前一直在使用 this 定义方法。放你定义 render(),你实际上是:this.prototype.render = function () { },但是这在 ES2015 的 class 语法机制下是隐式的。
四、Static(静态的方式)总结:在不需要数据改变的时候去触发重新渲染机制的时候,能够使用 this 去保存数据。
静态方法和属性也许是最少使用的(静下来,我知道他们不是真正在 class 下的一个机制),大多数是因为他们没有被频繁使用。但是他们不是很复杂。如果你用过 PropTypes,你就定义了一个 static 属性。
下面有两份代码块实际上是长得一样的。人们经常使用的方式是第一种,第二种是你能使用 static 关键字来定义。
class App extends React.Component { render() { return ({ this.props.title }) } } App.propTypes = { title: React.PropTypes.string.isRequired }
class App extends React.Component { static propTypes { title: React.PropTypes.string.isRequired } render() { return ({ this.props.title }) } }
正如你看到的,static 并不复杂。他们是一种另外的方式去声明一个类的值。这主要的不同是 static 不要像 this 那样去实例化一个类再去访问值。
class App extends React.Component { constructor() { super() this.prototypeProperty = { baz: "qux" } } static staticProperty = { foo: "bar" }; render() { return (My App) } } 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() } }
因此在例子中,在特殊组件请求数据之前,你能使用 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 ({ counter }) } } 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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92358.html
摘要:协调状态的这三个方面是前端开发的重要组成部分,对这项任务有不同程度的支持。这使得保持高度统一。的真正威力到目前为止,看上去只是的辅助工具。在的术语中这称之为派发动作。撤销重做流行的撤销重做功能需要系统级规划。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 你知道 Redux 真正的作用远不止状态管理吗? 你是否想要了解 Redux 的工作原理? 让我们深入研究 ...
摘要:归约器函数负责返回应用当前全局状态的表示形式。当我们在存储上发送操作时将使用应用的当前状态和导致状态更新的操作来调用此归约器函数。回到我们的归约器我们可以检查的动作类型并采取适当的步骤创建下一个状态。我们将处理动作创造者中归约器的副作用。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3811原文:https://www.ful...
摘要:应用中唯一的状态应用的子组件例子方法来看下函数到底是如何将和组件联系在一起的,注意到文档中有这样的一句话并不会改变它连接的组件,而是提供一个经过包裹的组件。 关于React-redux Redux是React全家桶的重要一员,之前在知乎上也看到类似的提问:该如何通俗易懂的理解Redux? Redux是JavaScript的状态容器,Redux的概念简单明了: 1. 应用中所有的状...
摘要:使用该对象,可以跟踪属于组件的各种元数据位。调用你的组件这意味着它知道存储的元数据对象。下一次渲染会发生什么需要重新渲染组件由于之前已经看过这个组件,它已经有了元数据关联。 为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能...
阅读 3529·2021-11-22 11:59
阅读 945·2021-09-27 13:36
阅读 3603·2021-09-24 09:47
阅读 2251·2021-09-01 11:39
阅读 970·2021-08-31 09:37
阅读 2304·2021-08-05 10:01
阅读 1665·2019-08-30 15:55
阅读 693·2019-08-30 15:54