react中context學習

簡介：在React中，數據可以以流的形式自上而下的傳遞，每當你使用一個組件的時候，你可以看到組件的props屬性會自上而下的傳遞。但是，在某些情況下，我們不想通過父組件的props屬性一級一級的往下傳遞，我們希望在某一級子組件中，直接得到上N級父組件中props中的值。

1.一般情況下通過props傳值的情況

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.props.color}}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button color={this.props.color}>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  render() {
    const color = "purple";
    const children = this.props.messages.map((message) =>
      <Message text={message.text} color={color} />
    );
    return <div>{children}</div>;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

我們來分析一下這段代碼，大致的組件分爲3級:

頂層MessageLists——>Message一級子類——>Button底層子類

我們來看從父組件到子組件的值的傳遞情況：

（1）text:

我們可以看到，在頂層組件MessageLists中的值，傳遞到一級子組件Message中，並在此組件中被使用。

（2）color:

再看props中的color的傳遞情況，在頂層組件MessageLists中的值，先傳遞到一級子組件Message中，

在傳遞到二級子組件Button中，最後在二級子組件中被使用。

綜上：這就是一般在React中，所使用的通過props屬性，在父組件與子組件中進行值傳遞。

2.如何利用React中的Context來進行值的越級傳遞。

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {
  color: React.PropTypes.string
};

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

MessageList.childContextTypes = {
  color: React.PropTypes.string
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

上述代碼，我們實現了通過React的Context實現了值——color的越級傳遞。我們來分析一下上述的方法。

（1）首先在頂層組件中：

MessageList.childContextTypes = {
  color: React.PropTypes.string
};

• 1
• 2
• 3

• 1
• 2
• 3

定義了頂層組件所擁有的子類context對象——該頂層組件所擁有的的子類context對象爲color，且必須爲字符串。

然後通過getChildText方法，來給子context對象的屬性賦值：

getChildContext() {

    return {color: "purple"};
  }

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

這樣就完成了頂層組件中，context對象的賦值。

（2）越級傳遞，因爲color屬性只在最底層使用

我們來看color屬性的越級傳遞，因爲color屬性，在一級子組件Message中並沒有直接用到，因此我們可以

直接傳遞到最底層（越級），在Button組件中使用。

首先Button組件中，再次聲明瞭所接受到的context的子組件color的類型，聲明必須爲字符串：

Button.contextTypes = {
  color: React.PropTypes.string
};

• 1
• 2
• 3

• 1
• 2
• 3

然後可以通過this.context.color這種方式調用：

 <button style={{background: this.context.color}}>
        {this.props.children}
 </button>

• 1
• 2
• 3

• 1
• 2
• 3

綜上：這樣，我們發現通過Context，我們就能實現值得越級傳遞。