2016 年更新： React 变了，“props vs state”的解释变得非常简单。如果组件需要更改数据 - 将其置于 state 中，否则置于 props 中。因为props现在是只读的。

props 和 state 之间的确切区别是什么？

你可以在这里找到很好的解释（完整版）

你的第二种方法更像它。React 并不关心模型，因为它关心值以及它们如何在您的应用程序中流动。理想情况下，您的后期模型将存储在根的单个组件中。然后创建每个使用模型部分的子组件。

您可以将回调传递给需要修改数据的子组件，并从子组件调用它们。

直接修改 this.props 或 this.state 不是一个好主意，因为 React 将无法接受更改。那是因为 React 对您的 post prop 进行了浅层比较，以确定它是否已更改。

我制作了这个jsfiddle来展示数据如何从外部组件流到内部组件。

该handleClick方法显示了 3 种（im）正确更新状态的方法：

var Outer = React.createClass({

  getInitialState: function() {
    return {data: {value: 'at first, it works'}};
  },

  handleClick: function () {

    // 1. This doesn't work, render is not triggered.
    // Never set state directly because the updated values
    // can still be read, which can lead to unexpected behavior.

    this.state.data.value = 'but React will never know!';

    // 2. This works, because we use setState

    var newData = {value: 'it works 2'};
    this.setState({data: newData});

    // 3. Alternatively you can use React's immutability helpers
    // to update more complex models.
    // Read more: http://facebook.github.io/react/docs/update.html

    var newState = React.addons.update(this.state, {
      data: {value: {$set: 'it works'}}
    });
    this.setState(newState);
 },

  render: function() {
      return <Inner data={this.state.data} handleClick={this.handleClick} />;
  }
});

来自 React 文档

props 是不可变的：它们从父级传递过来并且由父级“拥有”。为了实现交互，我们向组件引入了可变状态。this.state 是组件私有的，可以通过调用 this.setState() 进行更改。当状态更新时，组件重新渲染自身。

来自TrySpace：当 props（或 state）更新（通过 setProps/setState 或 parent）时，组件也会重新渲染。

阅读Thinking in React：

让我们逐一分析并找出哪个是状态。只需对每条数据提出三个问题：

1. 它是通过 props 从父级传入的吗？如果是这样，它可能不是状态。

2. 它会随着时间而改变吗？如果没有，它可能不是状态。

3. 您可以根据组件中的任何其他状态或props计算它吗？如果是这样，它不是状态。