React getDerivedStateFromProps() 方法

React 组件生命周期

getDerivedStateFromProps() 方法格式如下:

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用,即在渲染 DOM 元素之前会调用,并且在初始挂载及后续更新时都会被调用。

state 的值在任何时候都取决于 props。

getDerivedStateFromProps 的存在只有一个目的:让组件在 props 变化时更新 state。

该方法返回一个对象用于更新 state,如果返回 null 则不更新任何内容。

以下实例 favoritesite 的初始值为 runoob,但是 getDerivedStateFromProps() 方法通过favsite 属性更新了 favoritesite 的值:

实例

class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: runoob};
}
static getDerivedStateFromProps(props, state) {
return {favoritesite: props.favsite };
}
render() {
return (
h1>我喜欢的网站是 {this.state.favoritesite}h1>
);
}
}

ReactDOM.render(Header favsite=Google/>, document.getElementById(root));

尝试一下 »

本文来源于互联网:React getDerivedStateFromProps() 方法