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

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

文章后面说:

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

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


当前回答

简单的解释是: STATE是组件的局部状态,例如color = "blue"或animation=true等。用这个。setState更改组件的状态。 PROPS是组件如何相互通信(将数据从父组件发送给子组件)以及如何使组件可重用。

其他回答

简而言之。

道具值不能改变[不可变] 使用setState方法[mutable]可以改变状态值

给出最简单的解释,补充上述评论:

根据React的官方文档,他们将“状态”视为

To “remember” things, components use state.

props可以理解为从父组件传递给子组件的变量。

如果你想在应用中记住一些东西,你会使用状态如果你想传递数据,你会使用道具。

让我给你另一个类比,假设你想把你脑子里的前25个自然数的序列相加。

1+2+3+4.....

从1开始,然后加2,现在是3,然后加到现在的总数(6),然后加4到现在的总数(6),所以新的总数是10。

当前的总和是程序的状态,假设您需要找到总和的平均值。你要把这个和代入一个方程,然后把这个和作为道具传下去。

希望这能说得通。

道具和状态是相关的。一个组件的状态通常会成为子组件的道具。道具在父元素的呈现方法中作为React.createElement()的第二个参数传递给子元素,如果您使用的是JSX,则是更熟悉的标记属性。

<MyChild name={this.state.childsName} />

父类的childsName的状态值变成子类的this.props.name。从子进程的角度来看,名称道具是不可变的。如果它需要改变,父进程只需要改变它的内部状态:

this.setState({ childsName: 'New name' });

React会把它传播给你的子程序。一个自然的后续问题是:如果子程序需要更改其名称道具怎么办?这通常是通过子事件和父回调完成的。子进程可能会公开一个名为onNameChanged的事件。然后父进程通过传递回调处理程序来订阅事件。

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

子进程将通过调用this.props将其请求的新名称作为参数传递给事件回调。onNameChanged('New name'),父进程将在事件处理程序中使用该名称来更新其状态。

handleName: function(newName) {
   this.setState({ childsName: newName });
}

这是我在使用react时学到的。

组件使用Props从外部环境中获取数据,例如另一个组件(纯组件、函数组件或类)或一般类或javascript/typescript代码 用于管理组件内部环境的状态意味着组件内部的数据变化

状态:

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

道具:

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

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