Question

我正在研究反应的原则。

根据一些评论，有些人说最好保持你的组件无状态，这是什么意思？

但是其他人说，如果你需要更新你的组件，那么你应该学习如何将你的状态设置为正确的状态。

我看到了this.props / this.setProps和this.state / this.setState，我对此感到困惑。

我想弄清楚的是，如何更新组件本身而不是父组件？我应该在这种情况下使用道具或陈述吗？

我已经阅读过一些关于道具和状态的文档，我不清楚的是：何时使用其中一种？

Answer 1

Props vs. state归结为“谁拥有这些数据？”

如果数据由一个组件管理，但另一个组件需要访问该数据，则您可以通过props将数据从一个组件传递到另一个组件。

如果组件管理数据本身，它应该使用州和setState来管理它。

答案

如何更新组件本身而不是父组件？我应该在这种情况下使用道具或陈述吗？

是使用州。

道具应该被认为是不可改变的，并且应该通过突变永远不会被改变。 setProps仅适用于顶级组件，通常不应使用。如果一个组件通过另一个组件属性，并且第一个组件希望第二个组件能够更改它，它应该还向它传递一个函数属性，第二个组件可以调用它来询问第一个组件更新其状态。例如：

var ComponentA = React.createClass({
  getInitialState: function() {
    return { count: 0 };
  },

  render: function() {
    return <Clicker count={this.state.count} incrementCount={this.increment} />;
  },

  increment: function() {
    this.setState({count: this.state.count + 1});
  }
});

// Notice that Clicker is stateless! It's only job is to
// (1) render its `count` prop, and (2) call its
// `incrementCount` prop when the button is clicked.
var Clicker = React.createClass({
  render: function() {
    // clicker knows nothing about *how* to update the count
    // only that it got passed a function that will do it for it
    return (
      <div>
        Count: {this.props.count}
        <button onClick={this.props.incrementCount}>+1</button>
      </div>
    );
  }
});

（工作示例：https://jsbin.com/rakate/edit?html,js,output）

对于面向对象的编程类比，想一个类/对象： state 将是你放在类中的属性;该课程可以根据自己的需要自由更新。道具就像方法的参数;你永远不应该改变传递给你的论据。

保持组件“无状态”意味着它没有任何状态，并且它的所有渲染都基于它的道具。当然，必须有状态某处，否则你的应用程序将不会做任何事情！因此，本指南基本上是指保持尽可能多的组件无状态，并且只在尽可能少的顶层组件中管理状态。

保持组件无状态使其更易于理解，重用和测试。

有关详细信息，请参阅React文档中的A brief interlude: props vs state。

Answer 2

当您知道变量值将影响视图时使用state。这在反应中尤其重要，因为每当状态变量发生变化时，都会有一个重新渲染（尽管这是使用虚拟DOM优化的，如果可以的话，你应该最小化它），~~但不是当一个道具被改变时（你可以强迫）这个，但不是真的需要。）~~

您可以使用props来保存所有其他变量，您认为这些变量可以在组件创建期间传递到组件中。

如果您想要创建一个名为MyDropdown的多选下拉列表，例如

state = {
    show: true,
    selected:[],
    suggestions:this.props.suggestionArr.filter((i)=>{
        return this.state.suggestions.indexOf(i)<0;
    })
}

props={
   eventNamespace:'mydropdown',
   prefix : 'm_',
   suggestionArr:[],
   onItemSelect:aCallbackFn
}

如您所见，状态变量中的对象将以某种方式影响视图。道具中的对象主要是在整个组件生命周期中应保持相同的对象。因此，这些对象可以是回调函数，用于命名空间事件的字符串或其他持有者。

因此，如果您确实希望自行更新组件，则需要了解componentWillRecieveProps，componentWillUpdate，componentDidUpdate和componentShouldUpdate的工作原理。或多或少，这取决于需求，您可以使用这些生命周期方法来确保呈现在组件内而不在父组件中。

何时使用状态和道具？

2 个答案: