Javascript 何时使用状态和道具？

我正在学习react的原理

根据一些评论，有人说最好保持组件无状态，这意味着什么

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

我看到了

this.props/this.setProps

和

this.state/this.setState

，对此我感到困惑

我想弄清楚的是，我如何能够单独更新组件而不是从父组件更新组件？在这种情况下，我应该使用道具还是状态

---

我已经阅读了一些关于道具和状态的文档，但我不清楚的是：何时使用一个或另一个？

当您知道变量值将影响视图时，请使用状态。这在react中尤其重要，因为每当状态变量发生变化时，都会有一个重新渲染器（尽管这是通过虚拟DOM优化的，但如果可以的话，应该将其最小化），而不是在道具发生变化时（可以强制执行此操作，但实际上并不需要）

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

例如，如果您想创建一个名为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
}

状态={
秀：没错，
选定：[]，
建议：this.props.suggestior.filter（（i）=>{
返回this.state.suggestions.indexOf（i）Props vs.state归结为“谁拥有这些数据？”

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

如果组件本身管理数据，则应使用state和
setState
对其进行管理

那么答案是什么呢

如何更新组件本身而不是父组件？在这种情况下，我应该使用道具还是状态

就是使用状态

Props应该被认为是不可变的，并且应该永远不会通过变异改变。
setProps
只在顶级组件上有用，通常不应该使用。如果一个组件将属性传递给另一个组件，而第一个组件希望第二个组件能够更改属性，那么它还应该将func传递给它属性，第二个组件可以调用该属性以请求第一个组件更新其状态。例如：

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>
    );
  }
});

var ComponentA=React.createClass({
getInitialState:函数（）{
返回{count:0}；
},
render:function（）{
返回；
},
增量：函数（）{
this.setState（{count:this.state.count+1}）；
}
});
//请注意，Clicker是无状态的！它唯一的任务是
//（1）呈现其'count'属性，以及（2）调用其
//单击按钮时的“incrementCount”属性。
var Clicker=React.createClass({
render:function（）{
//clicker对*如何*更新计数一无所知
//只是它被传递了一个函数，这个函数将为它做这件事
返回(
计数：{this.props.Count}
+1
);
}
});

（工作示例：）

对于和面向对象编程的类比，请考虑一个类/对象：状态是您在类上放置的属性；该类可以根据需要自由更新这些属性。道具类似于方法的参数；您永远不应该修改传递给您的参数


使组件保持“无状态”这意味着它没有任何状态，它的所有呈现都基于它的道具。当然，在某个地方必须有状态，否则你的应用程序不会做任何事情！所以这条原则基本上是说尽可能多的组件保持无状态，并且只在尽可能少的顶级组件中管理状态

保持组件无状态可以使它们更易于理解、重用和测试

有关详细信息，请参阅React文档中的。
这是不正确的。组件的状态或道具发生更改时将重新呈现。