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

Question

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

类似这样的东西（伪代码）：

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

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

我该怎么办？

为清晰起见编辑

假设我有一个 CommentList 组件。当我第一次渲染它时，初始状态对应于我数据库中当前评论的快照。当用户添加评论时，此列表将发生变化，这就是为什么它应该是 state 而不是 props 的原因。现在，为了呈现评论的初始快照，我应该将它传递给 CommentsList 组件，因为它无法知道它。我的困惑是，我看到传递此信息的唯一方法是通过 props，这似乎是一种反模式。

Answer 1

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

只有永久组件可以使用 getInitialState 中的道具。如果同步是您的目标，getInitialState 中的道具是一种反模式。 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: function() {
   return {foo: this.props.foo}
}

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

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

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

编辑后的答案：

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

Answer 2

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

Answer 3

看了其他答案，稍微研究了一下，得出这样的结论：

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

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

Answer 4

引用the React docs:

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

并且：

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

所以如果你的props包含了一个value和一个initialValue，那么很明显后者是用来初始化的，不会混淆。

有关代码示例，请参阅 the React docs。

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

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

javascript

reactjs

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