类组件可以定义在组件生命周期的某些时刻执行的函数. 使用它们可以为组件提供更精细的控制水平. 以下是 React 中可用的生命周期函数的概述。
<$>[注]以下示例是非常糟糕的反应,仅用于示范用途。
组件WillMount
componentWillMount在元件首次渲染之前被调用,您可以使用此功能在初始渲染之前调用setState。
1class Scorecard extends Component {
2 componentWillMount() {
3 this.setState({score: 0});
4 }
5
6 render() {
7 const {playerName} = this.props;
8 // `this.state` defaults to null, but since it'll be set in
9 // `componentWillMount`, it can safely be destructured.
10 const {score} = this.state;
11 const message = `Current Score: ${score}`;
12 return (
13 <div>
14 <h1>{playerName}</h1>
15 <div>{message}</div>
16 </div>
17 );
18 }
19}
<$>[注意]调用setState通常会触发重新渲染,但在componentWillMount中调用它不会(因为它最初没有渲染)。
组成部分
「componentDidMount」在元件首次渲染后被调用,可以用来在元件出现后启动非同步操作。
1class Scorecard extends Component {
2 // Other functions omitted for brevity.
3 componentDidMount() {
4 // You'd probably want to send an AJAX call or something,
5 // but let's say they get 1000 points after the first second.
6 setTimeout(() => this.setState({score: 1000}), 1000);
7 }
8}
<$>[注意]在服务器渲染中不会调用componentDidMount。
配件 配件
componentWillReceiveProps呼叫时,该组件收到新的补贴,但在它渲染之前。
1class Scorecard extends Component {
2 // Other functions omitted for brevity.
3 componentWillReceiveProps(nextProps) {
4 // `nextProps` is the new props, while `this.props` are the old ones.
5 const {playerName} = this.props;
6 // It is entirely possible that the new `playerName` is the same as the old one.
7 if (nextProps.playerName !== playerName) {
8 // Changing your name resets the score to zero.
9 this.setState({score: 0});
10 }
11 }
12}
必备更新
shouldComponentUpdate 被调用后,附件或状态被更改(以及componentWillReceiveProps之后),但在它转换之前。 它在生命周期函数中是独一无二的,因为它预计会返回一个布尔值。
1class Scorecard extends Component {
2 // Other functions omitted for brevity.
3 shouldComponentUpdate(nextProps, nextState) {
4 // Same as `componentWillReceiveProps`, `nextProps` is the
5 // new props and `this.props` is the old.
6 const {playerName} = this.props;
7 // Ditto for `nextState` and `this.state`.
8 const {score} = this.state;
9 // Only `playerName` and `score` affect the display.
10 // If something else changes, re-rendering would be a waste.
11 return !(nextProps.playerName === playerName && nextState.score === score);
12 }
13}
元素更新
componentWillUpdate在组件渲染之前,并在shouldComponentUpdate之后被调用,它不能调用setState。
1class Scorecard extends Component {
2 // Other functions omitted for brevity.
3 componentWillUpdate(nextProps, nextState) {
4 const {playerName} = this.props;
5 // If `playerName` changes, log a message.
6 if (nextProps.playerName !== playerName) {
7 // Note that even though `componentWillReceiveProps` called `setState`, `this.state` is still the original value.
8 const {score} = this.state;
9 console.log(`${playerName} is now ${nextProps.playerName}. His score of ${score} is forfeit.`);
10 }
11 }
12}
组件更新
componentDidUpdate在render完成后被调用,与其他更新功能一样,它将有新的和旧版本的优惠和状态,但与以前的版本作为参数,而不是。
1class Scorecard extends Component {
2 // Other functions omitted for brevity.
3 componentDidUpdate(prevProps, prevState) {
4 const {playerName} = this.props;
5 // You guessed it, `prevProps` are the props as they used to be and `this.props` are what they are now.
6 // Ditto for `prevState` and `this.state`.
7 if (prevProps.playerName !== playerName) {
8 const {score} = prevState;
9 console.log(`${playerName} used to be ${prevProps.playerName}. His former score was ${score}.`);
10 }
11 }
12}
元素 元素
最后,componentWillUnmount在删除组件之前被调用,用它来告别。
1class Scorecard extends Component {
2 // Other functions omitted for brevity.
3 componentWillUnmount() {
4 console.log('Sayonara!');
5 }
6}