引言：自2014年React在F8上现身之后，就迅猛的发展了起来。博主也是通过一些技术文章中了解到的，而且在很多的前端群中，对其推崇备至。博主原来开发Dojo时，也比较喜欢组件的思想。同时对新技术有强烈的学习欲望，所以在工作之余慢慢地来学习React，也买了相关的书籍来看。这篇博客主要记录一下React相关的基础，具体实例在文章的最后有推荐，相信肯定有所帮助。

 

“组件化一直是前端领域的圣杯”。

 

 

    React是一个专注于组件架构的类库，也具有一种革命性的UI组件开发思路。在其中给我们带来了新的理念和思想，如状态、虚拟DOM、组合优于继承、单向数据流等。React简单而专注，使得其更容易与其他各种技术融合使用。目前，React+Native就可以实现React-Native；用React+Canvas就可以实现一套基于canvas的高性能Web UI组件等。

 

 

    JSX即JavaScript XML，一种在React组件内部构建标签的类XML语法。使用JSX使得组件更加的可读。

   有如下特征：

（1） JSX是一种句法变换，即每一个JSX节点都对应着一个JavaScript函数。

（2） JSX既不提供也需要运行时库。

（3） JSX并没有改变或添加JavaScript的语义，只是简单的函数调用。

 

 

    博主原来使用Dojo开发，也同样有生命周期，大概如下方法：constructor、postMixinProperties、buildRendering 、postCreate、startup、destroy等，这里就不介绍了。在React的世界里，同样也有这些思路。

    在React组件的整个生命周期中，会随着该组件的props或state发生改变，其DOM也会有相应的变化。

    与大多数框架一样，React也定义了相关的hook函数，被我们称之为“钩子函数”。可以通过这些函数，在组件处于不同的时刻，进行相关的处理。我们在实现组件的过程中，主要的开发过程基本是围绕这些函数来的。同样一般框架的组件，都具有组件的初始化生成、组件的存在期和组件的销毁等时期。相对而言，React的生命周期还是比较简洁易懂的。以下从几个阶段来看相关的钩子函数。

 

 

当组件被创建时，需要经历一系列的方法，最终渲染至用户面前。依次被调用的方法如下：

 

其作用其实就如其名，即“获取默认的Props”。对于每个组件来说，该方法只会被执行一次，这个方法最终返回的就是每个组件的默认的props值，是所有实例化的组件共享的。

 

同样，观其名就可以知道，其作用是“获取初始化的state”。该方法也只被执行一次，在这个方法中，主要用于初始化state，不过跟getDefaultProps相比，还是有些不同的。getDefaultProps是所有实例共享的，而getInitialState每次实例化时，都会执行，而且也可以访问this.props了。

 

该方法即在组件初始化（首次）渲染之前被调用。在该方法中依然可以修改state，下面将运行render方法进行渲染了。

 

该方法是组件唯一一个必备的方法。在该方法中，会创建一个虚拟DOM，用于表示组件的输出，待执行ReactDOM.render();之后才会被渲染至页面上。

一般有以下的特征：

    1）通过this.props和this.state访问数据

    2）可以返回null、false或者React组件

    3）只能出现一个顶级组件，不能返回一组组件，如<input type=”text” /><span></span>这样，一般用div包裹起来，即<div><input type=”text” /><span></span></div>，这样才是合法的

    4）在方法内部不能修改组件的状态和DOM的输出

 

当rander方法调用成功，且组件已经渲染到页面上（即此时已执行了ReactDOM.render），就可以在这个方法中调用到真实的DOM节点了。获取真实的DOM通过this.getDOMNode()即可。

 

 

 

这个阶段，组件已经在页面上了，用户已经看到了，那就可以实现与用户的交互体验了。

有如下的方法：

 

当组件的props通过父辈组件来改变时，会触发此方法。在该方法中，我们可以来修改组件的props和state。

 

该方法是非必须的。一般不用实现，因为React已经非常快了。当然如果需要进行精确的优化，您可以通过该方法来实现，不过要谨慎行事了。

 

该方法与componentWillMount类似，执行条件是，在组件接受到新的props或state进行渲染之前（即运行rander之前）。但在该方法中不能更改props和state。

 

同理，该方法执行于，组件再次渲染在页面上之后执行，此时组件已经在页面上真实存在，不是虚拟DOM。

 

 

组件的销毁，即组件被移除时的操作。

 

销毁的方法是：componentWillUnmount

该方法会在组件被移除之前调用，主要做一些清理操作，比如定时器和事件等。

 

 

• React 入门实例教程
• React中文社区