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

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

文章后面说:

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

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


当前回答

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

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

其他回答

“Props”是传递给组件(1)的外部输入,“state”是由组件(2)管理的内部私有数据。

道具和状态是相关的。一个组件的状态通常会成为子组件的道具。道具在父元素的呈现方法中作为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 });
}

用户在应用程序的某个地方输入了一些数据。

在其中输入数据的组件应该在其状态中拥有该数据,因为它需要在数据输入期间操作和更改它 在应用程序的其他任何地方,数据都应该作为道具传递给所有其他组件

所以,是的,道具是在变化的,但它们是从“源头”改变的,然后简单地从那里向下流动。所以道具在接收它们的组件的上下文中是不可变的。

例如,在一个参考数据屏幕上,用户编辑一个供应商列表将在状态下管理它,然后会有一个操作,导致更新的数据保存在ReferenceDataState中,它可能比AppState低一级,然后这个供应商列表将作为道具传递给所有需要使用它的组件。

道具是在渲染时传递给组件的值、对象或数组。这些道具通常是组件中创建UI、设置某些默认功能或填充字段所需的值。道具也可以以父组件传递给子组件的函数的形式出现。

状态在组件(子组件或父组件)中进行管理。

下面是我找到的一个支持这一点的定义:

State:具有内部值,这意味着只在该类组件中有效,因此不能将其传递给另一个组件。

道具:另一方面,你可以将道具从父对象传递给子对象或从子对象传递给父对象。