我在看Pluralsight关于React的课程,老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide),它说
道具和状态更改都会触发呈现更新。
文章后面说:
Props(属性的缩写)是组件的配置,如果可以的话,是它的选项。它们是从上面接收的,是不可变的。
所以道具可以改变,但它们应该是不可变的?
什么时候应该使用道具,什么时候应该使用状态?
如果你有一个React组件需要的数据,它应该通过道具或设置在React组件通过getInitialState?
props (properties的缩写)和state都是简单的JavaScript
对象。而两者都持有影响输出的信息
渲染,他们在一个重要的方面是不同的:道具被传递到
组件(类似于函数参数),而状态为
在组件中管理(类似于在组件中声明的变量
功能)。
所以简单的状态仅限于你当前的组件,但道具可以传递给任何组件你希望…你可以将当前组件的状态作为道具传递给其他组件……
同样在React中,我们有无状态的组件,它们只有道具,没有内部状态……
下面的例子展示了它们如何在你的应用程序中工作:
父组件(全状态组件):
class SuperClock extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
}
render() {
return (
<div>
<Clock name={this.state.name} date={this.state.date} />
</div>
);
}
}
子组件(无状态组件):
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
状态是react处理组件所持有信息的方式。
假设有一个组件需要从服务器获取一些数据。您通常希望通知用户请求是否正在处理,请求是否失败,等等。这是一条与特定组件相关的信息。这就是状态进入游戏的地方。
通常定义状态的最佳方法如下:
class MyComponent extends React.Component {
constructor() {
super();
this.state = { key1: value1, key2: value2 }
}
}
但是在react native的最新实现中,你可以这样做:
class MyComponent extends React.Component {
state = { key1: value1, key2: value2 }
}
这两个例子以完全相同的方式执行,这只是语法上的改进。
那么,与我们在面向对象编程中总是使用对象属性有什么不同呢?通常,在您的状态中保存的信息并不是静态的,它会随着时间的推移而变化,您的视图需要更新以反映这些变化。State以一种简单的方式提供了此功能。
状态是不可改变的!我再怎么强调也不为过。这意味着什么?这意味着你永远不应该做这样的事情。
state.key2 = newValue;
正确的做法是:
this.setState({ key2: newValue });
使用这个。setState你的组件在更新周期中运行,如果状态的任何部分发生变化,你的组件呈现方法将被再次调用以反映这些变化。
请查看react文档以获得更详细的解释:
https://facebook.github.io/react/docs/state-and-lifecycle.html