React傳遞參數的多種方式

最多見的就是父子組件之間傳遞參數

　　父組件往子組件傳值，直接用this.props就能夠實現

　　在父組件中，給須要傳遞數據的子組件添加一個自定義屬性，在子組件中經過this.props就能夠獲取到父組件傳遞過去的數據

// 父組件
 render() {
        return (
                // 使用自定義屬性傳遞須要傳遞的方法或者參數
                <ShopUi toson={this.state}></ShopUi>
            )
    } 

//子組件　
//經過this.props.toson就能夠獲取到父組件傳遞過來的數據 

、、若是還須要往孫組件傳遞那麼在子組件經過自定義屬性繼續傳遞就好了
      tograndson={this.props.toson}
、、孫組件經過this.props.tograndson獲取到數據

　

　子組件給父組件傳值的話，須要在父組件設置接收函數和state，同時將函數名經過props傳遞給子組件

　　也就是給子組件傳入父組件的方法，在子組件進行調用

//孫子組件
export default class Grandson extends Component{
    render(){
        return (
            <div style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：
                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        )
    }
};
 
//子組件
export default class Child extends Component{
    render(){
        return (
            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性別" handleSelect={this.props.handleSelect}/>
            </div>
        )
    }
};
 
//父組件
export default class Parent extends Component{
 
    constructor(props){
        super(props)
        this.state={
            username: '',
            sex: ''
        }   
    },
    handleVal(event){
        this.setState({username: event.target.value});
    },
    handleSelect(value) {
        this.setState({sex: event.target.value});
    },
    render(){
        return (
            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用戶姓名：{this.state.username}</div>
                <div>用戶性別：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        )
    }
}

　　前一段時間有人問過我這樣一個問題，constructor裏面的super()是幹嗎用的？

總結一下：

　　若是要在子類的constructor裏使用this，必須調用父類constructor，不然就拿不到this

　　那麼問題就來了，如何調用父類的constructor呢？ 經過super()

　　若是要在constructor裏使用父組件傳遞過來的參數，必須在調用父組件super時，傳遞參數給父組件的constructor

　　若是不在constructor裏面使用this，或者參數，就不須要super ； 由於React以及幫你作了this，props的綁定

 

路由傳參

　　安裝 npm install react-router-dom --save-dev

　　定義路由(通常會放在外面)

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter> 

當頁面跳轉時

<li  onClick={el =>　this.props.history.push({
　　　pathname:'/detail',
    　 state:{id:3}
})}
>
</li>

 

接收    經過this.props.history.location能夠獲取到傳遞過來的數據

路由傳參可能會有這個問題，就是隻有在路由定義時掛載的組件中才會有props裏面的location history match 

路由上掛載的那個組件通常都是Container.js，通常咱們會往下分出UI.js組件，在這裏面進行點擊跳轉，UI組件props裏沒有location history match 

須要用到高階組件withRouter

 

 狀態提高

　　將多個組件須要共享的狀態提高到離他們最近的那個公共父組件上，而後父組件經過props分發給子組件

 

context

　　當某個組件在本身的context中保存了某個狀態，那個該組件下的全部子孫組件均可以訪問到這個狀態，不須要中間組件的傳遞，而這個組件的父組件是沒辦法訪問的 

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}
經過getChildContext()將屬性傳遞給全部的子孫組件
提供 context 的組件必須提供  做爲 context 的聲明和驗證。childContextTypes

 

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>標題</h1>
    )
  }
}
子組件要獲取 context 裏面的內容的話，就必須寫  來聲明和驗證你須要獲取的狀態的類型，它也是必寫的，若是你不寫就沒法獲取 context 裏面的狀態。
 想獲取 ，它是一個字符串，咱們就在  裏面進行聲明。contextTypesTitlethemeColorcontextTypes

 

引入redux

　　redux爲React提供可預測化的狀態管理機制

　　redux將整個應用狀態存儲到store,store裏保存着一個state狀態樹

　　組件能夠派發(dispatch)  行爲 (action)  給store , 而不是直接通知其它組件

　　其它組件能夠經過訂閱store中的狀態state來刷新本身的視圖