React 老版本的context API使用對比

Context 經過組件樹提供了一個傳遞數據的方法，從而避免了在每個層級手動的傳遞 props 屬性。

在一個典型的 React 應用中，數據是經過 props 屬性由上向下（由父及子）的進行傳遞的，但這對於某些類型的屬性而言是極其繁瑣的（例如：地區偏好，UI主題），這是應用程序中許多組件都所須要的。 Context 提供了一種在組件之間共享此類值的方式，而沒必要經過組件樹的每一個層級顯式地傳遞 props 。

老版本的context API

import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';

const Topic = (props) => {
  return (
    <div>
      <Comment />
    </div>
  )
}

const Comment = (props, context) => {
  return (
    <div>{ context.color }</div>
  )
}

Comment.contextTypes = {
  color: PropTypes.string
}

class App extends Component {
  getChildContext() {
    return { color: "red" };
  }
  render() {
    return (
      <div className="App">
        <Topic />
      </div>
    );
  }
}

App.childContextTypes = {
  color: PropTypes.string
}

export default App;
複製代碼

新版本16.3 context

import React, { Component } from 'react';
import './App.css';

// 第一步，建立 context
const myContext = React.createContext()

// 第二步，建立 Provider Component

class MyProvider extends Component {
  state = {
    name: "rails365",
    age: 27
  }

  render() {
    return (
      <myContext.Provider value={{ state: this.state }}>
        { this.props.children }
      </myContext.Provider>
    )
  }
}

const Family = (props) => {
  return (
    <div>
      <h1>Family</h1>
      <Person />
    </div>
  )
}


class Person extends Component {
  render() {
    return (
      <div>
        <h1>Person</h1>
        <myContext.Consumer>
          { ({ state }) => <p>My age is { state.age }</p> }
        </myContext.Consumer>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>Hello App</p>
        <MyProvider>
          <Family />
        </MyProvider>
      </div>
    );
  }
}

export default App;
複製代碼

API

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);
複製代碼

• 建立一對 { Provider, Consumer }。當 React 渲染 context 組件 Consumer 時，它將從組件樹的上層中最接近的匹配的 Provider 讀取當前的 context 值。

• 若是上層的組件樹沒有一個匹配的 Provider，而此時你須要渲染一個 Consumer 組件，那麼你能夠用到 defaultValue 。這有助於在不封裝它們的狀況下對組件進行測試。

Provider

<Provider value={/* some value */}>
複製代碼

• React 組件容許 Consumers 訂閱 context 的改變。

• 接收一個 value 屬性傳遞給 Provider 的後代 Consumers。一個 Provider 能夠聯繫到多個 Consumers。Providers 能夠被嵌套以覆蓋組件樹內更深層次的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>
複製代碼

• 一個能夠訂閱 context 變化的 React 組件。

• 接收一個 函數做爲子節點. 函數接收當前 context 的值並返回一個 React 節點。傳遞給函數的 value 將等於組件樹中上層 context 的最近的 Provider 的 value 屬性。若是 context 沒有 Provider ，那麼 value 參數將等於被傳遞給 createContext() 的 defaultValue 。