主要API

React.createElement

1
2
3
4
5
React.createElement(
  type, // 必填，元素类型，可以是html 标签字符串 / React 组件
  [props], // 可选，元素属性，以对象形式展现
  [...children] // 可选，嵌套在元素内的子元素
)

eg：

1
2
3
4
5
var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');

var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);

ReactDOM.render

1
ReactDOM.render(element, container, [callback])

eg: 

1
2
3
4
5
function element() {
    var reactElementUl = React.createElement(...);
    return reactElementUl;
}
ReactDOM.render(element(), document.getElementById('root');

注意点

  1. { }表达式括号里推荐注释:/**/
  2. 使用className代替class，Label标签for属性使用HtmlFor，否则报错
  3. 组件名首字母必须是大写
  4. 行内样式双花括号，jsx驼峰写法不能有“-”：如<p style={{ fontSize:'15px ',zIndex: 3 }}>
  5. 循环的key属性不能改动

单向数据流中的数据双向绑定

1
2
3
4
5
6
7
<input type='text' value={ this.state.msg } onChange={ (e) => this.txtChange(e) }/>
txtChange = (e) => {
   let newVal = e.target.value
   this.setState({
      msg: newVal
   })
}

生命周期

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
constructor(props){
    super(props);
    this.state = {}
}

// 组件即将被挂载
componentWillMount(){ }

// 页面渲染
render() {
        return ( ...<div>... )
}

// 组件加载完成
componentDidMount(){ }

// 即将被修改阶段
componentWillUpdate(){ }

// 更新完阶段 
componentDidUpdate(){ }

// 卸载前
componentWillUnmount(){ }

// 错误处理
componentDidCatch(){ }