context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

下面来创建一个简单地计数器

第一步，创建文件夹src/context

创建文件 Context

相当于实例化一个 context 对象。

import React from "react";

let MyContext = React.createContext();

export default MyContext;

创建组件 Provider

对 context 对象进行封装，有两个数据，两个方法。

import React from "react";

import Context from "./Context";

class Provider extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
      add: () => this.setState({ count: this.state.count + 1 }),
      inc: () => this.setState({ count: this.state.count - 1 })
    };
  }
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export default Provider;

第二步，引入Provider

App.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import Home from "./Home";
import Provider from "./context/Provider";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Provider>
        <Home />
      </Provider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

第三步，创建Home组件并使用context

Home.js

import React from "react";

import Context from "./context/Context";

class Home extends React.Component {
  render() {
    return (
      <div>
        Home
        <Context>
          {context => {
            return (
              <div>
                <p>{context.count}</p>
                <button onClick={context.add}>add</button>
                <button onClick={context.inc}>inc</button>
              </div>
            );
          }}
        </Context>
      </div>
    );
  }
}

export default Home;

学习资源

1. 推荐youtube上的一个教程视频 Heres how React's New Context API Works

2. 资源整合How To Learn React

3. 文章How to learn React.js in 2019