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,}