react 生命周期
react 生命周期 常用的三个阶段
挂载阶段
01 构造函数 constructor
02 static getDerivedStateFromProps
03 render 函数
04 componentDidMount 组件已经挂载 事件监听 dom 操作 ajax 定时器
如例:
import React, { Component } from "react"; class ChildC extends Component { constructor(props) { super(props); this.state = { num: 5 }; console.log("挂载:01 constructor"); } static getDerivedStateFromProps(nextProps, prevState) { console.log("挂载:02 getDerivedStateFromProps"); return {}; } render() { var num = this.state.num; console.log("挂载:03 render"); return ( <div> <h3>组件的生命周期ChildC</h3> </div> ); } componentDidMount() { console.log("挂载:04 componentDidMount"); } } export default ChildC;
更新阶段
01 static getDerivedStateFromProps
02 shouldComponentUpdate 返回true执行渲染 返回false不渲染 (优化)
03 render 渲染
04 getSnapshotBeforeUpdate 更新前获取快照 返回的值下个componentDidUpdata 的第三个参数
05 componentDidUpdate 组件已经更新 (dom已经渲染完成)
如例:
import React, { Component } from "react"; class ChildC extends Component { constructor(props) { super(props); this.state = { num: 5 }; } static getDerivedStateFromProps(nextProps, prevState) {; console.log("更新:01 getDerivedStateFromProps"); return {}; } shouldComponentUpdate(nextProps, nextState) { console.log("更新:02 shouldComponentUpdate"); return true; } render() { var num = this.state.num; console.log("更新:03 render"); return ( <div> <h3>组件的生命周期ChildC</h3> <button onClick={() => this.setState({ num: num + 1 })}>{num}</button> </div> ); } getSnapshotBeforeUpdate(prevProps, prevState) { console.log("更新:04 getSnapshotBeforeUpdate"); // 更新前获取快照 返回的值下个componentDidUpdate的第三个参数 return { name: "mumu", age: 19 }; } componentDidUpdate(prevProps, prevState, snap) { console.log("更新:05 componentDidUpdate"); } } export default ChildC;
卸载阶段
01 componentWillUnmount
import React, { Component } from "react"; class ChildC extends Component { constructor(props) { super(props); this.state = {}; componentWillUnmount(){ console.log('卸载:01 componentWillUnmount'); } } export default ChildC;
HOOKS
useState 使用状态
导入:import {useState} from “ react”
使用:const [num,setNum] =useState(5)
解释:num:数据 setNum更新num数据的方法 5默认值
调用: num :{num}
更新:num:<button onClick={ ()=> setNum (num+2) }> </button>
useEffect 使用副作用
作用:模拟生命周期
模拟挂载完毕
例如:
useEffect( ()=>{ //模拟挂载完毕 },[]) )
模拟某些数据的更新+更新
例如:
useEffect( ()=>{ //num和list的挂载+更新 },[num,list]) )
模拟任意数据的更新
例如:
useEffect( ()=>{ //模拟任意数据的更新 }) )
模拟组件将要卸载
例如:
useEffect( ()=>{ return ()=>{ //模拟数组将要卸载 } }) )