React组件生命周期
-
初始化阶段
-
挂载阶段
-
更新阶段
当状态或者属性发生改变之后会触发更新阶段的钩子函数
在更新阶段不能修改状态数据
-
卸载阶段
<title>生命周期</title>
<style>
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: orange;
margin: 2rem auto;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
class Ball extends React.Component {
componentWillMount() {
console.log("组件Ball将要挂载");
}
componentDidMount() {
console.log("组件Ball挂载完成");
}
componentWillUnmount() {
console.log("组件Ball将要卸载");
}
componentWillReceiveProps(p) {
console.log(p);
console.log("组件将要接收新的属性");
}
render() {
return <div className="ball" />;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "标题",
count: 0,
list: ["小凡", "陆雪琪", "碧瑶"],
};
}
componentWillMount() {
console.log("组件将要挂载");
}
componentDidMount() {
console.log("组件挂载完成");
}
// 主要用来对组件做性能优化的时候使用
// 接收两个参数：下一次的属性，下一次的状态
// 参数二中的count是跟随当前改变后的实时count，而this.state.count的值是上一次旧的值
shouldComponentUpdate(nextProps, nextState) {
// console.log(p);
// console.log(s);
console.log("组件是否需要更新");
if (nextState.count % 2 === 0) {
return false; // 组件不需要更新，不会执行render方法
} else {
return true;
}
}
componentWillUpdate() {
console.log("组件将要更新");
}
componentDidUpdate() {
console.log("组件更新完成"); // 在这里获取数据，因为在这里，所有的DOM元素都初始化完成了，我们就可以对它进行操作
}
componentWillReceiveProps(p) {
console.log(p) // 指的就是render()里的Ball上的r的值
console.log("组件将要接收新的属性");
}
componentWillUnmount() {
console.log("组件将要卸载");
}
render() {
console.log("render执行了");
return (
<div>
<h5>{this.state.title}</h5>
<button
onClick={() =>
this.setState({
count: this.state.count + 1,
})
}
>
{this.state.count}
</button>
{this.state.count % 2 == 0 ? <></> : <Ball r={Math.random()} />}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
