打开之前 React 的生命周期文档网页，点击展开不常用的生命周期如下：
- getDerivedStateFromProps 函数：组件在被挂载或者更新时 (映射数据)，就会回调
- shouldComponentUpdate 函数：组件在更新时，决定是否要更新UI，就会回调
- getSnapshotBeforeUpdate 函数：组件在更新时，最后能获取到更新之前数据的地方，就会回调
挂载或更新时
App.js:
import React from 'react';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
static getDerivedStateFromProps(props, state) {
console.log('挂载或更新时-映射数据-getDerivedStateFromProps');
console.log(props, state);
return null;
}
render() {
return (
<div>
<p>Home</p>
<button onClick={() => {
this.btnClick();
}}>Home按钮
</button>
</div>
);
}
btnClick() {
this.setState({
count: 1
});
}
}
class App extends React.Component {
render() {
return (
<div>
<Home name={'BNTang'}/>
</div>
);
}
}
export default App;
getDerivedStateFromProps 只需要 了解 即可(用得非常非常的少)
更新时决定是否要更新 UI
返回值为布尔类型，true 代表需要更新 UI，false 代表不需要更新 UI。
import React from 'react';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log('更新时-决定是否要更新UI-shouldComponentUpdate');
return true;
}
render() {
console.log("渲染 UI");
return (
<div>
<p>Home</p>
<button onClick={() => {
this.btnClick();
}}>Home按钮
</button>
</div>
);
}
btnClick() {
this.setState({
count: 1
});
}
}
class App extends React.Component {
render() {
return (
<div>
<Home name={'BNTang'}/>
</div>
);
}
}
export default App;
更新时最后能获取到更新之前数据的地方
App.js:
import React from 'react';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
render() {
return (
<div>
<p>Home</p>
<button onClick={() => {
this.btnClick();
}}>Home按钮
</button>
</div>
);
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('更新时-最后能获取到更新之前数据的地方-getSnapshotBeforeUpdate');
console.log(prevProps, prevState);
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('更新时-componentDidUpdate');
}
btnClick() {
this.setState({
count: 1
});
}
}
class App extends React.Component {
render() {
return (
<div>
<Home name={'BNTang'}/>
</div>
);
}
}
export default App;
注意点，getSnapshotBeforeUpdate 必须与 componentDidUpdate 一起使用。
