React从一到二

啦啦啦，上一节咱们知道 react中数据来源有两种：

• 状态
• 属性

那和vue同样,就要涉及到属性校验了

react中属性校验:

import PropTypes from 'prop-types'；
 class Count extends Component{
    static PropTypes = {
        age: PropTypes.Number.isRequired,
        gender: PropTypes.oneOf(['男', '女']),
        position: PropTypes.shape({
            x: PropTypes.Number,
            y: PropTypes.Number
        })，
        hobby: PropTypes.arrayOf(PropTypes.string),
        salary(props, propName, componentName){   //自定义校验
            if (props[propName] <= 100000){
                throw new Error('收益过低')
            }
        }
    }
 }
复制代码

有属性校验，那么默认属性怎么写呢？下面示例

class Count extends Component{
    static defaultProps = {
        name: 'xl',
        age: 25
    }
 }
复制代码

接下来就是学习了表单,受控(和状态有关的，相似双向数据绑定)和非受控组件(和状态无关的)

<input value={this.state.vale}> //若是你仅仅这样写就会报错
//报错提示给你三个选择：
1) 你能够给默认值 给value改为defaultValue
2) 你真的想用value的话 你必须加onChange属性事件
<input value={this.state.username} name="username" onChange={this.handleChange}>
//username name属性值和状态值名字同样
handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}
复制代码

上面是受控组件，那非受控组件呢？下面给你演示

email = React.creactRef();
<input type="email" name="email" ref = {this.email}/> //取值的时候这样取,this.email.current.value 复制代码

非受控组件的好处是：

1. 轻松和第三方库配合使用
2. 若是只是点击按钮才须要获取value 更推荐 否则就须要 onChange绑定 驱动setState

接下来学习组件嵌套以及数据传递（props,Provider/Consumer--跨组件传递）

//这是A组件
//A组件是B组件的父组件
<B fn={this.handleClick}/>

//这是B组件
<span onClick={this.handleClick}>B按钮</span>
handleClick = () => {
    this.props.fn()
}
复制代码

Provider的用法：

//前辈组件
// 提供的值必须叫value属性
    <Provider value={{r: this.resetClick}}>
        <div className="container">
          <div className="panel panel-danger">
            <div className="panel-heading">
              列表点赞
            </div>
            <div className="panel-body">
              <MessageRight lists={this.state.lists} fn={this.handleClick}></MessageRight>
            </div>
            <div className="panel-footer">
              <MessageLeft total={this.state.total}></MessageLeft>
            </div>
          </div>
        </div>
    </Provider>

//后辈组件
<Consumer>
{({r})=>{
  return <li className="list-group-item">
    <h4>{title}</h4>
    <button className="btn btn-default" onClick={()=>{
      r();
    }} >取消</button>
  </li>
}}
</Consumer>
复制代码

以上就是react的进一步学习，分享给你们，固然还有不少不足之处但愿你们指出，react基础就是这些了，下一节开始学习redux了！