在哪里保存React Component数据：状态，存储，静态以及此

by Sam Corcos

由Sam Corcos

在哪里保存React Component数据：状态，存储，静态以及此 (Where to Hold React Component Data: state, store, static, and this)

With the advent of React and Redux, a common question has emerged:

随着React和Redux的出现，一个常见的问题出现了：

What should I hold in the Redux store, and what should I save in local state?

我应该在Redux 存储中保存什么，应该在本地状态保存什么？

But this question is actually too simplistic, because there are also two other ways you can store data for use in a component: static and this.

但是这个问题实际上太简单了，因为还有其他两种方法可以存储要在组件中使用的数据： static和this 。

Let’s go over what each of these, and when you should use them.

让我们研究一下这些内容以及何时使用它们。

当地状态 (Local state)

When React was first introduced, we were presented with local state. The important thing to know about local state is that when a state value changes, it triggers a re-render.

首次引入React时，我们看到的是本地状态 。 有关本地状态的重要信息是，当状态值更改时，它将触发重新渲染。

This state can be passed down to children as props, which allows you to separate your components between smart data-components and dumb presentational-components if you chose.

可以将这种状态作为props传递给子级，这使您可以根据需要在智能数据组件和哑表述组件之间分离组件。

Here’s a basic counter app using local state:

这是一个使用本地状态的基本计数器应用程序：

Your data (the value of the counter) is stored within the App component, and can be passed down its children.

您的数据(计数器的值)存储在App组件中，并且可以向下传递给它的子组件。

用例 (Use cases)

Assuming your counter is important to your app, and is storing data that would be useful to other components, you would not want to use local state to keep this value.

假设计数器对您的应用程序很重要，并且正在存储对其他组件有用的数据，则您不想使用本地状态来保持此值。

The current best practice is to use local state to handle the state of your user interface (UI) state rather than data. For example, using a controlled component to fill out a form is a perfectly valid use of local state.

目前最好的做法是使用本地状态来处理用户界面(UI)的状态，而不是数据的状态。 例如，使用受控组件填写表单是对local state的完全有效使用。

Another example of UI data that you could store in local state would be the currently selected tab from a list of options.

您可以以本地状态存储的UI数据的另一个示例是从选项列表中当前选择的选项卡。

A good way to think about when to use local state is to consider whether the value you’re storing will be used by another component. If a value is specific to only a single component (or perhaps a single child of that component), then it’s safe to keep that value in local state.

考虑何时使用局部状态的一个好方法是考虑存储的值是否会被另一个组件使用。 如果某个值仅特定于单个组件(或者该组件的单个子组件)，则可以将该值保持在本地状态是安全的。

Takeaway: keep UI state and transitory data (such as form inputs) in local state.

总结：将UI状态和临时数据(例如表单输入)保持在本地状态 。

Redux商店 (Redux store)

Then after some time had elapsed and everyone started getting comfortable with the idea of unidirectional data flow, we got Redux.

然后经过一段时间，每个人都开始对单向数据流的想法感到满意，我们得到了Redux。

With Redux, we get a global store. This store lives at the highest level of your app and passes data down to all children. You connect to the global store with the connect wrapper and a mapStateToProps function.

借助Redux，我们获得了一家全球商店 。 该存储区位于应用程序的最高级别，并将数据向下传递给所有子级。 您可以使用连接包装器和mapStateToProps函数连接到全局存储 。

At first, people put everything in the Redux store. Users, modals, forms, sockets… you name it.

最初，人们将所有东西都放在Redux 商店中 。 用户，模态，表单，套接字……您为它命名。

Below is the same counter app, but using Redux. The important thing to note is that counter now comes from this.props.counter after being mapped from mapStateToProps in the connect function, which takes the counter value from the global store and maps it to the current component’s props.

以下是相同的计数器应用程序，但使用Redux。 需要注意的重要一点是，现在柜台从mapStateToProps被映射在连接功能，从全局存储需要计数器的值，并将其映射到当前组件的道具后，来自this.props.counter。

