React旧生命周期
画蓝色对号的是在react新生命周期中将要摒弃的;
- componentWillMount()
- componentWillReceiveProps()
- componentWillUpdate()
画红色框的是react生命周期中常用到的周期,也是以后工作后会常用到的生命周期;
1.componentDidMount() 组件加载完成
2.componentDidUpdate() 组件更新完成
3.componentWillUnmount() 组件将要卸载
会在下面逐一演示react中的4段路线
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息
<body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="test"> </div>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
console.log("constructor");
super(props)
this.state = { count: 0 }
}
add = () => {
this.setState({
count: this.state.count + 1
})
}
// unmountComponentAtNode:卸载组件节点
death = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
force=()=>{
this.forceUpdate();
}
//componentWillMount:组件将要挂载时触发的函数 componentWillMount组件将要摒弃,在前加UNSAFE_不会报警告
UNSAFE_componentWillMount(){
console.log("ComponentWillMount-组件将要挂载时触发的函数");
}
//componentDidMount:组件挂载完成时触发的函数
componentDidMount(){
console.log("ComponentDidMount-组件挂载完成时触发的函数");
}
//shouldComponentUpdate:是否要更新数据时触发的函数
shouldComponentUpdate(){
console.log("shouldComponentUpdate-是否要更新数据时触发的函数");
return null
}
//componentWillUpdate:将要更新数据时触发的函数
UNSAFE_componentWillUpdate(){
console.log("componentWillUpdate-将要更新数据时触发的函数");
}
//componentDidUpdate:数据更新完成时触发的函数
componentDidUpdate(){
console.log("componentDidUpdate-数据更新完成时触发的函数");
}
render() {
console.log("render-页面渲染");
return (
<div>
<h2>Count:{this.state.count}</h2>
<button onClick={this.add}>add</button>
<button onClick={this.death}>death</button>
<button onClick={this.force}>force</button>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个
4. componentDidUpdate()
1.点击add按钮 使数据加1,触发 shouldComponentUpdate()但Count未显示1
走的是3线,但未走完 ,因为 shouldComponentUpdate()未设置强制刷新
2.点击force按键,触发页面强制更新
走的是3、4路线
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事,
例如:开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个
4. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事,
例如:开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个
4. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息