4.9 KiB
title | localeTitle |
---|---|
React Props and State | 反应道具和状态 |
道具与州
控制组件有两种类型的数据: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