前端领域资料整理阅书常乐随笔日志

React的学习笔录.

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

一、简介

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

二、 JSX

 
    JSX即JavaScript XML,一种在React组件内部构建标签的类XML语法。使用JSX使得组件更加的可读。
   有如下特征:
(1) JSX是一种句法变换,即每一个JSX节点都对应着一个JavaScript函数。
(2) JSX既不提供也需要运行时库。
(3) JSX并没有改变或添加JavaScript的语义,只是简单的函数调用。
 
二、 Component(组件)的生命周期
 
    博主原来使用Dojo开发,也同样有生命周期,大概如下方法:constructor、postMixinProperties、buildRendering 、postCreate、startup、destroy等,这里就不介绍了。在React的世界里,同样也有这些思路。
    在React组件的整个生命周期中,会随着该组件的props或state发生改变,其DOM也会有相应的变化。
    与大多数框架一样,React也定义了相关的hook函数,被我们称之为“钩子函数”。可以通过这些函数,在组件处于不同的时刻,进行相关的处理。我们在实现组件的过程中,主要的开发过程基本是围绕这些函数来的。同样一般框架的组件,都具有组件的初始化生成、组件的存在期和组件的销毁等时期。相对而言,React的生命周期还是比较简洁易懂的。以下从几个阶段来看相关的钩子函数。
 
1. 实例化(初始化)阶段
 
当组件被创建时,需要经历一系列的方法,最终渲染至用户面前。依次被调用的方法如下:
 
(1)getDefaultProps
其作用其实就如其名,即“获取默认的Props”。对于每个组件来说,该方法只会被执行一次,这个方法最终返回的就是每个组件的默认的props值,是所有实例化的组件共享的。
 
(2)getInitalState
同样,观其名就可以知道,其作用是“获取初始化的state”。该方法也只被执行一次,在这个方法中,主要用于初始化state,不过跟getDefaultProps相比,还是有些不同的。getDefaultProps是所有实例共享的,而getInitialState每次实例化时,都会执行,而且也可以访问this.props了。
 
(3)componentWillMount
该方法即在组件初始化(首次)渲染之前被调用。在该方法中依然可以修改state,下面将运行render方法进行渲染了。
 
(4)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的输出
 
(5)componentDidMount
当rander方法调用成功,且组件已经渲染到页面上(即此时已执行了ReactDOM.render),就可以在这个方法中调用到真实的DOM节点了。获取真实的DOM通过this.getDOMNode()即可。
 
 
2. 存在期,即已经被渲染至页面上的阶段
 
这个阶段,组件已经在页面上了,用户已经看到了,那就可以实现与用户的交互体验了。
有如下的方法:
 
(1)componentWillReceiveProps
当组件的props通过父辈组件来改变时,会触发此方法。在该方法中,我们可以来修改组件的props和state。
 
(2)shouldComponentUpdate
该方法是非必须的。一般不用实现,因为React已经非常快了。当然如果需要进行精确的优化,您可以通过该方法来实现,不过要谨慎行事了。
 
(3)componentWillUpdate
该方法与componentWillMount类似,执行条件是,在组件接受到新的props或state进行渲染之前(即运行rander之前)。但在该方法中不能更改props和state。
 
(4)componentDidUpdate
同理,该方法执行于,组件再次渲染在页面上之后执行,此时组件已经在页面上真实存在,不是虚拟DOM。
 
3. 销毁
 
组件的销毁,即组件被移除时的操作。
 
销毁的方法是:componentWillUnmount
该方法会在组件被移除之前调用,主要做一些清理操作,比如定时器和事件等。
 
三、入门实例
 
在这里推荐一篇文章”React 入门实例教程“,相信这篇文章应该可以帮你了解相关React的使用。
如有问题,欢迎指出;如需转载,请标明出处,谢谢!
 
参考资料