React组件之Clock

栏目: IOS · Android · 发布时间: 6年前

内容简介:这个例子是React官方文档里面的,代码也在CodePen,例子非常简单,展示了React组件开发的基本过程,这里将这个例子进行分析记录,当做学习笔记吧!首先看代码:程序的运行过程:1、在html里面定义一个div,id为root

这个例子是React官方文档里面的,代码也在CodePen,例子非常简单,展示了React组件开发的基本过程,这里将这个例子进行分析记录,当做学习笔记吧!首先看代码:

//HTML
 <div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

//JS
function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
复制代码

程序的运行过程:

1、在html里面定义一个div,id为root

2、 调用ReactDOM.render使用App渲染id为root的div,这里会调用函数App

3、函数App返回的是什么呢?不是字符串,也不是HTML,而是JSX,JSX是JavaScript语法的扩展,Babel会将JSX编译成React.createElement()的调用,这里可以简单看成返回界面布局就行了

4、在函数App返回的布局中,有三个Clock组件,Clock组件继承React.Component,当被传入ReactDOM.render中后,会调用Clock构造方法

5、在Clock构造方法可以接收一个props, 它来保存组件的组件的属性,这里并没有传入任何属性值,在构造方法里面初始化组件的状态state,给状态设置了date字段

6、接下来会调用Clock的render方法来渲染组件,render方法也是返回了JSX,里面有Hello World的标题,并且调用FormattedDate函数,传入参数date,返回时间的JSX,在FormattedDate函数里通过props.date获取传入的date

7、这时候就已经可以看到三个Clock显示时间了

8、那时间怎么自动更新的呢?当Clock被插入DOM时,会触发componentDidMount,当Clock从DOM移除时,会触发componentWillUnmount,所以在componentDidMount调用时开始定时更新,在componentWillUnmount关闭定时更新

9、定时更新会调用tick方法,tick方法调用setState来更新date字段

10、setState方法会触发render方法的重新调用,进而更新时间

由于笔者之前是做移动端开发,React的组件的概念跟iOS和Android的View的概念基本一致,甚至一些方法可以对应的上,如componentDidMount和componentWillUnmount可对应Android View中的onAttachedToWindow和onDetachedFromWindow, Clock中的render可对应Android View中的onDraw。可以看出来编程理念都是大同小异。组件化实际上就是模块化,提高了代码的复用性和可维护性。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Imperfect C++中文版

Imperfect C++中文版

威尔逊 / 荣耀、刘未鹏 / 人民邮电出版社 / 2006-1 / 75.0

汇集实用的C++编程解决方案,C++虽然是一门非凡的语言,但并不完美。Matthew Wilson使用C++十年有余,其间发现C++存在一些固有的限制,需要一些颇具技术性的工作进行弥补。本书不仅指出了C++的缺失,更为你编写健壮、灵活、高效、可维护的代码提供了实用的技术和工具。Wilson向你展示了如何克服C++的复杂性,穿越C++庞大的范式阵列。夺回对代码的控制权,从而获得更理想的结果。一起来看看 《Imperfect C++中文版》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具