zoukankan      html  css  js  c++  java
  • react 生命周期详解

    state有时候很不听话,在某些时候,我不想他渲染,偏偏react非常智能的帮我们重复渲染。

    比如最常见的就是传递的对象为空,组件依旧渲染了一次或者多次。

    更多场景不举例了,对症下药。

    shouldComponentUpdate是react提供的生命周期函数,他发生在接收到新的props的时候。简单介绍一下各个生命周期函数。

    componentWillMount:组件挂载之前执行,只执行一次
    
    componentDidMount: 组件渲染完成,只执行一次
    
    =======================================================
    
    componentWillRecevieProps: 组件将要接收新的props执行
    
    shouldComponentUpdate: 判断组件是否应该重新渲染,默认是true(首次渲染时不会被调用,接受2个参数,新的props和新的state)
    
    componentWillUpdate: 组件将要重新渲染
    
    componentDidUpdate: 组件重新渲染完成
    
    =======================================================
    
    componentWillUnmount: 卸载组件

    组件生命周期是有顺序的,首先挂载组件,挂载成功完成第一次渲染,然后传递新的props,则会触发componentWillRecevieProps,执行重新渲染的周期,直至渲染完成。

    shouldComponentUpdate: function(nextProps, nextState) {
      return true;
    }
    
    

    在你的组件内部加上这段代码

    component.js

    shouldComponentUpdate(nextProps, nextState) {
        if (_.isEqual(this.props, nextProps) || !_.isEmpty(this.props)) {
            return false
        }
        return true
    }

    这里用到了_.isEqual和_.isEmpty,_.isEqual判断当前传进来的值和下一次传递的值是不是相等,是则返回true,_.isEmpty判断当前传递进来的对象是不是为空,为空则返回true。

    _.isEqual和_.isEmpty是 lodash 插件里面的函数,这是个轻巧的JavaScript函数插件,可以处理多种常见的数据操作,当然还有一个更多功能的插件。

    在你的react项目的入口js导入lodash,因为lodash函数是全局的,所以只需要在入口导入一次即可。

    安装

    npm install --save lodash

    app.js

     
    import ‘lodash’
  • 相关阅读:
    伸缩盒 Flexible Box(旧)
    js 事件绑定
    vertical-align 垂直居中
    小程序de 一些经验1
    更新一下 我的红包雨
    HTML元素坐标定位,这些知识点得掌握
    JS实现-页面数据无限加载
    em和px的区别一次彻底搞清楚!
    js模糊查询
    phpmyadmin-您可能正在上传很大的文件,请参考文档来寻找解决方法
  • 原文地址:https://www.cnblogs.com/liuna/p/7232575.html
Copyright © 2011-2022 走看看