React学习小结（三）

一、React数据的传输

1、属性和状态是react中数据传递的载体

2、属性是声明以后不允许被修改的东西

3、属性只能在组件初始化的时候声明并传入组件内部，并且在组件内部通过this.props获取

4、组件内部可以通过getDefaultProps声明默认属性

下面来说一下属性传值的两种方式：1.key-value形式 2.展开式

首先来看一下第一种传值方式：

var Demo = React.createClass({
    render:function(){
        var sty={width:'500px',height:'200px',border:'1px solid red',margin:'0 auto'}
        console.log(this.props)
        return(
            <div>
                <h1>属性字符串:{this.props.name}</h1>
                <h1>属性数组:{this.props.aa[2]}</h1>
                <div style={sty}>{this.props.bb.age}<br/>{this.props.bb.age1}<br/>{this.props.bb.age2}</div>
            </div>
        )
    }
})
var str="hello react";
var arr=['你好',2222,'hi'];
var obj={
    age:'白雪公主',
    age1:'七个小矮人',
    age2:'毒苹果'    
}
ReactDOM.render(<Demo name={str} aa={arr} bb={obj} cc={arrx} dd={arry}/>,document.getElementById("out"))
/*
 1/key-value形式  正常数据传值，组件内部this。props获取（对象）
 2/｛...｝展开式传值  传输数据对对象形式，内部获取直接获取该对象的key名
 */

 然后我们再看一下第二种展开式的传值方式：

注：展开式传值不能传字符串！非对象的形式不要用展开式传值！

ReactDOM.render(<Demo1 {...obj}/>,document.getElementById('out'))

 组合数据：

var Demo = React.createClass({
    render:function(){
        var sty={width:'500px',height:'200px',border:'1px solid red',margin:'0 auto'}
        console.log(this.props)
        return(
            <div>
                <h2>组合数据数组:{this.props.cc[1][0]}{this.props.cc[2].age}</h2>
                <h2>组合数据对象:{this.props.dd.name2.age} <br/> {this.props.dd.name3[0]}</h2>
            </div>
        )
    }
})
var arrx=[
    'hello react',
    ['你好',2222,'hi'],
    {
        age:'白雪公主',
        age1:'七个小矮人',
        age2:'毒苹果'    
    }
]
var arry = {
    name:'hello react',
    name2:{
        age:'白雪公主',
        age1:'七个小矮人',
        age2:'毒苹果'
    },
    name3:['你好',2222,'hi']
    
}
ReactDOM.render(<Demo name={str} aa={arr} bb={obj} cc={arrx} dd={arry}/>,document.getElementById("out"))

 通过演示这两种传值方式我们可以看到，属性需要在ReactDOM.render 组件名后面加如此多自定义属性这样书写代码是不优雅的，看着很不舒服，那么如何优雅呢？上面我们也提到可以通过React生命周期的一个函数来声明组件内的默认属性，来看一下是不是优雅多了：

var Demo = React.createClass({
    getDefaultProps:function(){
        return{
            res:'hi react',
            res1:[1,2,3],
            res2:{name:'小明'}
        }
    },
    render:function(){
        console.log(this.props)
        return(
            <div>
                <h1>组件内部私有属性:{this.props.res}{this.props.res1[1]}{this.props.res2.name}</h1>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById("out"))

状态传值

var Demo = React.createClass({
    getDefaultProps:function(){
        return{
            res:'hi react'
        }
    },
    getInitialState:function(){
        return{
            res:'hello state'
        }
    },
    tap:function(){
        this.setState({res:'修改状态值'})
    },
    render:function(){
        console.log(this.props)
        console.log(this.state)
        return(
            <div>
                <h1>组件内部状态值:{this.state.res}</h1>
                <button onClick={this.tap}>修改数据</button>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById("out"))

属性和状态都可以传值，不同的是属性设置后在传输中不能修改，状态传值可以通过this.setState修改，但需要注意的是不能让它无触发修改，这样会造成二次渲染，浏览器会崩溃，需把这个触发放到事件函数中。

那么通过改变状态我们可以应用在页面登陆时修改密码是否可视，下面写个小的Demo:

var Demo=React.createClass({
    getInitialState:function(){
        return{
            res:'text',
            txt:'明文框'
        }
    },
    tap:function(){
        if(this.state.res=='text'){
            this.setState({res:'password',txt:'密码框'})
        }else{
            this.setState({res:'text',txt:'明文框'})
        }
        
    },
    render:function(){
        return(
            <div>
                <input type={this.state.res} />
                <button onClick={this.tap}>{this.state.txt}</button>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById('out'))