初入react -01

类似vue的data(){return {}}，用于初始化变量。

getInitialState: function() {
    return {
        color: false,
        msg: 'SharkChilli',
    }
},    

类似vue的props，用于从外部向内部（父 -> 子）传值

propTypes: {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number.isRequired,
}

生命周期钩子，类似vue的mounted

componentDidMount: function() {
  $.get(this.props.source, function(result) {
    var data = result.data;
    if (this.isMounted()) {     // 判断是否执行过componentDidMount函数
      this.setState({
        color: data.color,
        msg: data.msg
      });
    }
  }.bind(this));   // 绑定到react实例,貌似不bind的话  this.xx是undefind
},

<UserGist source="https://api.github.com/users/octocat/gists" />,    // 组件

 类似vue的slot，操作组件不在render内的html元素

render: function() {
    return (
       <ol>
       {
          React.Children.map(this.props.children, function (child) {
             return <li>{child}</li>;
          })
        }
        </ol>
     );
 }

 ReactDOM.render(
   <NotesList>
      <span>hello</span>    //外部传入的html元素
      <span>world</span>
   </NotesList>,
   document.getElementById('example')
 );

用于改变初始化的变量

setColor(event){
      this.setState({
　　　　　　color: event.target.class

　　　　})
}

jsx模板（在这里操作初始化后的变量）

render() {
    var ctr = this.state.ctr ? '[]~(￣▽￣)~*' : ~~(>_<)~~;
    return <h1 ref="myH1"  onClick={this.setColor}>{color}</h1>;
}

 挂载到页面

ReactDOM.render(
    <LikeButton title={tog} />,
    document.getElementById('div')
)

 react可以自动展开数组，不过要循环渲染出来操作数据之后的 数组，貌似只能用arr.map()

var repoList = repos.map(function (repo, index) {
    return (
       <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
    );
});
return (
   <main>
      <h1>array</h1>
      <ol>{repoList}</ol>
   </main>
);

var names = ['Alice', 'Emily', 'Kate'];
    ReactDOM.render(
        <div>
        {
          names.map(function (name, index) {
             return <div key={index}>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
    );

 var arr = [
    <h1 key="1">Hello world!</h1>,
    <h2 key="2">React is awesome</h2>,
  ];
 ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
 );