概括的講，可以有如下幾種類型：

1. 利用props

看一個(gè)例子：
子組件是一個(gè)select下拉框，內(nèi)容由父組件定義。當(dāng)下拉框變動(dòng)時(shí)，下面一行文字會(huì)顯示相應(yīng)的選擇內(nèi)容。

//父組件
class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {text: "", value: ["nicole", "mike"]};
        this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect(event) {
        this.setState({text: event.target.value});
    }

    render() {
        return (<div>
            <B handleSelect={this.handleSelect} data={this.state.value}></B>
            <p>select value: {this.state.text}</p>
        </div>);
    }
}

//子組件B
class B extends React.Component {

    getOption(){
        return this.props.data.map((item)=>{
            return (<option value={item}>{item}</option>)
        })
    }

    render() {
        return (<select onChange={this.props.handleSelect}>
            {this.getOption()}
        </select>);
    }
}

ReactDOM.render(
    <A/>,
    document.getElementById('container')
);

從代碼<B handleSelect={this.handleSelect} data={this.state.value}></B>可以看出，組件A通過props向組件B傳遞了兩個(gè)重要內(nèi)容：handleSelect和data。

• data：父組件定義了選項(xiàng)內(nèi)容，將其傳遞給組件B，從而構(gòu)造好B組件顯示內(nèi)容
• handleSelect：B組件觸發(fā)onChange事件之后，會(huì)調(diào)用函數(shù)handleSelect，從而委托調(diào)用組件A的handleSelect方法，更新組件B狀態(tài)值this.setState({text: event.target.value});。

這樣，父子組件就可以互相通信了。

2.Context

** Context 提供了一個(gè)無需為每層組件手動(dòng)添加 props，就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法。**

Context 設(shè)計(jì)目的是為了共享那些對(duì)于一個(gè)組件樹而言是“全局”的數(shù)據(jù)，例如當(dāng)前認(rèn)證的用戶、主題或首選語言。

首先，定義Context Provider和Consumer:

import React, { createContext } from 'react';
const Context = createContext();

export class MyProvider extends React.Component {
    constructor() {
        super();
        // 全局享用的狀態(tài)值
        this.state = {
            isDebugger: process.env.NODE_ENV === 'development',
            toggleLoading: false,
            message: ''
        };
        this.updateContext = this.updateContext.bind(this);
    }

    // 為state添加新的屬性或者修改原state的值
    updateContext(newData) {
        this.setState(Object.assign({}, this.state, newData));
    }
    
    render() {
        const contextData = { data: this.state };
        const { toggleLoading, message } = contextData.data;
        // 在state外層的對(duì)象contextData上添加屬性u(píng)pdateContext，值為函數(shù)
        Object.defineProperty(contextData, "updateContext", {
            value: this.updateContext
        });
        // 顯示全局消息提示框
        if (message) {
            setTimeout(() => this.setState({ message: '' }), 1000)
        }
        return (
            <Context.Provider value={contextData}>
                {this.props.children}
                {toggleLoading && <Loading />}
                {message && <Message text={message} />}
            </Context.Provider>
        );
    }
}

// 消費(fèi)組件
export const MyConsumer = Component => {
    return props => (
        <Context.Consumer>
            {context => {
                return <Component context={context} {...props} />;
            }}
        </Context.Consumer>
    );
};

第二步，給根組件添加Provider

ReactDOM.render(
    <MyProvider>
        <App />
    </MyProvider>,
document.getElementById('root'));

第三步，哪個(gè)組件需要全局Context，就用消費(fèi)組件包裝

class UserPage extends React.Component {

    load(){
        if (this.props.context.data.isDebugger) {
            return;
        }
        this.props.context.updateContext({ toggleLoading: true });
        get()
        .then(res=>{
            this.props.context.updateContext({ toggleLoading: false });
        })
        .catch(error=>{
            this.props.context.updateContext({ message: 'Error!' });
        })
    }
}
export default MyConsumer(UserPage);

3. 利用Redux或Mobx等狀態(tài)管理庫(kù)

狀態(tài)管理庫(kù)不要濫用，一般，滿足如下兩個(gè)條件的狀態(tài)才適合用狀態(tài)管理庫(kù)管理：

• 這個(gè)狀態(tài)需要在多個(gè)組件共享
• 組件被卸載之后重新加載時(shí)，之前的狀態(tài)需要被保留

小結(jié)

到了這里，react基礎(chǔ)知識(shí)就介紹完了。可見，react框架涉及到的API和內(nèi)置屬性并不多，它的難點(diǎn)在于如何將一個(gè)UI界面合理分割為若干組件進(jìn)行組合嵌套，并且，數(shù)據(jù)如何在組件間傳遞，變化。

微信公眾號(hào)：