首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React.js 实战之 State & 生命周期将函数转换为类为一个类添加局部状态将生命周期方法添加到类中

React.js 实战之 State & 生命周期将函数转换为类为一个类添加局部状态将生命周期方法添加到类中

作者头像
JavaEdge
发布2018-12-21 14:46:15
2.1K0
发布2018-12-21 14:46:15
举报
文章被收录于专栏:JavaEdgeJavaEdge

生命周期图解

参考该例

目前,我们只学习了一种方法来更新UI

我们调用 ReactDOM.render() 来改变输出

  • 在本节中,我学习如何使Clock组件真正可重用和封装 它将设置自己的计时器,并每秒更新一次
  • 从封装时钟开始
  • 然而,它错过了一个关键的要求 Clock设置一个定时器并且每秒更新UI应该是Clock的实现细节

理想情况下,我们写一次 Clock 然后它能更新自身

  • 为实现这个需求,我们需要为Clock组件添加状态 状态与属性十分相似,但状态是私有的,完全受控于当前组件
  • 我们之前提到过,定义为类的组件有一些特性 局部状态就是如此:一个功能只适用于类

将函数转换为类

将函数组件 Clock 转换为类

  1. 创建一个名称扩展为 React.ComponentES6 类
  2. 创建一个render()空方法
  3. 将函数体移动到 render()
  4. render() 中,使用 this.props 替换 props
  5. 删除剩余的空函数声明

Clock 现在被定义为一个类而不只是一个函数

使用类就允许我们使用其它特性,例如局部状态、生命周期钩子

为一个类添加局部状态

三步将 date 从属性移动到状态中

  • render()中使用this.state.date 替代 this.props.date

注意如何传递 props 到基础构造函数的

类组件应始终使用props调用基础构造函数

  • 从 <Clock /> 元素移除 date 属性

稍后将定时器代码添加回组件本身。

  • 结果如下

接下来,我们将使Clock设置自己的计时器并每秒更新一次

将生命周期方法添加到类中

在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要

每当Clock组件第一次加载到DOM时,我们都想生成定时器,这在React中被称为挂载

同样,每当Clock生成的这个DOM被移除时,我们也会想要清除定时器,这在React中被称为卸载

我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.12.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 将函数转换为类
  • 为一个类添加局部状态
  • 将生命周期方法添加到类中
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档