前言
经过前面的努力相信目前读者对于用 React 开发一些简单的组件（Component）已经有一定程度的掌握了，现在我们将更细部探讨 React Component 的规格和其生命周期。
React Component 规格
若读者还有印象的话，我们前面介绍 React 特性时有描述 React 的主要撰写方式有两种：一种是使用 ES6 Class，另外一种是 Stateless Components，使用 Functional Component 的写法，单纯渲染 UI。这边再帮大家复习一下上一个章节的简单范例：
-
使用 ES6 的 Class（可以进行比较复杂的操作和组件生命周期的控制，相对于 stateless components 耗费资源）
// 注意组件开头第一个字母都要大写 class MyComponent extends React.Component { // render 是 Class based 组件唯一必须的方法（method） render() { return ( <div>Hello, {this.props.name}</div> ); } } // PropTypes 验证，若传入的 props type 不符合将会显示错误 MyComponent.propTypes = { name: React.PropTypes.string, } // Prop 预设值，若对应 props 没传入值将会使用 default 值，为每个实例化 Component 共用的值 MyComponent.defaultProps = { name: '', } // 将 <MyComponent /> 组件插入 id 为 app 的 DOM 元素中 ReactDOM.render(<MyComponent name="Mark"/>, document.getElementById('app')); -
使用 Functional Component 写法（单纯地 render UI 的 stateless components，没有内部状态、没有实作物件和 ref，没有生命周期函数。若非需要控制生命周期的话建议多使用 stateless components 获得比较好的效能）
// 使用 arrow function 来设计 Functional Component 让 UI 设计更单纯（f(D) => UI），减少副作用（side effect） const MyComponent = (props) => ( <div>Hello, {props.name}</div> ); // PropTypes 验证，若传入的 props type 不符合将会显示错误 MyComponent.propTypes = { name: React.PropTypes.string, } // Prop 预设值，若对应 props 没传入值将会使用 default 值 MyComponent.defaultProps = { name: '', } // 将 <MyComponent /> 组件插入 id 为 app 的 DOM 元素中 ReactDOM.render(<MyComponent name="Mark"/>, document.getElementById('app'));
值得留意的是在 ES6 Class 中 render() 是唯一必要的方法（但要注意的是请保持 render() 的纯粹，不要在里面进行 state 修改或是使用非同步方法和浏览器互动，若需非同步互动请于 componentDidMount() 操作），而 Functional Component 目前允许 return null 值。 喔对了，在 ES6 中也不支援 mixins 复用其他组件的方法了。
React Component 生命周期
React Component，就像人会有生老病死一样有生命周期。一般而言 Component 有以下三种生命周期的状态：
- Mounting：已插入真实的 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实的 DOM
针对 Component 的生命周期状态 React 也有提供对应的处理方法：
- Mounting
- componentWillMount()
- componentDidMount()
- Updating
- componentWillReceiveProps(object nextProps)：已载入组件收到新的参数时呼叫
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时呼叫，起始不会呼叫除非呼叫 forceUpdate()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- Unmounting
- componentWillUnmount()
很多读者一开始学习 Component 生命周期时会觉得很抽象，所以接下来用一个简单范例让大家感受一下 Component 的生命周期。读者可以发现当一开始载入组件时第一个会触发 console.log('constructor');，依序执行 componentWillMount、componentDidMount ，而当点击文字触发 handleClick() 更新 state 时则会依序执行 componentWillUpdate、componentDidUpdate：
HTML Markup：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://fb.me/react-15.1.0.js"></script> <script src="https://fb.me/react-dom-15.1.0.js"></script> <title>Component LifeCycle</title> </head> <body> <div id="app"></div> </body> </html>
Component 生命周期展示：
class MyComponent extends React.Component { constructor(props) { super(props); console.log('constructor'); this.handleClick = this.handleClick.bind(this); this.state = { name: 'Mark', } } handleClick() { this.setState({'name': 'Zuck'}); } componentWillMount() { console.log('componentWillMount'); } componentDidMount() { console.log('componentDidMount'); } componentWillReceiveProps() { console.log('componentWillReceiveProps'); } componentWillUpdate() { console.log('componentWillUpdate'); } componentDidUpdate() { console.log('componentDidUpdate'); } componentWillUnmount() { console.log('componentWillUnmount'); } render() { return ( <div onClick={this.handleClick}>Hi, {this.state.name}</div> ); } } ReactDOM.render(<MyComponent />, document.getElementById('app'));
其中特殊处理的函数 shouldComponentUpdate，目前预设 return true。若你想要优化效能可以自己编写判断方式，若采用 immutable 可以使用 nextProps === this.props 比对是否有变动：
shouldComponentUpdate(nextProps, nextState) { return nextProps.id !== this.props.id; }
Ajax 非同步处理
若有需要进行 Ajax 非同步处理，请在 componentDidMount 进行处理。以下透过 jQuery 执行 Ajax 取得 Github API 资料当做范例：
HTML Markup：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://fb.me/react-15.1.0.js"></script> <script src="https://fb.me/react-dom-15.1.0.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <title>GitHub User</title> </head> <body> <div id="app"></div> </body> </html>
app.js
class UserGithub extends React.Component { constructor(props) { super(props); this.state = { username: '', githubtUrl: '', avatarUrl: '', } } componentDidMount() { $.get(this.props.source, (result) => { console.log(result); const data = result; if (data) { this.setState({ username: data.name, githubtUrl: data.html_url, avatarUrl: data.avatar_url }); } }); } render() { return ( <div> <h3>{this.state.username}</h3> <img src={this.state.avatarUrl} /> <a href={this.state.githubtUrl}>Github Link</a>. </div> ); } } ReactDOM.render( <UserGithub source="https://api.github.com/users/torvalds" />, document.getElementById('app') );
总结
以上介绍了 React Component 规格与生命周期（Life Cycle）的概念，其中生命周期的概念对于初学者来说可能会比较抽象，建议读者跟着范例动手实作。接下来我们将更进一步介绍 React Router 让读者感受一下单页式应用程式（single page application）的设计方式。
