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

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

本文关键字：组件 初始状态 ReactJs      更新时间：2023-09-26

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

像这样的东西（伪代码）：

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

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

我该怎么办？

为清楚起见，请进行编辑

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

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

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

引用文档：

使用从父级传下来的 props 生成状态 getInitialState通常会导致"事实来源"的重复，即 真实数据在哪里。尽可能动态计算值 以确保它们以后不会不同步并导致 维护故障

您仍然可以执行以下操作：

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

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

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

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

编辑答案：

在这种情况下，您的初始状态不应该是一个 prop，而应该是一个填充注释列表的 ajax 调用。

引用 React 文档：

使用从父级传下来的 props 来生成getInitialState状态通常会导致"事实来源"的重复，即真实数据在哪里。尽可能动态计算值，以确保它们以后不会不同步并导致维护问题

和：

但是，如果您明确表示同步不是此处的目标，则不是反模式

所以如果你的道具包括一个value和一个initialValue，那么很明显后者是用于初始化的，没有混淆。

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

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

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

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

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

相关文章：