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修复