zoukankan      html  css  js  c++  java
  • 了解react记录2-生命周期

    高阶函数

    如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

    • 1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
    • 2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。I常见的高阶函数伺

    函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

    生命周期

    挂载(mount):当clock 组件第一次被渲染到DOM中的时候,就为其设置一个计时器。
    卸载(unmount):当DOM中clock组件被删除的时候,应该清除计时器。

    • 生命周期钩子调用顺序和个人调用顺序没关系,由框架决定。
      函数名称:生命周期回调函数、生命周期钩子函数、生命周期函数、生命周期钩子

    • 1、构造器函数 【constructor(){}

    • 2、挂载前 【componentWillMount(){}

    • 3、初始化 【render(){}】 // 初始化渲染、状态更新后

    • 4、挂载后 【componentDidMount(){}】 //组件挂载完毕执行

    • 5、卸载组件前 【componentwillUnmount(){}】 // 组件将要卸载时执行

    卸载组件:【ReactDOM.unmountComponentAtNode(document.getElementById('test')) 】

    其他钩子函数:
    旧生命周期图

    • 1、setState() 修改状态更新 --> 【shouldComponentUpdate(){}】相当于阀门,决定是否更新,返回true往下走,false则终止。默认返回true -->
    • 2、forceUpdate() 强制更新 --> 【componentWillUpdate(){}】更新前执行的函数 -->
    • -->【componentDidUpdate(){}】更新后执行的函数。

    组件父子关系: 在A组件中引用B组件,A即是B组件的父组件。
    props的传递: 在引用的B标签中直接定义标签属性传递过去。

    • 3、【compenentWillReceiveProps(props){}】子组件将要接收传递过来的props前执行,第一次接收props时不会调用。

    新生命周期图

    新版生命周期把旧版中带【will】的钩子函数进行了改进。

    • static getDerivedStateFromProps(props,state){}】 需返回[从props派生的state]或[null]。若state的值在任何时候都取决于props,那么可以使用getDerivedStateFromProps
    • static getSnapshotBeforeUpdate(prevProps,prevState){}】 需返回[快照值]或[null]。返回值作为参数传递给【componentDidUpdate()】。

    虚拟DOM中key作用:

    状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:

    • 1、旧虚拟DOM中找到与新虚拟DOM相同的key:
      内容没变,直接使用之前的真实DOM
      若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM

    • 2、旧虚拟DOM中未找到与新虚拟DOM相同的key:
      根据数据创建新的真实DOM,随后渲染到到页面

    • 用index作为key可能会引发的问题:
      ① 若对数据进行逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新-->界面效果没问题,但效率低。
      ② 如果结构中还包含输入类的DOM:会产生错误DOM更新-->界面有问题。

    注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。开发中最好用唯一标识作为key

  • 相关阅读:
    AIMS 2013中的性能报告工具不能运行的解决办法
    读懂AIMS 2013中的性能分析报告
    在线研讨会网络视频讲座 方案设计利器Autodesk Infrastructure Modeler 2013
    Using New Profiling API to Analyze Performance of AIMS 2013
    Map 3D 2013 新功能和新API WebCast视频下载
    为Autodesk Infrastructure Map Server(AIMS) Mobile Viewer创建自定义控件
    ADN新开了云计算Cloud和移动计算Mobile相关技术的博客
    JavaScript修改css样式style
    文本编辑神器awk
    jquery 开发总结1
  • 原文地址:https://www.cnblogs.com/xiaoaiying/p/14195122.html
Copyright © 2011-2022 走看看