React——组件基本结构及其生命周期

组件基本结构

es6类与继承点击跳转

构造函数constructor

  • 功能:子级继承父级的时候,通过构造函数获取父级的属性和方法,并通过super()传递的参数进行构造。
  • constructor(){super()}
  • 组件构造函数会在组件实例的时候最先调用!
 constructor() {
     super()
     console.log('constructor 初始化数据')
 }

组件

  • 定义了组件继承于React的基本组件对象,一定要有自己的组件用于实例渲染。
  • 组件通过render()方法渲染,返回一个html格式的组件以供渲染。
  • 组件必须要用一个容器(div)包裹,不等各个元素节点都暴露在外面。
  • 组件分为静态组件和有状态组件。有状态组件通过数据或逻辑控制组件里的内容显示,这些内容用state和setstate控制。
  • 基本格式:
render() {
    console.log('渲染')
    return (
        <div>
            <h2>{"大括号里可以写js代码"}</h2>
            <h2>Hello word</h2>
        </div>
    );
}

生命周期

import React, {
    Component
} from 'react';


class MyComponent extends Component {
    constructor() {
        super()
        this.state = {
            msg: 'Hello World'
        }
        console.log('constructor 初始化数据')
        this.handleClick = this.handleClick.bind(this)
    }
    // 组件将要加载
    componentWillMount() {
        // 请求数据 异步操作
        console.log('componentWillmount 组件将要加载')
    }
    // 组件加载完成
    componentDidMount() {
        console.log('componentDidMount 组件加载完成')
    }
    ////////////////////////////////////////
    // 运行中阶段(更新阶段)
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps 将要接收父组件传来的props', nextProps)
    }
    // 组件是不是应该更新  默认是返回true  false
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate 组件是不是应该更新')
        return true;
    }
    // 组件将要更新
    componentWillUpdate(nextProps, nextState) {
        console.log('componentWillUpdate 组件将要更新', nextProps, nextState)
    }

    // 更新完成
    componentDidUpdate() {
        console.log('componentDidUpdate 更新完成')
    }
    // 即将销毁
    componentWillUnmount() {
        console.log('componentWillUnmount 即将销毁')
    }


    handleClick() {
        this.setState({
            msg: 'new Hello World'
        })
    }
    // 渲染
    render() {
        console.log('渲染')
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <h2>{this.props.abc}</h2>
                <input type="button" defaultValue='更新数据' onClick={this.handleClick} />
            </div>
        );
    }
}


class App extends Component {
    constructor() {
        super();
        this.state = {
            data: 'old props',
            onOff: true
        }
        this.changeProps = this.changeProps.bind(this)
        this.toggleChild = this.toggleChild.bind(this)
    }
    // 要进入第二阶段(更新阶段) 数据在发生变化
    changeProps() {
        this.setState({
            data: 'new props 123456',

        })
    }
    toggleChild() {
        this.setState({
            onOff: !this.state.onOff
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.onOff ? <MyComponent abc={this.state.data}></MyComponent> : ''
                }
                <input type="button" defaultValue='更新props' onClick={this.changeProps} />
                <input type="button" defaultValue='销毁组件' onClick={this.toggleChild} />
            </div>
        );
    }
}

export default App;

运行时没有操作过程的页面

在这里插入图片描述

  • 组件生命周期包含:即将加载、加载完成、更新、是否更新、即将更新、更新完成、即将销毁。

加载

即将加载:componentWillMount

  • 在组件挂载之前调用,且全局只调用一次。如果在这个钩子里可以setState,render后可以看到更新后的state,不会触发重复渲染。该生命周期可以发起异步请求,并setState。
componentWillMount() {
    // 请求数据 异步操作
    console.log('componentWillmount 组件将要加载')
}

已经加载:componentDidMount

  • 组件第一次渲染完成,此时dom节点已经生成。可以在这里调用ajax请求,进行进一步的数据交互,返回数据setState后组件会重新渲染。
componentDidMount() {
    console.log('componentDidMount 组件加载完成')
}
  • 至此,声明周期的第一个阶段完成,组件的demo出现在网页,如果有数据交互,那么第一次的数据已经初始化完成。

更新

该不该更新:shouldComponentUpdate

  • 用于控制组件该不该更新的函数,在父组件更新引起子组件重新渲染的情况下使用较多。
// 组件是不是应该更新  默认是返回true  false
shouldComponentUpdate() {
    console.log('shouldComponentUpdate 组件是不是应该更新')
    return true;
}

即将更新:componentWillUpdate(nextProps, nextState)

  • shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState,多用于数据反馈处理等。
// 组件将要更新
componentWillUpdate(nextProps, nextState) {
    console.log('componentWillUpdate 组件将要更新', nextProps, nextState)
}

更新完成:componentDidUpdate

组件接收到数据并渲染完成时触发。

组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。

// 更新完成
componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate 更新完成', prevProps, prevState)
}
  • demo点击更新数据结果:

在这里插入图片描述

更新阶段或者说运行中阶段:componentWillReceiveProps(nextProps)

  • 在父组件调用子组件,给子组件更新数据的时候触发该方法,nextProps即是传递进来的数据。

父组件

//父组件
class App extends Component {
    constructor() {
        super();
        this.state = {
            data: 'old props',
            onOff: true
        }
        this.changeProps = this.changeProps.bind(this)
        this.toggleChild = this.toggleChild.bind(this)
    }
    // 要进入第二阶段(更新阶段) 数据在发生变化
    changeProps() {
        this.setState({
            data: 'new props 123456',

        })
    }
    toggleChild() {
        this.setState({
            onOff: !this.state.onOff
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.onOff ? <MyComponent abc={this.state.data}></MyComponent> : ''
                }
                <input type="button" defaultValue='更新props' onClick={this.changeProps} />
                <input type="button" defaultValue='销毁组件' onClick={this.toggleChild} />
            </div>
        );
    }
}

点击更新props按钮的时候,将触发App父组件里的input,input点击触发changeState方法,state的数据被更改,由于组件基于数据驱动,那么涉及到state的组件都会被更新,则,子组件MyComponent会被更新,MyComponent更新时收到父组件传递Props影响触发运行时态声明周期函数。

同时,传递过来的数据也触发了更新状态的生命周期函数。

在这里插入图片描述

即将销毁

即将销毁:componentWillUnmount()

  • 销毁组件后demo以及相关的事件等都会被销毁,这就是组件的强大之处,对于web性能有很大的改善!
  1. clear你在组建中所有的setTimeout,setInterval
  2. 移除所有组建中的监听 removeEventListener
  3. 也许你会经常遇到这个warning:
// 即将销毁
componentWillUnmount() {
    console.log('componentWillUnmount 即将销毁')
}

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章