Now when you click on the button, an action is dispatched and the global store is updated. The data is handled outside of our local component and is passed down.

现在，当您单击该按钮时，将分派一个动作并更新全局存储 。 数据在我们本地组件的外部进行处理并向下传递。

It’s worth noting that when props are updated, it also triggers a re-render—just like when you update state.

值得注意的是，更新道具时，它也会触发重新渲染，就像更新state一样 。

用例 (Use cases)

The Redux store is great for keeping application state rather than UI state. A perfect example is a user’s login status. Many of your components will need access to this information, and as soon as the login status changes, all of those components (the ones that are rendered, at least) will need to be re-rendered with the updated information.

Redux 存储非常适合保留应用程序状态而不是UI状态。 一个完美的例子是用户的登录状态。 您的许多组件将需要访问此信息，并且登录状态更改后，所有这些组件(至少是已渲染的组件)都需要使用更新后的信息重新渲染。

Redux is also useful for triggering events for which you need access on multiple components or across multiple routes. An example of this would be a login modal, which can be triggered by a multitude of buttons all across your app. Rather than conditionally rendering a modal in a dozen places, you can conditionally render it at the top-level of your app and use a Redux action to trigger it by changing a value in the store.

Redux在触发事件时也很有用，您需要在多个组件或多个路由上访问这些事件。 一个示例就是登录模式，该模式可以由整个应用程序中的多个按钮触发。 您可以在应用程序的顶层有条件地渲染模态，而不必在十几个地方有条件地渲染模态，并使用Redux操作通过更改store中的值来触发它。

Takeaway: keep data that you intend to share across components in store.

要点 ：保存要在商店中的各个组件之间共享的数据。

这个<东西> (this.<something>)

One of the least utilized features when working with React is this. People often forget that React is just JavaScript with ES2015 syntax. Anything you can do in JavaScript, you can also do in React.

一项所述的利用至少特征与之React工作时是这样的。 人们常常会忘记，React只是具有ES2015语法JavaScript。 您可以在JavaScript中进行的任何操作，也可以在React中进行的操作。

The example below is a functional counter app, similar to the two examples above.

下面的示例是一个功能计数器应用程序，类似于上面的两个示例。

We’re storing the counter value in the component and using forceUpdate() to re-render when the value changes. This is because changes to anything other than state and props does not trigger a re-render.

我们将计数器值存储在组件中，并在值更改时使用forceUpdate()重新呈现。 这是因为更改除了state和props之外的任何内容都不会触发重新渲染 。

This is actually an example of how you should not use this. If you find yourself using forceUpdate(), you’re probably doing something wrong. For values for which a change should trigger a re-render, you should use local state or props/Redux store.

这实际上是不应该使用this的示例。 如果发现自己使用forceUpdate() ，则可能是您做错了什么。 对于更改应触发重新渲染的值，应使用local state或props / Redux store 。

用例 (Use cases)

The use case for this is to store values for which a change should not trigger a re-render. For example, sockets are a perfect thing to store on this.

用例为这是存储其中的变化不应该触发重新呈现值。 例如，将套接字存储在this上是一件完美的事情。

Also, many people don’t realize they’re already using this all the time in their function definitions. When you define render(), you’re really defining this.prototype.render = function(), but it’s hidden behind ES2015 class syntax.

同样，许多人没有意识到他们一直在函数定义中一直在使用它 。 定义render()时 ，实际上是在定义this.prototype.render = function() ，但是它隐藏在ES2015类语法的后面。

Takeaway: use this to store things that shouldn’t trigger a re-render.

总结：使用它来存储不应触发重新渲染的内容。

静态的 (Static)

Static methods and properties are perhaps the least known aspect of ES2015 classes (calm down, yes, I know they aren’t really classes under the hood), mostly because they aren’t used all that frequently. But they actually aren’t especially complicated. If you’ve used PropTypes, you’ve already defined a static property.

静态方法和属性可能是ES2015类中鲜为人知的方面(冷静点，是的，我知道它们并不是真正的内幕类) ，主要是因为它们并不是经常使用。 但是它们实际上并不特别复杂。 如果您使用过PropTypes ，那么您已经定义了一个静态属性。

