React中的状态和道具有什么区别?

我在看Pluralsight关于React的课程，老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide)，它说

道具和状态更改都会触发呈现更新。

文章后面说:

Props(属性的缩写)是组件的配置，如果可以的话，是它的选项。它们是从上面接收的，是不可变的。

所以道具可以改变，但它们应该是不可变的? 什么时候应该使用道具，什么时候应该使用状态? 如果你有一个React组件需要的数据，它应该通过道具或设置在React组件通过getInitialState?

当前回答

Props: Props只是组件的属性，react组件只是一个javascript函数。

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

Const元素=;

这里<Welcome name="Sara" />传递一个对象{name: 'Sara'}作为Welcome组件的道具。为了将数据从一个父组件传递给子组件，我们使用props。道具是不可变的。在组件的生命周期中，道具不应该改变(认为它们是不可变的)。

状态:状态只能在组件中访问。为了跟踪组件中的数据，我们使用状态。我们可以通过setState来改变状态。如果我们需要将state传递给child，我们必须将它作为props传递。

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

2018-06-19 18:37:59

其他回答

Props:表示“只读”数据，是不可变的，引用父组件的属性。

状态:表示可变数据，它最终会影响页面上呈现的内容，并由组件本身内部管理，通常会由于用户输入而不断更改。

2019-02-15 20:58:52

道具和状态在某种程度上是相同的，它们都会触发重渲染。不同之处在于，道具来自于父组件，状态在当前组件中管理。状态是可变的，道具是不可变的

2020-09-09 18:18:04

状态:

状态是可变的。状态与单个组件相关联，不能被其他组件使用。在组件挂载时初始化状态。状态用于呈现组件内的动态更改。

道具:

道具是不可变的。您可以在组件之间传递道具。道具主要用于组件之间的通信。你可以直接从父母传递给孩子。用于从孩子传递给父母你需要使用提升状态的概念。

类Parent扩展React。组件{ 呈现() { 回报( < div > <孩子的名字= {"ron"}/> . < / div > ）; ｝｝子类扩展React。组件{ ｛呈现(){ 回报( < div > {this.props.name} < / div > ）; ｝｝