React入门

Html文件里，弄一个container，但会被replace

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

js里，一个render方法，（A,B），A是组件名称，里面还能插入组件属性，如下面的name="world"，并通过this.prop.xxx调用，B是插入到html的那个标签并replace掉

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

关于组件新建，就是
React.createClass（{
XXX:XXX;
XXX:xxx;
...
}
）
就是一个对象下面各种属性方法哈
react与css
两种写法，一个写在css文件中，但要注意的是，给标签添加class时，根据es6最新特性，要写成className

<Hello name="World" className="ddd" />

另一种写法，是写在js新建组件里面，render方法return时加上style={（键值对写法）}（react规定）
来个例子

var Hello=React.createClass({
  render:function(){
      var styleObj={
                     color:"red";(react规定要以字符串形式，所以双引号)
                     fontSize:"40px"(react规定名字要驼峰式写法）
      }；
      return<div style={styleObj}></div>;
   }

生命周期和this.state

• 一张图，一个hook的理念，在creatClass方法中的hook方法进行使用，应该就把生命周期阐述完了。

• 讲到生命周期，不得不说this.state.在图中你能看到，mounting阶段，有一个getinitialState()方法是处于所有hook之前，这个方法用于定义初始状态，也就是一个对象，这个对象可以在接下来的creatClass方法通过 this.state.xxx读取属性

• 既然有了this.state了，肯定要有改变值的方法，就是this.setState，这个可谓是核心，每次修改以后，自动调用 this.render方法，再次渲染组件。就是所谓的动态改变了，弄一个例子看看

var LikeButton = React.createClass({

getInitialState: function() {

return {liked: false};

},

handleClick: function(event) {

this.setState({liked: !this.state.liked});

},

render: function() {

var text = this.state.liked ? 'like' : 'haven\'t liked';

return (

<p onClick={this.handleClick}>

You {text} this. Click to toggle.

</p>

);

}

});

ReactDOM.render(

<LikeButton />,

document.getElementById('example')

);

获取真实的dom
其实就是给标签绑定一个ref值，通过索引ref值得到真实dom节点

最后来一个实例来结束入门

var TestClickComponent=React.createClass({
  render:funtion(){
     handleClick:function(event){
      var tipE =React.findDomNode(this.refs.ddd);
       if(tipE.style.display="none")
        {
              .......
         }

     return(
              <div>
                   <button onClick={this.handleClick}>显示隐藏</button><span ref="ddd">测试点击隐藏
               <div>
         );
    }
});
var TestInputComponent=React.createClass({
 getInitialState:function(){
    return {
         inputContent:""
     }
},
 render:function(){
     changHandler:function(event){
      this.setState({
          inputContent:event.target.value
   })；


       }

     return(
        <div>
            <input type="text" onChange={this.changeHandler}}/><span>{this.state.inputContent}</span>
        <div>
     );
}
});  

React.render(
<div>
     <TestClickCompent/>
     <TestInputCompent/>
</div>
document.getElementById("container"));

• 文本输入框的值，不能用this.props.value读取，而要定义一个onChange
  事件的回调函数，通过event.target.value读取用户输入的值。textarea元素，select元素，radio元素都属于这种情况
• 尽量都使用驼峰式写法命名，能避免很多bug，有一个特别注意，组件命名第一个字母要大写的
• React的监听事件中，要获取真实的dom，有React.findDomNode(this.refs.XXX)，就是相当于原来的选择器，但这里要和文本框内容区分开
• 在render中，对两个组件用了个div包起来，因为render不能直接放两个组件
• 第一个组件，就是在button中添加事件（注意大小写）handleClick，在handClick方法中获取span的真实dom节点及其属性并进行操作
• 第二个组件中，就是一个state和setState进行动态交互的一个小例子，在 getInitialState中定义属性inputContent，并在事件对调函数中改变他进行动态输出（event.target.value）