React 组件

React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记

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()
|---------------------     |----------------------