React 使用

加载 React

<!-- index.html -->
<div id="main">
  <h1>Hello</h1>
</div>
<script src="./src/bundle.js"></script>

React 组件

组件创建

// index.js
var React = require('react')
var ReactDOM = require('react-dom')

class Index extends React.Component {
  render() {
    <h1>Hello World!!!</h1>
  }
}

// React 入口定义
ReactDOM.render(
  <Index />,                          // 用 Index 组件
  document.getElementById('main')     // 绑定到 index.html 里的 main 标签
);

外部组件创建

// ComponentName.js
var React = require('react')

// 外部组件必须 export 才能被加载
export default class ComponentName extends React. Component {
  render() {
    <h1>页面组件</h1>
  }
}

外部组件导入

// 导入路径可以忽略 .js 扩展名
import ComponentName from './ComponentName';

组件的 return 函数返回的 HTML 节点必须只能一个

React 组件的生命周期

| component instantiated   | props changed                 | setState()                              | component deleted
|------------------------  |---------------                |------------                             |-------------------
|                          |                               |                                         |
|                          |                               |                                         |
| getDefaultProps()        | componentWillReceiveProps()   |                                         |
|-------------------       |-----------------------------  |                                         |
|                          |                               |                                         |
|                          |                               | [setState() doesn't trigger re-render]  |
|                          |                               |                                         |
| getInitialState()        | shouldComponentUpdate() |-----|                                         |
|-------------------       |--------------------------                                               |
|                          |                                                                         |
|                          | [true]                                                                  |
|                          |                                                                         |
|--------------------------|                                                                         |
|                                                                                                    |
| render() |---------------|                                                                         |
|-----------               |                                                                         |
|                          |                                                                         |
|                          |                                                                         |
| [First time]             | [After first time]                                                      |
|                          |                                                                         |
|                          |                                                                         |
| componentWillMount()     | componentWillUpdate()                                                   | componentWillUnmount()
|----------------------    |-----------------------                                                  |------------------------
|                          |
|                          |
| componentDidMount()      | componentDidUpdate()
|---------------------     |----------------------