React组件之Clock

这个例子是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。可以看出来编程理念都是大同小异。组件化实际上就是模块化，提高了代码的复用性和可维护性。