Ï

React学习笔记——State和生命周期(v15.5)

    • UI更新

      下面封装Clock组件,使其实现封闭、可重用。

      上面Clock组件事实上设置了一个计时器每秒更新UI,然而,它遗漏了一个至关重要的需求:计时器应该是一个Clock组件实现的细节吗,而不应该单独使用。
      理想情况下,我们想只调用一次组件,然后Colck组件自动更新它自己:

      为了实现这个功能,我们需要引入“state”到Clock组件。State和Props很像,但是它是私有的并且可以通过组件完全控制的。
      我们之前提到过组件定义方式有函数式和类两种,而类方式有一些额外特性,局部State恰好就是类方式的特性之一。
    • 函数式转变为类方式

      函数式定义组件转变为类步骤:
      1、创建一个同名的ES6类并且继承React.Component
      2、添加一个空的render()方法
      3、把函数体内组件代码移入render()方法体内
      4、替换render()方法内props为this.props
      5、删除剩余空函数声明

    • 为类添加局部State

      1、替换this.props为this.state
      2、添加class constructor初始化this.state

    • 为类添加生命周期方法

    • 正确使用State

      除了构造函数中,不要在其它位置直接修改state,应该用setState方法


      State更新可能是异步的,所以你不能依赖它们的值去计算下一个状态。例如:

      使用第二种setState()方法修改它,它接收一个函数,而不是一个对象。这个函数接收两个参数:第一个参数prevState以前的状态;第二个参数是在那个状态时的props

      State更新是合并的

       

    转载请注明:风尘 » React学习笔记——State和生命周期(v15.5)

    喜欢 0

还没有人抢沙发呢~