// 生命周期的钩子函数
三大阶段
- 挂载阶段
// constructor 构造函数
// 1. 一次生命周期中，只会触发一次
// 2. 一般是用来做 state 的 初始化工作
// 3. 使用它来做提前的 事件处理函数 this 绑定问题
// render 函数
// 1. 一次生命周期中，触发多次
// 2. 主要是用来返回 组件的模板内容的
// 3. 只要 state 、 props 发生变化，那么这个函数默认情况下一定会重新执行。（要看是否处理 shouldComponentUpdate）
// 4. 如果调用了 forceUpdate() 的话，那么render一定会重新执行
// 5. 能否发生ajax请求？（不能）
// componentWillMount 挂载之前（过期）
// static getDerivedStateFromProps(props, state) 派生state数据 (react 中的计算属性)
// 1. 触发在 render 之前，挂载与更新阶段都会触发
// 2. 必须返回对象或者 null。返回的如果是对象的话，会与 state 对象合并成一份新的 state。如果是 null 的话就不做处理
// componentDidMount 挂载完成
// 1. 发生ajax请求
// 2. 可以得到真实的DOM对象了
- 更新阶段
// static getDerivedStateFromProps(props, state)
// shouldComponentUpdate(nextProps, nextState) 我是否应该更新呢？
// 1. 比较重要，是实现性能优化的一个点
// 2. 必须提供返回值，返回一个布尔类型的值，如果为 true ，更新流程往下走。 如果为 false, 更新流程结束。
// render 函数
// componentWillUpdate() 更新之前 (过期了)
// getSnapshotBeforeUpdate(prevProps, prevState) 替代更新之前
- 更新之前，
- 必须有返回值或者返回null。返回值的内容会给到
componentDidUpdate 的第三个参数
componentDidUpdate(prevProps, prevState, snapshot) 更新完成，并且真实DOM也更新完成
- 销毁阶段
componentWillUnmount 销毁之前
1. 做一些清理工作。
import React from "react";
import ReactDOM from "react-dom";
// class Hello extends React.Component {
// constructor() {
// super();
// console.log("构造函数");
// this.state = {
// msg: "我的天"
// };
// }
// render() {
// console.log(this.state);
// return (
// <div>
// <h1>Hello, {this.state.name}</h1>
// <button
// onClick={() => {
// this.setState({
// msg: "天的我"
// });
// }}
// >
// 点我，修改msg
// </button>
// </div>
// );
// }
// static getDerivedStateFromProps(props, state) {
// console.log(props);
// console.log(state);
// return {
// name: "张三"
// };
// }
// componentDidMount() {
// console.log("挂载完成");
// }
// }
class Hello extends React.Component {
state = {
fruits: ["Apple", "Banana", "Orange"],
msg: "hello"
};
static getDerivedStateFromProps(props, state) {
console.log("派生");
return {
fruitsNum: state.fruits.length
};
}
shouldComponentUpdate(nextProps, nextState) {
// 如何判断是 fruits 更新了呢？
if (nextState.fruits.length !== this.state.fruits.length) {
return true;
} else {
return false;
}
}
getSnapshotBeforeUpdate() {
return "123";
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log(snapshot);
}
render() {
console.log("render");
return (
<div>
<p>水果数量有：{this.state.fruitsNum}</p>
<ul>
{this.state.fruits.map((item, index) => {
return <li key={index}>{item}</li>;
})}
</ul>
<button
onClick={() => {
this.setState({
fruits: [...this.state.fruits, "西瓜"]
});
}}
>
点我，新增一个西瓜
</button>
<button
onClick={() => {
this.setState({
msg: "world"
});
}}
>
修改 msg
</button>
</div>
);
}
}
ReactDOM.render(<Hello />, document.getElementById("root"));
