react笔记-数据载体state/props/context

2017-09-13 20:32:57来源:CSDN作者:qq_14863671人点击

分享

1.state

        state应该称为内部状态或局部状态,react组件可以在构造函数中初始化内部状态,可以通过this.setState方法更新内部状态,还可以使用this.state获取内部状态,内部状态的操作与react事件系统配合可以实现用户交互的功能。 
import React, { Component } from 'react';
//content组件
function Content(props){
    return <p>props.value: {props.value}</p>
}
class App extends Component {
   //在构造函数中初始化内部状态,构造函数仅在实例化一个类的时候被调用
    constructor(){
        //子类的构造函数中,必须先调用super(),才能使用this获取实例化对象
        super();
        this.state = {value : 0};
    }
  render() {
    return (
      <div className="App">     
        //内部状态state和事件,点击button更改value的状态
        <button onClick = {() => this.setState({value : this.state.value + 1})}>按下</button>
        <pre>{this.state.value}</pre>
        //props
        <Content value={this.state.value} />
      </div>
    );
  }
}
export default App;

2.props

        使用props向react组件传递数据,react组件从props中拿到数据,然后返回视图(逐层传递)。
使用props:
        将数据写在组件标签的属性中,在无状态函数编写的组件中获取props只需要将props作为参数传入组件,在使用类编写的组件中,需要通过this.props获取props。
验证props:
        验证props需要使用React.propTypes,它提供很多验证器来验证传入数据是否合法,当向props传入非法数据时,控制台会抛出警告。
 
Content.propTypes = {
    value : PropTypes.number
}
验证器:
  • javascript基本数据类型:React.PropTypes.array/bool/func/number/object/string
  • 可以被渲染为子节点的对象:React.PropTypes.node
  • ReactElement(JSX中的闭合标签):React.PropTypes.element
  • 指定类的实例:React.PropTypes.instanceOf(Message)
  • 只接受指定的值:React.PropTypes.oneOf([ ' News ' , ' Photos ' ])
  • 多个对象类型中的一个:
 
React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Message)
])
  • 指定类型组成的数组:React.PropTypes.arrayOf(React.PropTypes.number)
  • 指定类型的属性构成的对象:React.PropTypes.objectOf(React.PropTypes.number)
  • 符合指定格式的对象:
 
React.PropTypes.shape({
    color : React.PropTypes.string,
    fontSize : React.PropTypes.number
})
  • 任意类型加上isRequired使其不可为空:React.PropTypes.func.isRequired
  • 自定义验证器
 
function(props, propName, componentName){
    if(!/matchme/.test(props[propName])){
        return new Error('validation failed');
    }
}
例子:三层组件props传递数据 
function Button(props){
    return (
        //3.最终传递到最底层组件
        <button style={{background: props.color}}>{props.children}</button>
    )
}
function Message(props){
    return(
        //2.子组件接收,并将color继续传递给下一层子组件
        <li>{props.text}<Button color={props.color}>Delete</Button></li>
    )
}
function MessageList(){
    const color = 'gray';
    const messages = [
        {text: 'hello react'},
        {text: 'hello redux'}
    ];
    const children = messages.map((message, key) => {
        <div>
            //1.通过标签的属性传递props,传递了key、text、color
            <Message key={key} text={message.text} color={color}/>
        </div>
    })
    
    return(
        <div>
            <ul>
                {children}
            </ul>
        </div>
    )
}

3.context

        context可以跨级传递数据。
步骤:
  1. 将要传的数据放在数据源组件的context中
  2. 在需要数据的组件中声明contextTypes
例子:用context跨级传递数据
 
//4.传递父组件的props和全局的context
function Button(props,context){
    return (
        //获取context,如果是无状态组件则直接获取context,有状态则通过this,context和生命周期函数
        <button style={{background: context.color}}>{props.children}</button>
    )
}
//3.定义contextTypes,不定义则是个空对象
Button.contextTypes = {
    color:PropTypes.string.isRequired
}
function Message(props){
    return(
        <li>{props.text}<Button>Delete</Button></li>
    )
}
class MessageList extends Component {
    //2.将color放在context中
    getChildContext(){
        return {color:'gray'}
    }
    render(){
        const messages = [
            {text: 'hello react'},
            {text: 'hello redux'}
        ];
        const children = messages.map((message, key) => 
            <div>
                <Message key={key} text={message.text}/>
            </div>
        )
        
        return(
            <div>
                <ul>
                    {children}
                </ul>
            </div>
        )
    }
}
//1.声明childContextTypes,不声明则无法在组件中使用getChildContext方法
MessageList.childContextTypes = {
    color: PropTypes.string.isRequired
}

4.适用场景

props:传递一些功能模块的数据context:传递登陆信息、当前语言、主题信息等

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台