我应该使用 props 还是 state 来存储 TreeView 数据？答案

【问题标题】：Should I use props or state to store TreeView data?我应该使用 props 还是 state 来存储 TreeView 数据？
【发布时间】：2014-12-24 11:48:24
【问题描述】：

我正在学习 react，我正在尝试创建一个 TreeView 组件。此 TreeView 可以接收数据本身（通过“数据”道具）或作为休息资源的 url。我在这里专注于最后一个选项。

组件首先以“加载”状态呈现，然后在 componentDidMount 上进行 ajax 调用。当数据从 REST 服务返回时，我只需将其分配给组件的 'props.data' 和 setState({loading:false}) 并正确呈现填充的树。

这里的一个问题是我正在从组件本身改变道具，这在反应中是一种反模式，但将数据添加到状态也感觉不对。我倾向于将状态视为与 UI 交互相关，并将其用于“折叠”或“选定”等内容更新父组件（包含 TreeView 的组件）时，treeView 'data' 属性会被重置（componentDidMount 不会被调用，因此它甚至不会再次被获取）并且组件会中断。使用“状态”可以解决此问题，因为它的值在父级重新渲染期间保持不变。

这里应该使用状态吗？有没有更好的模式呢？

除了从服务器检索数据之外，还存在更改树数据本身的问题（就像将树项移动到其他地方一样）现在我只是改变'props.data'中的项目并强制更新相关的内部组件。

我应该只在 TreeView 根组件中使用 state 和 setState 并让 react diff 整个事情再次发生变化吗？顺便说一句，这是一棵很大的树…… 我应该将树包装在将传递“数据”的其他数据组件中吗？

有人可以帮助找到构建此组件的最佳方法吗？谢谢，圣诞快乐:)

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以在父组件（包含TreeView）的componentDidMount 方法中调用您的Rest 服务，并将树数据设置为父组件状态。这样你就不会自己改变组件的 props 并且父组件更新不会重置 Treeview's 数据。（更好的做法是使用 Flux 存储来存储和获取数据，并通过控制器视图将这些数据传递给您的 TreeView。）

至于改变树数据本身，可以在父组件中定义回调函数，当数据改变时从TreeView调用这些函数。实际数据分配发生在父组件的回调函数中。这会导致父组件重新渲染，从而重新渲染TreeView。（另外一个更好的做法是在父组件中调用 Flux 操作来更改保存在存储中的数据，然后将其传播到视图。）

【讨论】：