FaceBook在2013年发布了他们最新使用的前端库－React。一个纯View的前端库，只关心View层次的逻辑，React和现有的mvc/mvvc框架（如Angular/vue）侧重点不同，前者侧重View层面的渲染，后者则像提供了一整套工具，更像一个系统。

最近组内项目在逐渐往React迁移，这里记录自己的学习React的过程，如有错误，请各位童鞋斧正。

初步的学习分享顺序会是：

  • React基础API
  • React生命周期
  • React组件
  • React组件之间的通信
  • 搭配flux/Redux
  • React路由
  • React优化
  • React项目构建

希望自己能够坚持下来。

什么是组件

组件（Component）是对数据和方法的简单封装，可以把它比作一个黑盒子，我们不用关心组件内部实现的具体细节，只需要关心组件暴露出的API(Application Programming Interface)。可以做一个比喻，那我们的智能手机来说，它是由一个个的元器件组成的，不同的元器件之间通过电路进行连接，元器件就相当于我们web页面中的组件，元器件之间的电路物理连接就是组件之间的API，通过将负责的智能手机拆分成一个个的元器件，然后不同的元器件由不同的厂商制作，在给出的元器件接口属性中，就可以被运用组成不同的电子产品。同理，web页面也可以由一个个组件组成。可以在不同的页面复用同一个组件。

有状态组件 Vs 无状态组件

在React中，每个组件都拥有状态，一些组件是纯view的组件，没有状态(state)的概念，例如下面的ImgView组件

1
2
3
4
5
6
7
8
9
10
var React = require('react');
var ReactDOM = require('react-dom');
var ImgView = React.createClass({
  render: function(){
    return (
      <img src={this.props.imgSrc} alt={this.props.imgAlt} class="img" />
    );
  }
ReactDOM.render(<ImgView imgSrc="xxxx.jpg" alt="This is a image!"/>, document.getElementById("wraper"));
});

上面是兼容ES5浏览器语法，使用的是一种React专有的DSL语法－JSX，render函数中返回的就是组件的虚拟HTML结构，通过ReactDOM进行动态DOM渲染，其中的imgSrc和alt就是在实例化组件时传到组件内部的属性。
都2017年了大哥，ES6也来一套把？(ES6作为ES5的语法糖，用着确实还挺甜的org)

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from "react-dom";

Class ImgView extends React.Component {
  render(){
    return <img src={this.props.imgSrc} alt={this.props.imgAlt} class="img" />;
  }
}
ReactDOM.render(<ImgView imgSrc="xxxx.jpg" alt="This is a image!"/>, document.getElementById("wraper"));

我们可以看到无状态组件很简单，就只需要按照传进来的参数进行相应的render就ok了。不过web应用中不都是这些纯view的组件，还有相当一部分组件需要拥有状态(state)。比如倒计时组件，这类组件，它不仅仅接受父组件传来的参数，而且本身就像一个状态机，状态会随着时间/用户的交互等发生变化，需要更新自身来响应这种变化。这类组件往往中间需要考虑的情况比无状态组件要多，可能父组件传来的Props发生变化就会引起它组件的状态变化。比如

1
2
3
4
5
6
componentWillRecieveProps: function(nextProps){
  if(this.props.id !== nextProps.id）{/*判断条件*/
    this.setState(newState); //重新设置state
  }
  return;
}

关于componentWillRecieveProps，这个是React组件的生命周期函数，通俗点来说就是钩子函数，能够让我们在组件在不同的情况下调用相关的函数以完成我们的要求。

小结

  • 在React中是由组件构成的世界
  • 组件是一个相对独立的个体
  • 组件分为有状态和无状态组件
  • state代表的是可变的数据，props代表的是相对不变的数据