reactjs学习手记（2）

属性和状态详解

属性的含义和用法

属性的含义

props = properties属性：一个事物的行至与关系属性往往是与生俱来、无法自己改变的

属性的用法

1、<Hello name=? /> ?可以是字符串、{123}、{"123"}、{[1,2,3]}、{variable}、函数

<script src="./react.js"></script><script src="./JSXTransformer.js"></script><script src="./jquery-3.1.1.min.js"></script><script type="text/jsx">$(document).ready(    function(){        var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素        //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM            render: function(){                console.log('render,4');                return <p>Hello {this.props.name?this.props.name:"World"}<br/></p>            }        });        var World = React.createClass({            getInitialState:function(){                return {name:'Ray'};            },            handleChange:function(event){                this.setState({name:event.target.value});            },            render:function(){                return <div>                    <Hello name={this.state.name}></Hello>                    <br/>                    <input type="text" onChange={this.handleChange} />                </div>            }        });        var style ={            color:'red',            border:'1px #000 solid'        };        var count = 0;        React.render(<div style={style}><World></World></div>,document.body);    });</script>    

2、<Hello{...props}>        var props={        one:"123",        two:321    }

<script src="./react.js"></script><script src="./JSXTransformer.js"></script><script src="./jquery-3.1.1.min.js"></script><script type="text/jsx">$(document).ready(    function(){        var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素        //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM            render: function(){                console.log('render,4');                return <p>Hello {this.props.name1 + ' ' + this.props.name2}<br/></p>            }        });        var World = React.createClass({            getInitialState:function(){                return {name1:'Tom',                        name2:'Jack'                        };            },            handleChange:function(event){                this.setState({name:event.target.value});            },            render:function(){                return <div>                    <Hello {...this.state}></Hello>                    <br/>                    <input type="text" onChange={this.handleChange} />                </div>            }        });        var style ={            color:'red',            border:'1px #000 solid'        };        var count = 0;        React.render(<div style={style}><World></World></div>,document.body);    });</script>

3、var instance =React.render(<Hello></Hello>); //一般不用这种方法    instance.setProps({name:"Tim"}); 

<script src="./react.js"></script><script src="./JSXTransformer.js"></script><script type="text/jsx">    var Hello = React.createClass({        render: function(){            return <p>Hello {this.props.name || "World"}<br/></p>        }    });    var style ={        color:'red',        border:'1px #000 solid'    };    var instance = React.render(<div style={style}><Hello></Hello></div>,document.body);     //此处不能加上style={style}？，去掉之后可以正常set进去    instance.setProps({name:'Ray'});</script>

状态的含义和用法

状态的含义

state状态：事物所处的状况状态是由事物自行处理、不断变化的

状态的用法

getInititalState

初始化每个实例特有的状态

setState：

更新组件状态    会调用diff算法

demo

<script src="./react.js"></script><script src="./JSXTransformer.js"></script><script type="text/jsx">    var Hello = React.createClass({        render: function(){            return <p>Hello {this.props.name || "World"}<br/></p>        }    });    var style ={        color:'red',        border:'1px #000 solid'    };    var World = React.createClass({        getInitialState:function(){            return {                name:'Ray'            };        },        handleChange:function(event){            this.setState({name:event.target.value});        },        render:function(){            return <div>                <Hello name={this.state.name}></Hello>                  <br/>                <input type="text" onChange={this.handleChange} />            </div>        }    });    var instance = React.render(<div style={style}><World></World></div>,document.body);</script>

属性和状态的对比

属性和状态的相似点

都是纯js对象

都会触发render更新

都具有确定性

属性和状态的大对比

状态之和组建自己相关
组建不能修改属性

区分属性和状态的方法

是否需要运行时修改状态会在运行时修改所有的状态都可以变为属性

属性和状态实战

项目分析

编写一个简单的文章评论框

1、分析构成项目的组建    评论框    内容2、分析组件的关系及数据传递

3、编写代码

第一版代码编写

<script src="./react.js"></script><script src="./JSXTransformer.js"></script><script type="text/jsx">    var Hello = React.createClass({        getInitialState:function(){            return {                inputText:""    //只会在初始化时调用            }        },        handleChange:function(event){            this.setState({inputText:event.target.value});        },        handleSubmit:function(){            //把需要计算的属性放在调用的方法中，getInitialState只会在初始化的时候调用            console.log("reply To: " + this.props.selectName + "\n" + this.state.inputText);        },        render: function(){            return <div>            <textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>            <button onClick={this.handleSubmit}>submit</button>            </div>        }    });    var Comment = React.createClass({        getInitialState:function(){            return {            names:["Ray","Jack","Tom"],            selectName:''};        },        handleSelect:function(event){            this.setState({selectName:event.target.value});        },        render:function(){            var options =[];            for(var option in this.state.names){                options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)            }            return <div>            <select onChange={this.handleSelect}>                    {options}                </select>            <Hello selectName={this.state.selectName}></Hello>            </div>        }    });             var instance = React.render(<Comment></Comment>,document.body);</script>

bug修复