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了！