react笔记1-组件

Posted on   |   In   |  

看了下react 第一感觉就是组件化做的挺好,思路挺清楚 按他的规范应该能把sap拆的干干净净
最终维护一个state的目标也和之前的程序近似
jsx也算挺好使, chrome装个插件还能直接监控state什么的, 挺好

script type=”text/jsx”

demo

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//"text/jsx"里可以直接打断点
//子组件
var SubContent = React.createClass({
  render: function(){
    return (
      <div>
        <div>{this.props.json.arg1}</div>
        <div>{this.props.json.arg2}</div>
      </div>
    );
  }
});
//父组件
var ListContent = React.createClass({//组件名要大写
  getInitialState: function() {//初始化的生命周期hook
    return {
      click: false,//相当于初始化this.state.click = false
      json: {
        arg1: "one",
        arg2: "two"
      }
    };
  },
  clickHandler: function() {
    this.setState({//维护State
      click: true
    });
    var ref = this.refs.textInputRef;//因为是虚拟Dom,所以要通过this.refs查找
    alert("textInputRef value is==> "+ref.value);
  },
  render: function() {
    //jsx语法, 代码用{}包裹, html用<>包裹
    //点button 从textInputRef里拿value展示
    return (
      <div>
        <button disabled={this.state.click} onClick={this.clickHandler}>get ref</button>
        <input type="text" ref="textInputRef" value="_ref_" />
        {/*<!-- 子组件(写html注释还挺麻烦...) -->*/}
        <SubContent json={this.state.json}/>
      </div>
    );
  }
});
//把组件, 渲染到指定dom
ReactDOM.render(<ListContent />, document.getElementById('example1'));

生命周期hook

getInitialState: 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

componentWillMount: 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用setState，render() 将会感知到更新后的 state，执行仅一次

componentDidMount: 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。
还有更多的更新组件方法

componentWillReceiveProps: 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用

shouldComponentUpdate: 在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用

componentWillUpdate: 在 state 改变的时候执行一些操作