掌握 React 组件 Component

用 React 已经许久了，虽然可以熟练的书写业务逻辑，但对 Component 却一知半解。索性写篇笔记，系统的学习一下，嗯，是时候淬炼一下了👻

一、如何创建组件

方式一：React.createClass

用 React.createClass 构建组件是 React 最传统、也是兼容最好的方法。

const Button = React.createClass({
	getDefaultProps() {
		return {
			color: 'blue',
			text: 'http://jartto.wang'
		};
	},

	render() {
		const { color, text } = this.props;

		return (
			<button className={`btn btn-${color}`}>
				<em>{text}</em>
			</button>
		);
	}
})

React.createClass 方法就是构建一个组件对象。当另一个组件需要调用 Button 组件时，只用写成

<Button/>

就可以被解析成 React.createElement(Button) 方法来创建 Button实例，这意味着在一个应用中调用几次 Button，就会创建几次 Button 实例。

方式二：ES6 classes

ES6 classes 的写法是通过 ES6 标准的类语法的方式来构建方法。

import React, { Component } from 'react';

class Button extends Component {
	constructor(props) {
		super(props);
	}

	static defaultProps = {
		color: 'blue',
		text: 'http://jartto.wang'
	}

	render() {
		return (
			<button className = { `btn btn-${color}`}>
				<em>{text}</em>
			</button>
		)
	}
}

与 createClass 的结果相同的是，调用类实现的组件会创建实例对象。在 React 组件开发中，常用的方式是将组件拆分到合理的粒度，用组合的方式合成业务组件。

React 的所有组件都继承自顶层类 React.Component，它的定义非常简洁，只是初始化了 ReactComponent 方法，声明了 props、context、refs 等，并在原型上定义了 setState 和 forceUpdate 方法。

内部初始化的生命周期方法与 createClass 方式使用的是同一个方法创建的。

方式三：无状态函数

使用无状态函数构建的组件称为无状态组件，这种构建方式是 0.14 版本之后增加的，且官方颇为推崇。

function Button({ color = 'blue', text = 'http://jartto.wang'}) {
	return (
		<button className = {`btn btn-${color}`}>
			<em>{text}</em>
		</button>
	)
}

无状态组件只传入 props 和 context 两个参数。也就是说，它不存在 state，也没有生命周期方法，组件本身即上面两种 React 组件构建方法中的 render 方法。不过，像 propType 和 defaultProps 还是可以通过向方法设置静态属性来实现。

二、不同创建组件方式的使用场景

不错，我们有很多方式来创建 React 组件，那么问题来了，我们该如何抉择？这里我们把 React.createClass 和 ES6 classes 归为一类，称作有状态组件，而 function 类型的称为无状态组件。

下来我们主要来区分有状态组件和无状态组件的适用场景。

先来假设有这样的需求：在接入一个地图功能的时候，要求数据实时刷新，那么我们有两种方式实现：
其一：通过 sockets 来推数据，在初始化组件的时候，建立连接，然后动态更改数据；
其二：在组件初始化的时候，设置定时器更新数据，组件卸载时移除定时器；

当然，方式一需要后端 sockets 处理，我们用定时器来试试。那么问题其实已经转化为：如何在 React 组件中使用定时器，下面是官方推荐的写法：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

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

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

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);

计时器要 在componentDidMount 生命周期方法挂上，然后在 componentWillUnmount 生命周期方法清除。

无状态意味着也就没有生命周期函数，那么如果是这样的话，上述功能实现将不适合使用无状态组件方式，因为你很难找到合适的时机去创建和移除定时器。

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点（详情）：

• 组件不会被实例化，整体渲染性能得到提升
  因为组件被精简成一个 render 方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
• 组件不能访问 this 对象
  无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state 等均不能访问。若想访问就不能使用这种形式来创建组件。
• 组件无法访问生命周期的方法
  因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
• 无状态组件只能访问输入的 props，同样的 props 会得到同样的渲染结果，不会有副作用。

从《深入 React 技术栈》中摘录到这样一句话：

在适合的情况下，我们都应该且必须使用无状态组件。无状态组件不像其他两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配，做到了内部优化。

对于有状态函数中的 React.createClass 和 ES6 classes 有如下区别：

• React.createClass会自绑定函数方法（不像ES6 classes只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
• React.createClass的mixins不够自然、直观；
• React.Component形式非常适合高阶组件（Higher Order Components–HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。

更多且别请移步React.createClass与React.Component区别

三、组件生命周期

关于组件生命周期，我们先来看几个概念：
1.挂载与卸载过程；
组件的挂载是最基本的过程，这个过程主要做组件状态的初始化。下面是一个模板：

import React, { Component, PropTypes } from 'react';

class App extends Component {
     // 	static 定义的 propTypes 和 defaultProps 可以在类外面访问，如：App.propTypes
	static propTypes = { //props 类型检查 };
	static defaultProps = { //默认类型 };
	constructor(props) {
		super(props);
		this.state = { //... };
	}
	componentWillMount() { // render 方法之前执行}
	componentDidMount() { // render 方法之后执行}
	render() {
		return <div>jartto's blog</div>;
	}
}

组件卸载非常简单，只有 componentWillUnmount 这一个卸载前状态：

import React, { Component, PropTypes } from 'react';

class App extends Component {
	componentWillUnmount() { //... }
	render() {
		return <div>jartto's blog</div>;
	}
}

在 componentWillUnmount 方法中，我们常常会执行一些清理方法，如事件回收或者是清除定时器。

2.生命周期；

• componentWillMount 在渲染前调用,在客户端也在服务端。
• componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
• componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
• componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

3.图示流程；

四、总结

React 中组件的使用不外乎文中写的这些，甚至在我们日常的项目中很多生命周期方法都用不到。但是作为一个开发者，我们要更深层次的理解这些，这样有助于我们使用最适当的方式去高效编程。

参考：
1.《深入 React 技术栈》
2.官方文档
3.runoob
4.React创建组件