Javascript ReactJs：如何在渲染组件时传递初始状态？

ReactJs: How to pass the initial state while rendering a component?

提问by André Pena

I know I can pass propswhile rendering a component. I'm also aware of the getInitialStatemethod. But the problem is, getInitialStateisn't quite helping because my component doesn't know it's initial state. I do. So I want to pass it while I'm rendering it.

我知道我可以props在渲染组件时通过。我也知道getInitialState方法。但问题是，getInitialState不是很有帮助，因为我的组件不知道它的初始状态。我愿意。所以我想在渲染它时传递它。

Something like this (pseudo-code):

像这样（伪代码）：

React.render(<Component initialState={...} />);

I know I could use a propto work as the initial state but this smells like an anti-pattern.

我知道我可以使用 aprop作为初始状态，但这闻起来像是一种反模式。

What should I do?

我该怎么办？

EDIT FOR CLARITY

编辑清晰

Imagine I have a CommentListcomponent. By the time I first render it, the initial state corresponds to the snapshot of current comments from my database. As the user includes comments, this list will change, and that's why it should be a stateand not props. Now, in order to render the initial snapshot of comments I should pass it to the CommentsListcomponent, because it has no way to know it. My confusion is that the only way I see to pass this information is through a propswhich seems to be an anti-pattern.

想象一下我有一个CommentList组件。当我第一次渲染它时，初始状态对应于我数据库中当前评论的快照。当用户包含评论时，这个列表会改变，这就是为什么它应该是 astate而不是props。现在，为了呈现评论的初始快照，我应该将它传递给CommentsList组件，因为它无法知道它。我的困惑是，我看到传递这些信息的唯一方法是通过props似乎是反模式的。

采纳答案by tebayoso

Disclaimer: Newer versions of React handle this on a different way.

免责声明：较新版本的 React 以不同的方式处理这个问题。

Only permanent components might be able to use props in the getInitialState. Props in getInitialStateis an anti-pattern if synchronization is your goal. getInitialStateis only called when the component is first created so it may raise some bugs because the source of truth is not unique. Check this answer.

只有永久组件才能在getInitialState. getInitialState如果同步是您的目标，则Props in是一种反模式。getInitialState仅在首次创建组件时调用，因此可能会引发一些错误，因为事实来源不是唯一的。检查这个答案。

Quoting documentation:

引用文档：

Using props, passed down from parent, to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble

使用从父级传递下来的道具在 getInitialState 中生成状态通常会导致“真实数据来源”的重复，即真实数据所在的位置。只要有可能，即时计算值以确保它们以后不会不同步并导致维护麻烦

You can still do:

你仍然可以这样做：

getInitialState: function() {
   return {foo: this.props.foo}
}

As they will be the default props for your app. But as long as you are using a prop to set a value that presumably won't change, you can use the same prop inside of the renderfunction.

因为它们将成为您的应用程序的默认道具。但是只要您使用 prop 设置一个可能不会更改的值，您就可以在render函数内部使用相同的 prop 。

<span>{this.props.foo}</span>

This props won't be modified, so no problem using it each time the renderis called.

这个道具不会被修改，所以每次render被调用时使用它都没有问题。

Edited answer:

编辑答案：

In this case your initial state should not be a prop, should be an ajax call which populates the comment list.

在这种情况下，您的初始状态不应该是道具，而应该是填充评论列表的 ajax 调用。

回答by David Leppik

To quote the React docs:

引用React 文档：

Using props, passed down from parent, to generate state in getInitialStateoften leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble

使用从父级传下来的道具来生成状态getInitialState通常会导致“真实数据来源”的重复，即真实数据在哪里。只要有可能，即时计算值以确保它们以后不会失去同步并导致维护麻烦

And:

和：

However, it's notan anti-pattern if you make it clear that synchronization's not the goal here

但是，如果您明确表示同步不是这里的目标，那么这不是反模式

So if your props include a valueand an initialValue, then it's clear that the latter is for initialization, and there's no confusion.

所以如果你的 props 包含 avalue和 an initialValue，那么很明显后者是用于初始化的，没有混淆。

See the React docsfor code examples.

有关代码示例，请参阅React 文档。

回答by Matt

If you know the state then I would tend to argue that the component you are rendering is not really in control of it. The idea in React is that any particular piece of state lives in only a single location.

如果您知道状态，那么我倾向于争辩说您正在渲染的组件并没有真正控制它。React 中的想法是任何特定的状态都只存在于一个位置。

回答by André Pena

After seeing the other answers, and studying a little bit about it, I've come to this conclusion:

在看到其他答案并对其进行了一些研究后，我得出了这个结论：

If you are rendering React in the client (compiled or not), which is the default approach, you should try to make an extra Ajax call from inside your component to get the initial state. That is, don't use props. It's cleaner and less error prone.

如果您在客户端渲染 React（编译或未编译），这是默认方法，您应该尝试从组件内部进行额外的 Ajax 调用以获取初始状态。也就是说，不要使用props. 它更干净，更不容易出错。

However, if you are rendering in the server (Node.js or ReactJs.NET), there's no reason to make this extra Ajax call for each request.. Besides, it's not SEO friendly. You want the complete page to come as the result of your request (including data). So, as @RandyMorris pointed out, in this case it's ok to use props as the initial state, as long as it's exclusively the initial state. That is, no synchronization.

但是，如果您在服务器（Node.js 或 ReactJs.NET）中进行渲染，则没有理由为每个请求进行这个额外的 Ajax 调用。此外，它对 SEO 不友好。您希望完整的页面作为您的请求（包括数据）的结果出现。所以，正如@RandyMorris 指出的那样，在这种情况下，可以使用 props 作为初始状态，只要它是初始状态即可。也就是说，没有同步。