1.基本开发环境

• 选择 reate-react-app或 create-react-app-antd

2.搭建路由

• 一个简单路由的搭建

3.语法规范

• 定义标签时，只允许被一个标签包裹
• 标签一定要闭合
• 声明组件的首字母必须大写
• class属性改为className，for属性改为HTMLFor

4.diff算法

• 给定任意两棵树，找到最少的转换步骤
• 通过两个简单的假设，将复杂度从O(n^3)降低到O(n)
  1.两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构
  2.对于同一层次的一组子节点，它们通过唯一的id进行区分
• 逐级：只在同级的节点间移动
• 列表：提供一个key属性，以帮助react找出映射
• 组件：仅匹配具有相同类的组件
• 事件委托：为每个事件和每个侦听器创建一个新的事件对象
• 渲染：批处理，子树渲染，选择性子树渲染

5.组件的构建方法

• React.createClass：最传统，兼容性最好的方法
• ES6 classes：通过ES6标准的类语法来构建
• 无状态函数：只传入props和context两个参数，不存在state和生命周期方法

6.组件的生命周期

• React组件的生命周期

7.state与props属性

1.prop属性

• this.prop：接收外来模块的属性参数
• propTypes：规范检查

2.state属性

• super()：调用基类的所有初始化方法
• this.state：初始化参数
• this.setState：修改初始化参数
• this.setState.attribute：读取对应属性的值

3.props和state的对比

• props是组件的对外接口，state是组件的内部状态
• props的值不应该被改变，state可以被改变

8.受控组件

import React, { Component } from 'react';
import './App.css';
export default class App extends Component {
  constructor() {
      super();
      this.state = {
        value:'',
      }
  }
  handleChange(e){
    this.setState({
      value:e.target.value,
    })
  }
  render() {
    return (
      <div>
        <input onChange={this.handleChange.bind(this)} value={this.state.value} />
        <h3>{this.state.value}</h3>
      </div>
    )
  }
}

ReactDOM的API

• findDOMNode
• render
• unmountComponentAtNode