React的数据载体state、props与context

1.

state

严格来说是内部状态或者说是局部状态，在

React

组件中是比较常见的：

state

的方法主要有

this.state = {}

一般是在构造函数

constructor

中设置值

this.setState({xx:xxx})

用于给

state

赋值

this.state.xx

用于取值

补充说明 取值一般会用

ES6

中的解析赋值操作

let {xx,xx,xx} = this.state

2.

props

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

3.验证

props

属性

javascript

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

React.PropTypes.array

React.PropTypes.boolean

React.PropTypes.func

React.PropTypes.number

React.PropTypes.string

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

的步骤主要有

将要传递的数据放在组件的

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