react 当前时间_React教程-State 生命周期
通过调用 ReactDOM.render() 来修改我们想要渲染的元素:
在本文中,我们将学习如何封装真正可复用的 Clock 组件。它将设置自己的计时器并每秒更新一次。
我们可以从封装时钟的外观开始:
然而,它忽略了一个关键的技术细节:Clock 组件需要设置一个计时器,并且需要每秒更新 UI。
理想情况下,我们希望只编写一次代码,便可以让 Clock 组件自我更新:
我们需要在 Clock 组件中添加 “state” 来实现这个功能。
State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件。
将函数组件转换成 class 组件
通过以下五步将 Clock 的函数组件转成 class 组件:
- 创建一个同名的 ES6 class,并且继承于 React.Component。
- 添加一个空的 render() 方法。
- 将函数体移动到 render() 方法之中。
- 在 render() 方法中使用 this.props 替换 props。
- 删除剩余的空函数声明。
现在 Clock 组件被定义为 class,而不是函数。
每次组件更新时 render 方法都会被调用,但只要在相同的 DOM 节点中渲染 ,就仅有一个 Clock 组件的 class 实例被创建使用。这就使得我们可以使用如 state 或生命周期方法等很多其他特性。
向 class 组件中添加局部的 state
我们通过以下三步将 date 从 props 移动到 state 中:
1、把 render() 方法中的 this.props.date 替换成 this.state.date :
2、 添加一个 class 构造函数,然后在该函数中为 this.state 赋初值:
通过以下方式将 props 传递到父类的构造函数中:
Class 组件应该始终使用 props 参数来调用父类的构造函数。
3、移除 元素中的 date 属性:
我们之后会将计时器相关的代码添加到组件中。
代码如下:
接下来,我们会设置 Clock 的计时器并每秒更新它。
将生命周期方法添加到 Class 中
在具有许多组件的应用程序中,当组件被销毁时释放所占用的资源是非常重要的。
当 Clock 组件第一次被渲染到 DOM 中的时候,就为其设置一个计时器。这在 React 中被称为“挂载(mount)”。
同时,当 DOM 中 Clock 组件被删除的时候,应该清除计时器。这在 React 中被称为“卸载(unmount)”。
我们可以为 class 组件声明一些特殊的方法,当组件挂载或卸载时就会去执行这些方法:
这些方法叫做“生命周期方法”。
componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行,所以,最好在这里设置计时器:
接下来把计时器的 ID 保存在 this 之中(this.timerID)。
尽管 this.props 和 this.state 是 React 本身设置的,且都拥有特殊的含义,但是其实你可以向 class 中随意添加不参与数据流(比如计时器 ID)的额外字段。
我们会在 componentWillUnmount() 生命周期方法中清除计时器:
最后,我们会实现一个叫 tick() 的方法,Clock 组件每秒都会调用它。
使用 this.setState() 来时刻更新组件 state:
现在时钟每秒都会刷新。
让我们来快速概括一下发生了什么和这些方法的调用顺序:
- 当 被传给 ReactDOM.render()的时候,React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间,所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。
- 之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。
- 当 Clock 的输出被插入到 DOM 中后,React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中,Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。
- 浏览器每秒都会调用一次 tick() 方法。 在这方法之中,Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用,React 能够知道 state 已经改变了,然后会重新调用 render() 方法来确定页面上该显示什么。这一次,render() 方法中的 this.state.date 就不一样了,如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
- 一旦 Clock 组件从 DOM 中被移除,React 就会调用 componentWillUnmount() 生命周期方法,这样计时器就停止了。
正确地使用 State
关于 setState() 你应该了解三件事:
不要直接修改 State
例如,此代码不会重新渲染组件:
而是应该使用 setState():
构造函数是唯一可以给 this.state 赋值的地方:
State 的更新可能是异步的
出于性能考虑,React 可能会把多个 setState() 调用合并成一个调用。
因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来更新下一个状态。
例如,此代码可能会无法更新计数器:
要解决这个问题,可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数:
上面使用了箭头函数,不过使用普通的函数也同样可以:
State 的更新会被合并
当你调用 setState() 的时候,React 会把你提供的对象合并到当前的 state。
例如,你的 state 包含几个独立的变量:
然后你可以分别调用 setState() 来单独地更新它们:
这里的合并是浅合并,所以 this.setState({comments}) 完整保留了 this.state.posts, 但是完全替换了 this.state.comments。
数据是向下流动的
不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的,并且它们也并不关心它是函数组件还是 class 组件。
这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件,其他组件都无法访问。
组件可以选择把它的 state 作为 props 向下传递到它的子组件中:
这对于自定义组件同样适用:
FormattedDate 组件会在其 props 中接收参数 date,但是组件本身无法知道它是来自于 Clock 的 state,或是 Clock 的 props,还是手动输入的:
这通常会被叫做“自上而下”或是“单向”的数据流。任何的 state 总是所属于特定的组件,而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话,那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源,但是它只能向下流动。
为了证明每个组件都是真正独立的,我们可以创建一个渲染三个 Clock 的 App 组件:
每个 Clock 组件都会单独设置它自己的计时器并且更新它。
在 React 应用中,组件是有状态组件还是无状态组件属于组件实现的细节,它可能会随着时间的推移而改变。你可以在有状态的组件中使用无状态的组件,反之亦然。
react 当前时间_React教程-State 生命周期相关推荐
- React Native组件的结构和生命周期
React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
- 03 为什么 React 16 要更改组件的生命周期?(下)
通过对上一个课时的学习,你已经对 React 15 的生命周期有了系统的掌握和理解.本课时,我将在此基础上,对 React 16 以来的生命周期进行剖析.在理解"是什么"的基础上, ...
- [react] react的性能优化在哪个生命周期?它优化的原理是什么?
[react] react的性能优化在哪个生命周期?它优化的原理是什么? shouldComponentUpdate 减少不必要的重新渲染 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易 ...
- [react] react的函数式组件有没有生命周期?
[react] react的函数式组件有没有生命周期? 没有 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [react] react16跟之前的版本生命周期有哪些变化?
[react] react16跟之前的版本生命周期有哪些变化? 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [react] react中修改prop引发的生命周期有哪几个?
[react] react中修改prop引发的生命周期有哪几个? static getDerivedStateFromPropsshouldComponentUpdaterendergetSnapsh ...
- flutter中state生命周期与app生命周期与路由监听
State生命周期 1.第一次展示到屏幕上时会依次调用当前element的构造函数,initState,didChangeDependencies,build 2.如果只是自己发生了更新,则只会回调b ...
- react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期 接着(2)中的组件生命周期 1.运行阶段 运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
最新文章
- Creating Apps With Material Design —— Defining Custom Animations
- 用Python爬网页需要了解什么背景知识
- 2021 网易创新企业大会来了
- 互联网账户系统如何设计
- 地图定位的坐标和mapview中显示的当前位置信息不一致
- jsp页面ajax用法,JSP页面如何使用ajax实现局部刷新
- 如何对行 表 数据库加锁
- MDSF:如何使用GMF来做TOGAF建模工具
- dosbox详细安装级及使用
- 微信小程序分享/转发功能方法
- 微信网页/微信小程序内实现长按识别二维码
- spring boot 2.0 官方文档 (一)
- 深入浅出理解数据库s锁和x锁
- 平板安装Ubuntu18.04教程
- 爬取哔哩哔哩网站数据
- visual studio怎么让button一直生效_异地投保怎么做?看完你就知道
- 【Python】文件操作(创建 | 读写 | 保存 | 文件名)
- ActiveMq消息推送
- Python 调用 HTTP API 接口模板
- 机架式服务器性能,机架式服务器含义解析?其优势分析?