157 lines
4.9 KiB
Markdown
157 lines
4.9 KiB
Markdown
|
---
|
|||
|
|
title: React Props and State
|
|||
|
|
localeTitle: 反应道具和状态
|
|||
|
|
---
|
|||
|
|
## 道具与州
|
|||
|
|
|
|||
|
|
控制组件有两种类型的数据：props和state。道具由父项设置，它们在组件的整个生命周期内都是固定的。对于即将发生变化的数据，我们必须使用state。
|
|||
|
|
|
|||
|
|
### 道具
|
|||
|
|
|
|||
|
|
大多数组件在创建时可以使用不同的参数进行自定义。这些创建参数称为`props` 。
|
|||
|
|
|
|||
|
|
您自己的组件也可以使用道具。这使您可以创建在应用程序的许多不同位置使用的单个组件，每个位置的属性略有不同。请参阅render函数中的`this.props` ：
|
|||
|
|
```
|
|||
|
|
class Welcome extends React.Component {
|
|||
|
|
render() {
|
|||
|
|
return <h1>Hello {this.props.name}</h1>;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const element = <Welcome name="neel" />;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
行`<Welcome name="neel" />`创建一个值为`"neel"`的属性名称。
|
|||
|
|
|
|||
|
|
该属性被传递给组件，类似于将参数传递给函数的方式。事实上，我们甚至可以将组件重写为更简单：
|
|||
|
|
```
|
|||
|
|
function Welcome(props) {
|
|||
|
|
return <h1>Hello {props.name}</h1>;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
我们可以通过将defaultProps添加到Welcome类来使name属性可选：
|
|||
|
|
```
|
|||
|
|
class Welcome extends React.Component {
|
|||
|
|
render() {
|
|||
|
|
return <h1>Hello {this.props.name}</h1>;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Welcome.defaultProps = {
|
|||
|
|
name: "world",
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果在没有名称的情况下调用Welcome，它将只呈现`<h1> Hello world</h1>` 。
|
|||
|
|
|
|||
|
|
因此， `props`可以来自父级，也可以由组件本身设置。
|
|||
|
|
|
|||
|
|
您曾经能够使用setProps和replaceProps更改道具，但这些道具已被**弃用** 。在组件的生命周期中，props不应该更改（认为它们是不可变的）。
|
|||
|
|
|
|||
|
|
由于传递了props，并且它们无法更改，因此您可以将任何仅使用props（而不是state）的React组件视为“纯”，也就是说，它将始终在给定相同输入的情况下呈现相同的输出。这使得它们非常容易测试。
|
|||
|
|
|
|||
|
|
### 州
|
|||
|
|
|
|||
|
|
与`props`一样， `state`保存有关组件的信息。但是，这种信息及其处理方式是不同的。
|
|||
|
|
|
|||
|
|
默认情况下，组件没有状态。上面的`Welcome`组件是无状态的：
|
|||
|
|
```
|
|||
|
|
function Welcome(props) {
|
|||
|
|
return <h1>Hello {props.name}</h1>;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当组件需要跟踪渲染之间的信息时，组件本身可以创建，更新和使用状态。
|
|||
|
|
|
|||
|
|
我们将使用一个相当简单的组件来查看正在运行的`state` 。我们有一个按钮，可以跟踪您点击它的次数。
|
|||
|
|
|
|||
|
|
这是代码：
|
|||
|
|
```
|
|||
|
|
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>);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### state在组件中创建
|
|||
|
|
|
|||
|
|
让我们看一下`constructor`方法：
|
|||
|
|
```
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
this.state = {
|
|||
|
|
count: 0,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这是州获取初始数据的地方。初始数据可以是硬编码的（如上所述），但它也可以来自`props` 。
|
|||
|
|
|
|||
|
|
### `state`是可变的
|
|||
|
|
|
|||
|
|
这是`updateCount`方法：
|
|||
|
|
```
|
|||
|
|
updateCount() {
|
|||
|
|
this.setState((prevState, props) => {
|
|||
|
|
return { count: prevState.count + 1 }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
我们更改状态以跟踪总点击次数。重要的是setState。首先，注意setState接受一个函数，因为setState可以异步运行。它需要采用回调函数而不是直接更新状态。您可以看到我们可以在回调中访问prevState，这将包含先前的状态，即使该状态已在其他地方更新过。
|
|||
|
|
|
|||
|
|
React更好一步，setState更新`state`对象**并**自动重新呈现组件。
|
|||
|
|
|
|||
|
|
### `state`警告
|
|||
|
|
|
|||
|
|
> 写`this.state.count = this.state.count + 1`是很诱人的。
|
|||
|
|
|
|||
|
|
**不要这样做** React无法监听以这种方式更新的状态，因此你的组件不会重新渲染。始终使用`setState` 。
|
|||
|
|
|
|||
|
|
写这样的东西也可能很诱人：
|
|||
|
|
```
|
|||
|
|
// DO NOT USE
|
|||
|
|
this.setState({
|
|||
|
|
count: this.state.count + 1
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
虽然这可能看起来合理，但不会抛出错误，并且您可能会发现在线使用此语法的示例，这是错误的。这没有考虑到`setState`可以使用的异步性质，并且可能导致不同步状态数据的错误。
|
|||
|
|
|
|||
|
|
### 程序继续!!!
|
|||
|
|
|
|||
|
|
最后， `render`
|
|||
|
|
```
|
|||
|
|
render() {
|
|||
|
|
return (<button
|
|||
|
|
onClick={() => this.updateCount()}
|
|||
|
|
>
|
|||
|
|
Clicked {this.state.count} times
|
|||
|
|
</button>);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`onClick={() => this.updateCount()}`表示单击该按钮时将调用updateCount方法。我们需要使用**ES6的箭头函数，**因此updateCount可以访问此实例的状态。
|
|||
|
|
|
|||
|
|
按钮中呈现的文本是`Clicked {this.state.count} times` ，它将使用渲染时的this.state.count。
|
|||
|
|
|
|||
|
|
更多信息： [**React props and state**](https://facebook.github.io/react-vr/docs/components-props-and-state.html)
|