React 组件

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

React 使用

  • 加载 React

    
    

    Hello

React 组件

  • 组件创建

    // index.js
    var React = require('react')
    var ReactDOM = require('react-dom')
    
    class Index extends React.Component {
      render() {
        

    Hello World!!!

    } } // React 入口定义 ReactDOM.render( , // 用 Index 组件 document.getElementById('main') // 绑定到 index.html 里的 main 标签 );
  • 外部组件创建

    // ComponentName.js
    var React = require('react')
    
    // 外部组件必须 export 才能被加载
    export default class ComponentName extends React. Component {
      render() {
        

    页面组件

    } }
  • 外部组件导入

    // 导入路径可以忽略 .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()
|---------------------     |----------------------

你可能感兴趣的:(React 组件)