React笔记

脱缰胖虎
61 阅读3分钟

旧版

  1. 初始化阶段 : 由ReactDOM.render()触发初次渲染

    1. constructor() 初始化构造函数和state
    2. componentWillMount() 在render,挂载之前调用，在此方法中调用setState不会触发重新render
    3. render() 渲染
    4. componentDidMount() 组件挂载完成

  2. 更新阶段 : 由内部组件this.setState()或父组件重新render触发渲染

    1. componentWillReceiveProps(父组件嵌套)

    2. shouldComponentUpdate 控制是否允许组件更新

      shouldComponentUpdate(){
    /**
        是否允许组件更新
        true  允许更新，走下一个钩子
        false 不允许更新，停止
    */
    return true
}

    3. componentWillUpdate()

    4. render

    5. componentDidUpdate()

  3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发

    1. componentWillUnmount()

父子组件嵌套时的生命周期流程(旧版)

//父组件A
class A extends React.Component{
    //初始化状态
        constructor(props) {
            super(props)
            console.log("A---constructor")
        }
        state = {name:'这是初始状态'}
​
    conpomentWillMount() {
        console.log('A---conpomentWillMount');
    }
​
    componentDidMount() {
        console.log('A---componentDidMount');
    }
​
    componentWillReceiveProps(props){
        console.log('A---componentWillReceiveProps');
    }
​
    shouldComponentUpdate(){
        console.log('A---shouldComponentUpdate');
        return true
    }
​
    componentWillUpdate(){
        console.log('A---componentWillUpdate');
    }
​
    componentDidUpdate(){
        console.log('A---componentDidUpdate');
    }
​
    componentWillUnmount() {
        console.log('A---componentWillUnmount');
    }
​
    changeState = ()=>{
        this.setState({name:'这是更改的状态'})
    }
    
    //卸载组件按钮的回调
    death = ()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }
​
    render(){
        console.log('A---render');
        return(
            <div>
                <div>A组件</div>
                <button onClick={this.changeState}>更改状态</button>
                <button onClick={this.death}>卸载组件</button>
                <B stateName={this.state.name}/>
            </div>
        )
    }
}

//子组件B
class B extends React.Component{
    constructor(props) {
        super(props)
        console.log("B---constructor")
    }
​
    conpomentWillMount() {
        console.log('B---conpomentWillMount');
    }
​
    componentDidMount() {
        console.log('B---componentDidMount');
    }
​
​
    //组件准备接收新的props的钩子(首次不算)
    componentWillReceiveProps(props){
        console.log('B---componentWillReceiveProps',props);
    }
​
    //控制组件是否更新
    shouldComponentUpdate(){
        console.log('B---shouldComponentUpdate');
        return true
    }
    //组件即将更新
    componentWillUpdate(){
        console.log('B---componentWillUpdate');
    }
​
    //组件更新完成
    componentDidUpdate(){
        console.log('B---componentDidUpdate');
    }
​
    componentWillUnmount() {
        console.log('B---componentWillUnmount');
    }
        
    render(){
        console.log('B---render');
        return(
        <div>我是B组件 {this.props.stateName}</div>
        )
    }
}

//渲染组件
ReactDOM.render(<A/>,document.getElementById('test'))
父子组件初始化流程
A---constructor
A---render
B---constructor
B---render
B---componentDidMount
A---componentDidMount
父子组件更新流程
A---shouldComponentUpdate
A---componentWillUpdate
A---render
B---componentWillReceiveProps {stateName: "这是更改的状态"}
B---shouldComponentUpdate
B---componentWillUpdate
B---render
B---componentDidUpdate
A---componentDidUpdate
父子组件卸载流程
A---componentWillUnmount
B---componentWillUnmount

componentWillReceiveProps

compomentWillReceiveProps 表示在再次接收组件传过来的props时调用（初始props不会被调用，在组件接收新的 props 时 被调用）。

新版(16版之后)

新版新增 getDerivedStateFromProps和getSnapshotBeforeUpdate，和废弃componentWillReceiveProps

如需要在新版中使用componentWillReceiveProps，componentWillMount，componentWillUpdate则需要加上UNSAFE_前缀，该前缀的的意思是说明该钩子在未来版本的异步请求中可能会产生bug。

父子组件嵌套时的生命周期流程(新版)

//父组件A
class A extends React.Component{
    //初始化状态
    constructor(props) {
        super(props)
        console.log("A---constructor")
    }
    state = {name:'这是初始状态'}
​
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log("A---getDerivedStateFromProps");
        return null
    }
​
    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 获取更新前的Props，State, 通过return传给componentDidUpdate
        console.log("A---getSnapshotBeforeUpdate", "之前的props：", prevProps, "之前的State：",prevState );
        return null;
      }
​
    shouldComponentUpdate() {
        console.log("A---shouldComponentUpdate");
        return true
    }
​
    componentDidUpdate() {
        console.log("A---componentDidUpdate");
    }
​
    componentDidMount() {
        console.log("A---componentDidMount");
    }
​
    componentWillUnmount() {
        console.log("A---componentWillUnmount");
    }
​
    changeState = ()=>{
        this.setState({name:'这是更改的状态'})
    }
​
    // 卸载组件按钮的回调
    death = ()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }
​
    render(){
        console.log('A---render');
        return(
            <div>
                <div>A组件</div>
                <button onClick={this.changeState}>更改状态</button> 
                <button onClick={this.death}>卸载组件</button>
                <B stateName={this.state.name}/>
            </div>
        )
    }
}

//子组件B
class B extends React.Component{
    constructor(props) {
        super(props)
        console.log("B---constructor")
    }
​
    state = {name:'这是B的初始state'}
​
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log("B---getDerivedStateFromProps");
        return null
    }
​
    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 获取更新前的Props，State, 通过return传给componentDidUpdate
        console.log("B---getSnapshotBeforeUpdate", "之前的props：", prevProps, "之前的State：",prevState );
        return null;
      }
​
    shouldComponentUpdate() {
        console.log("B---shouldComponentUpdate");
        return true
    }
​
    componentDidUpdate() {
        console.log("B---componentDidUpdate");
    }
​
    componentDidMount() {
        console.log("B---componentDidMount");
    }
​
    componentWillUnmount() {
        console.log("B---componentWillUnmount");
    }
​
​
    render(){
        console.log('B---render');
        return(
            <div>我是B组件 {this.props.stateName}</div>
        )
    }
}
父子组件初始化流程
A---constructor
A---getDerivedStateFromProps
A---render
B---constructor
B---getDerivedStateFromProps
B---render
B---componentDidMount
A---componentDidMount
父子组件更新流程
A---getDerivedStateFromProps
A---shouldComponentUpdate
A---render
B---getDerivedStateFromProps
B---shouldComponentUpdate
B---render
B---getSnapshotBeforeUpdate 之前的props： {stateName: "这是初始状态"} 之前的State： {name: "B初始化的state"}
A---getSnapshotBeforeUpdate 之前的props： {} 之前的State： {name: "这是初始状态"}
B---componentDidUpdate
A---componentDidUpdate
父子组件卸载流程
A---componentWillUnmount
B---componentWillUnmount

getDerivedStateFromProps(从props中获取派生state状态)

getDericedStateFromProps会在调用render之前调用，且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

getDerivedStateFromProps中修改的state值将被不可更改

class A extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          value: null,
        };
        console.log('constructor');
    }
       
    static getDerivedStateFromProps() {
        console.log('getDerivedStateFromProps');
        return this.state
    }
}
getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

Serve插件

快速部署打包文件的轻量级服务器

serve build // 启动
avatar
文章
阅读
粉丝