zoukankan      html  css  js  c++  java
  • 4、ReactJs基础知识04--state&&生命周期

    1、State 与 props 类似,都是组件使用的数据,但是 state 是私有的,并且完全受控于当前组件,即可修改。

    2、组件中的render函数

    在组件初始化时会调用一次,并且在组件更新的每一次都会执行一次,即state变更时,所以总是渲染最新的组件状态state,以达到响应式渲染

    3、组件的初始化,但只要在相同的 DOM 节点中渲染 同一个组件<Clock /> ,就仅有一个 Clock 组件的 class 实例被创建使用,以后就是组件的更新

    4、关于继承父组件的props (es6)

       // Class 组件应该始终使用 props 参数来调用父类的构造函数。即super(props)
              // es6中的关键词super,它指代父类的实例(即父类的this对象
              // 子类必须在constructor中调用super方法,否则新建实例会报错
              // 这是因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工
              // 如果不调用super方法,子类就得不到this对象

              // 主要原因是,ES5的继承机制是先创建子类实例对象this,然后再将父类方法属性添加到this上
              // 而ES6的继承机制完全不同,它是先创建父类的实例对象this(所以必须先调用this),然后在用子类的构造函数修改this进行扩展
    5、关于state主要三点:
               1)不要直接修改state,使用setState才会重新渲染页面
                    构造函数是唯一可以给 this.state 赋值的地方,即state的初始化
               2)State 的更新可能是异步的  
                    因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来更新下一个状态。
               3)State 的更新会被合并,setState并不会立即改变state的值,而是将其放到一个任务队列里,最终将多个setState合并,一次性更新页面
    6、React设计setState方法就是为了重新渲染页面

      主要是setState触发页面重新渲染, 需要经过以下生命周期:

    • shouldComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate

      state的值只有在render的时候才真正被修改了

    7、生命周期

    componentWillMount: 在渲染前调用,在客户端也在服务端。
    componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,
               可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    componentWillReceiveProps: 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    shouldComponentUpdate :返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
    componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    componentDidUpdate: 在组件完成更新后立即调用。在初始化时不会被调用。
    componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    软工实践4
    软工实践3
    软工实践1
    《暗时间》读书笔记
    关系规范化(数据库)
    关于Git的初步使用
    软件体系结构模式
    第六周编程总结
    第五周编程总结
    第四周编程总结
  • 原文地址:https://www.cnblogs.com/gopark/p/12292146.html
Copyright © 2011-2022 走看看