The following two code blocks are identical. The first is how most people define PropTypes. The second is how you can define them with static.

以下两个代码块是相同的。 第一个是大多数人如何定义PropType。 第二个是如何使用static定义它们。

As you can see, static is not all that complicated. It’s just another way to assign a value to a class. The main difference between static and this is that you do not need to instantiate the class to access the value.

如您所见， 静态并没有那么复杂。 这是为类分配值的另一种方法。 静态和这个之间的主要区别是，你不需要类实例访问的价值。

In the example above, you can see that to get the staticProperty value, we could just call it straight from the class without instantiating it, but to get prototypeProperty, we had to instantiate it with new App().

在上面的示例中，您可以看到要获取staticProperty值，我们可以直接从类中调用它而无需实例化它，但是要获取prototypeProperty ，我们必须使用new App()实例化它。

用例 (Use cases)

Static methods and properties are rarely used, and should be used for utility functions that all components of a particular type would need.

静态方法和属性很少使用，应该用于特定类型的所有组件都需要的实用程序功能。

PropTypes are an example of a utility function where you would attach to something like a Button component, since every button you render will need those same values.

PropTypes是实用程序函数的示例，您可以在其中附加到诸如Button组件之类的东西，因为渲染的每个按钮都需要相同的值。

Another use case is if you’re concerned about over-fetching data. If you’re using GraphQL or Falcor, you can specify which data you want back from your server. This way you don’t end up receiving a lot more data than you actually need for your component.

另一个用例是如果您担心数据过度获取。 如果使用的是GraphQL或Falcor，则可以指定要从服务器返回的数据。 这样，您最终不会收到比组件实际所需的数据更多的数据。

So in the example component above, before requesting the data for a particular component, you could quickly get an array of required values for your query with App.requiredData. This allows you to make a request without over-fetching.

因此，在上面的示例组件中，在请求特定组件的数据之前，您可以使用App.requiredData快速获取查询所需的数组。 这使您可以进行请求而不会过度获取。

Takeaway: you’re probably never going to use static.

总结：您可能永远不会使用static 。

另一个选择 (That other option…)

There is actually another option, which I intentionally left out of the title because you should use it sparingly: you can store things in a module-scoped variable.

实际上，还有另一个选择，我故意将其排除在标题之外，因为您应该谨慎使用它：您可以将内容存储在模块作用域的变量中 。

There are specific situations in which it makes sense, but for the most part you just shouldn’t do it.

在特定情况下，这是有道理的，但是在大多数情况下，您不应该这样做。

You can see this is almost the same as using this, except that we’re storing the value outside of our component, which could cause problems if you have more than one component per file. You might want to use this for setting default values if the values are not tied to your store, otherwise using a static for default props would be better.

您可以看到它与使用它几乎相同，除了我们将值存储在组件之外，如果每个文件中有多个组件，则可能导致问题。 如果值未绑定到商店 ，则可能要使用它来设置默认值，否则将static用于默认属性会更好。

If you need to share data across components and want to keep data available to everything the module, it’s almost always better to use your Redux store.

如果您需要在各个组件之间共享数据，并希望保持数据可用于模块的所有内容，那么使用Redux 存储几乎总是更好的选择。

Takeaway: don’t use module-scoped variables if you can avoid it.

要点：如果可以避免，请勿使用模块范围的变量。

Sam Corcos is the lead developer and co-founder of Sightline Maps, the most intuitive platform for 3D printing topographical maps, as well as LearnPhoenix.io, an intermediate-advanced tutorial site for building scalable production apps with Phoenix and React. Get $20 off of LearnPhoenix with the coupon code: free_code_camp

Sam Corcos是Sightline Maps (用于3D打印地形图的最直观的平台)以及LearnPhoenix.io (用于使用Phoenix和React构建可扩展的生产应用程序的中级高级教程网站)的首席开发人员和共同创始人。 使用优惠码： free_code_camp可获得LearnPhoenix减$ 20

翻译自: https://www.freecodecamp.org/news/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00/