react入门

标签：

1.?react要解决的问题

降低页面从服务器和用户输入得到数据，来展示页面的过程的复杂性。

2.?react中CSS的写法

<style>

.alert-text{

 color:red;

}

</style>

<script type="text/jsx">

var Hello = React.createClass({

 render:function() {

     return <div className="alert-text">Hello {this.props.name} </div>;

 //{xxx}表示执行javascript表达式xxx 

 }

});

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

</script>

2. 内联样式的写法:styleObj的方法 ,并赋值给相应的组件属性

style="color:red" 

//在组件的属性里这样会报错，不再使用字符串的方式，而是使用对象，对象的每个键用驼峰命名

styleObje = {

  color:"red",

  fontSize:"44px"

};

var Hello = React.createClass({

    render:function() {

        return <div style ={styleObj} >Hello {this.props.name} </div>;

    //{xxx}表示执行javascript表达式xxx    

    }

});

3.?react的生命周期

1. 生命周期图 

状态说明：

• Mounted：React Components被render解析生成相应的DOM节点，并被插入浏览器的DOM结构的一个过程。通俗的说就是能看到相应的节点时，就是Mounted完成了
• Update: 一个mounted的Component被重新render的过程，只有state确实发生改变且影响到了DOM结构的时候，才重新渲染
• Unmount: 一个mounted的Componet对应的DOM结构被从DOM结构中移除的过程。

2. hook说明图：上图的每一个状态，都添加了相应的hook函数，详见下图

props和state的对比、相关性

• 对比：props是有父组件传递给子组件的，一般认为给定了之后，不怎么发生变化;而state是组件私有的
• 相关性：componentWillReceiveProps接收到props之后，可以对比之前的props，决定是否更新组件的state

4.?react的事件绑定

命名方式：(类似onClick的驼峰命名，区别于原生html的全小写) 用props的方式存自身函数 

1. 回调函数中:获取到子组件的DOM(需要使用ref属性),操作DOM

var TestClickComponent = React.createClas({

    handleClicik:function(e){

        var tipE = React.findDOMNode(this.refs.tip);

        if(tipE.style.display === "none"){

            tipE.style.display ="inline";

        }else{

            tipE.style.display ="none";

        }

        e.stopPropagation();

        e.preventDefault();

    }

    render:function(){

        return (

            <div>

                <button onClick={this.}>显示|隐藏</button> <span ref="tip">测试点击</span>

            </div>

            );

    }

});  

2. 回调函数中:更新state,引起相应重绘

   var TestInputComponent = React.createClass({
   getInitialState:function() {
      return {
            inputContent:‘‘
      };
   },
   changeHandler:function(e){
      this.setState({
          inputContent:e.target.value
      });
      e.preventDefault();
      e.stopPropagation();
   }
   render:function(){
      return (
          <div>
              <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
          </div>
          );
   }
   });  

react入门

标签：

原文地址：http://www.cnblogs.com/laiqun/p/5558608.html