在反应中放置道具答案

【问题标题】：Putting props to state in react在反应中放置道具
【发布时间】：2017-09-11 10:23:42
【问题描述】：

我在当前项目中使用 react-redux，在寻找反应智慧的过程中，我遇到了一个我不理解的“约定”。其他程序员倾向于在构造函数中放置一个道具来说明正确的状态。这是为什么？我从未在官方文档中看到过它，从那里我了解到这两者是保存和共享数据的两种不同的东西。它有什么用还是mybe只是个人喜好？

谢谢。

【问题讨论】：

你是指哪个构造函数？在 redux 中，您无需更改类的构造函数。您使用connect，这使得任何组件都能够与商店进行交互。在那里您提供了一个mapStateToProps 函数，您可以在其中定义商店的哪些部分在您的组件中使用。这可能是您所指的吗？
这实际上不是关于我的构造，而是来自使用它的教程或堆栈问题的示例代码。这些 sn-ps 可能没有使用 redux。
只是因为我偶然发现了这种情况：我在我的 redux 项目中使用构造函数从查询中读取信息并将它们放到我的存储中。

标签： reactjs react-redux

【解决方案1】：

这听起来像是一种模式，当您需要来自组件外部的一些初始值，但又想忽略或不立即影响外部（通过例如在每次值更改时调度 Redux 操作）。

例如，也许您有一个表单，应该预先填充一些组件从外部（Redux 状态）通过mapStateToProps 或类似的值获取的值。您可以让每个表单字段 onChange 调度一个更改 Redux 状态的操作，导致传入的 props 更改，然后使用新值重新渲染表单。或者也许你觉得这太过分了。也许您对在用户实际提交表单之前将不断变化的表单数据保持在组件内部状态感到满意，并且只有在那时才会调度一个将发布表单数据、更改 Redux 状态并传递的操作新的道具（如成功状态）到表单组件。

【讨论】：

【解决方案2】：

是的，这是可能的，尤其是当您想通过不使用container components 或flux / redux store 来管理应用程序的状态来保持简单时。

组件可以管理自己的state，initialState 将被分配为从其parent component 传递的props。

考虑以下示例：

class TodoList extends React.Component {
  constructor(props) {
    // Assign todos property to state so that the TodoList component
    // can self-manage this value without interacting with outside components.
    this.setState({ todos: props.todos }); 
  }

  ...

  addTodo(todoDescription) {
    this.setState({ todos: this.state.todos.concat[todoDescription] });
  }
}

但是，当您的应用程序很复杂时，我仍然建议将view 组件和data manipulating 组件分开。

【讨论】：

您的回答是对 jonahe 的一个很好的补充。然而我接受了他的回答，因为它更清楚一点。谢谢你的回答！