React的数据载体state、props与context

1.state严格来说是内部状态或者说是局部状态，在React组件中是比较常见的：

state的方法主要有

1. this.state = {}一般是在构造函数constructor中设置值
2. this.setState({xx:xxx})用于给state赋值
3. this.state.xx 用于取值
4. 补充说明 取值一般会用ES6中的解析赋值操作let {xx,xx,xx} = this.state

2.props在组件中通讯比较常见的，用于父组件传递数据给子组件中，不能跨组件传递

3.验证props属性

javascript的基本数据类型包括:数组，布尔，函数，数字，字符，对象

1. React.PropTypes.array
2. React.PropTypes.boolean
3. React.PropTypes.func
4. React.PropTypes.number
5. React.PropTypes.string
6. React.PropTypes.object

说明:在ES6的写法中要写在组件上面，例如:

组件名称.propTypes = {
    xx1:React.PropTypes.func,
    xx2:React.PropTypes.object,
    ....
}

验证不能为空

组件名称.propTypes = {
    xx1:React.PropTypes.func.isRequired,
    xx2:React.PropTypes.object.isRequired,
    ....
}

4.context的认识，如果说props是父组件传递到子组件，那么context是可以跨组件之间的传递

获取context的步骤主要有

1. 将要传递的数据放在组件的context中

class MeassageList extends Component{
    getChildContext(){
        return {color:"gray"}
    }
}

2.验证组件（不是必须的）

MeassageList.childContextTypes = {
    color:React.PropTypes.string.isRequired,
}

3.在获取context组件中定义contextTypes,获取及使用见下面代码

function Button(props,context) {
    return (
        <button style={{background: context.color}}>{props.children}</button>
    )
}
Button.propTypes = {
    children: React.PropTypes.string.isRequired,
}
Button.contextTypes = {
    color:React.PropTypes.string.isRequired,
}

context跨组件之间的传递值的方式主要用于在一个组件中获取了用户信息，传递到别组件中

5.props组件中传递元素的demo

'use strict';
import React, {Component} from "react";

//创建一个组件
function Button(props) {
    return(
        <button style={{background:props.color}}>{props.children}</button>
    )
}
Button.propTypes = {
    color:React.PropTypes.string.isRequired,
    children:React.PropTypes.string.isRequired,
}

//创建第二个组件
function Message(props){
    return(
        <li>
            <p>{props.text}</p>
            <Button color={props.color}>Delete</Button>
        </li>
    )
}

Message.propTypes = {
    text:React.PropTypes.string.isRequired,
    color:React.PropTypes.string.isRequired,
}

//创建主组建
export default function MessageList() {
    const color="red";
    const message = [
        {text:'Hello React'},
        {text:'Hello Redux'},
    ];
    return(
        <div>
            <p>通过props将color逐层传递给Button组件</p>
            {
                message.map((item,index)=>(
                    <Message key={`list-${index}`} color={color} text={item.text}/>
                ))
            }
        </div>
    )
}

6.context中传递参数demo

'use strict';
import React, {Component} from "react";

//创建一个组件
function Button(props,context) {
    console.log("///",context);
    return (
        <button style={{background: context.color}}>{props.children}</button>
    )
}
Button.propTypes = {
    children: React.PropTypes.string.isRequired,
}
Button.contextTypes = {
    color:React.PropTypes.string.isRequired,
}
//创建第二个组件
function Message(props) {
    return (
        <li>
            <p>{props.text}</p>
            <Button>Delete</Button>
        </li>
    )
}

Message.propTypes = {
    text: React.PropTypes.string.isRequired,
}

//创建主组建
export default class MessageItem extends Component {
    getChildContext() {
        return {color:"gray"};
    }

    render() {
        const message = [
            {text: 'Hello React'},
            {text: 'Hello Redux'},
        ];
        return (
            <div>
                <p>通过props将color逐层传递给Button组件</p>
                {
                    message.map((item, index) => (
                        <Message key={`list-${index}`} text={item.text}/>
                    ))
                }
            </div>
        )
    }
}
MessageItem.childContextTypes = {
    color:React.PropTypes.string.isRequired,
}