react生命周期

dunizb 发布于2019-08-23 14:33 / 850人阅读

摘要：参考资料组件的生命周期这个文档利用的，有些陈旧。组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改。

参考资料：
React：组件的生命周期
   这个文档利用es5的creatClass，有些陈旧。需要研究两者差别的，移步
React 生命周期
   这个过于粗暴，没有示例

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时，如下图：

实例化

getDefaultProps()
设置默认的props，也可以用dufaultProps设置组件的默认属性.

getInitialState()
在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。
每一个React组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享。

componentWillMount()
组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
只能通过 this.props 和 this.state 访问数据（不能修改），也就是不能调用this.setState()。
只能出现一个顶级组件，不能返回一组元素。例如：

render(){
    //这样不行
    this.setState({
     newState:_newState
    });
    return (
    
    //去掉下面一行
    
    );
}

componentDidMount()
组件渲染之后调用，只调用一次。

demo

import React,{Component} from "react";
import ReactDOM from "react-dom";
class Clock extends Component{

    constructor(props){
        super(props);
        this.state = {
            date:new Date()
        }
    }

    //渲染前render执行
    componentWillMount(){
        //this.timer///////////////////////////
        this.timer =setInterval(()=>{
            this.setState({
                date: new Date()
            })
        },1000)
    }
    componentDidMount(){
        this.clock.focus();
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    render(){
        return(
            
                
                    this.clock=clock}>now time:
                    {this.state.date.toLocaleTimeString()}
                
            
        )
    }
}
ReactDOM.render(, document.getElementById("root"));

存在期，更新操作改变

componentWillReceiveProps(nextProps)
只有props改变时调用

shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

componentWillUpdata(nextProps, nextState)
组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state。

render()

componentDidUpdate()
组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

demo

import React from "react";
import ReactDOM from "react-dom";
class Content extends React.Component {
    constructor(){
        super();
        this.state = {
            test:0
        }
    }
    componentWillMount() {
        console.log("Component WILL MOUNT!")
    }
    componentDidMount() {
        console.log("Component DID MOUNT!")
    }
    componentWillReceiveProps(newProps) {
        console.log(newProps)
        console.log("Component WILL RECEIVE PROPS!")
    }
    shouldComponentUpdate(newProps, newState) {
        console.log(newProps,newState)
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log(nextProps,nextState)
        console.log("Component WILL UPDATE!");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log(prevProps,prevState)
        console.log("Component DID UPDATE!")
    }
    componentWillUnmount() {
        console.log("Component WILL UNMOUNT!")
    }
    _handleClick(){
        this.setState({
            test:this.state.test + 1
        })
    }
    render() {
        return (
            
                {this.props.myNumber}
                点我
                {this.state.test}
            
        );
    }
}

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: 0};
        this.setNewNumber = this.setNewNumber.bind(this);
    }

    setNewNumber() {
        this.setState({data: this.state.data + 1})
    }
    render() {
        return (
            
            
            
            
    );
    }
}
ReactDOM.render(

卸载

componentWillUnmount()
组件将要卸载时调用，一些事件监听和定时器需要在此时清除，主要是优化性能，例子见Clock。

私有云服务器托管生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100794.html

React专题：生命周期

摘要：而生命周期钩子，就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名，分别是将只提供别名，彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验生命周期...

Hanks10100 2019-08-23 11:25 评论0 收藏0
捋一捋React的生命周期

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

MobService 2019-08-23 15:20 评论0 收藏0
ReactV16.3，即将更改的生命周期

摘要：我们目前的计划是为不安全生命周期引入别名，和。从现在开始，只有新的生命周期名称将起作用。从版本开始，更新以响应更改的推荐方法是使用新的静态生命周期。注释：本文是根据React的官方博客翻译而成（文章地址：https://reactjs.org/blog/2018...）。主要讲述了React之后的更新方向，以及对之前生命周期所出现的问题的总结，之后的React将逐步弃用一些生命周期和...

wendux 2019-08-22 16:28 评论0 收藏0
React组件生命周期详解

摘要：组件生命周期构造方法是对类的默认方法，通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求，并。后废弃该生命周期，可以在中完成设置渲染组件是一个组件必须定义的生命周期，用来渲染。该生命周期内可以进行。 React组件生命周期 constructor( ) 构造方法 constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是...

learn_shifeng 2019-08-22 17:31 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
React组件生命周期

摘要：组件生命周期此文章适合之前的版本，，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。 React组件生命周期此文章适合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前，这篇文章还是适用的。新的生命周期请看官...

mgckid 2019-08-20 10:42 评论0 收藏0