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

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

文章后面说:

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

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


当前回答

道具只是属性的简写。道具是组件之间相互交流的方式。如果你熟悉React,那么你应该知道道具是从父组件向下流动的。

还有一种情况是,你可以有默认的道具,这样即使父组件没有传递道具,道具也会被设置。

这就是为什么人们认为React具有单向数据流。这需要一些理解,我可能会在后面的博客中对此进行讨论,但现在只要记住:数据从父流向子。道具是不可变的(是指不变的)

所以我们很高兴。组件从父组件接收数据。都整理好了,对吧?

嗯,不完全是。当组件从父组件以外的对象接收数据时会发生什么?如果用户直接向组件输入数据呢?

这就是我们有状态的原因。

状态

道具不应该改变,所以状态上升。组件通常没有状态,因此被称为无状态。使用状态的组件称为有状态的。在聚会上随便说说你的小秘密,然后看着人们慢慢地离你而去。

所以使用状态是为了让组件可以在它所做的任何渲染之间跟踪信息。当你setState时,它更新状态对象,然后重新渲染组件。这非常酷,因为这意味着React会处理困难的工作,并且速度非常快。

作为状态的一个小例子,这里是一个搜索栏的片段(如果你想了解更多关于React的知识,值得看看这门课程)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

总结

道具和状态的作用类似,但使用方式不同。大多数组件可能是无状态的。

道具用于将数据从父组件传递给子组件或由组件本身传递。它们是不可变的,因此不会被改变。

State用于可变数据或将更改的数据。这对于用户输入特别有用。以搜索栏为例。用户将输入数据,这将更新他们所看到的内容。

其他回答

react中“state”和“props”的区别。

React根据状态控制和渲染DOM。有两种类型的组件状态:props是组件之间传输的状态,state是组件的内部状态。Props用于将数据从父组件传输到子组件。组件在内部也有自己的状态:只能在组件内部修改的状态。

一般来说,某个组件的状态可以是子组件的道具,道具会传递给子组件,这是在父组件的呈现方法中声明的

props是JavaScript对象,传递给组件,保存配置属性。 props是接收组件不可更改的 state是在Component中管理的JavaScript对象,保存它的内部状态。 更新可以触发重新渲染

简而言之。

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

在回答最初关于道具不可变的问题时,我们说它们在子组件中是不可变的,但在父组件中是可以改变的。

道具——你不能改变它的值。 States—您可以在代码中更改它的值,但当呈现发生时它将是活动的。