react入门

laiqun@msn.cn

1. react要解决的问题

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

2. react中CSS的写法

1. css类选择器的写法: 以前是class,现在要改成className，原因是和ES6的javascript语法冲突，ES6可以用class类定义类

<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的生命周期

生命周期图

状态说明：

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

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

1111

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>

);

});

回调函数中:更新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>
       );
}
});