在典型的React应用中，数据是通过props属性自上而下（由父及子）进行传递的。

但是，在实际开发中，我们发现有某些属性是许多组件都需要的，那么通过组件树逐层传递props就会特别繁琐，且不容易维护。

所以总结以下三种不用逐层传递props，也可以获得共享数据的方法：

1、Context

版本：从React 16.3.0开始，加入了Context API。

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
 
API： 具体可查阅官方文档https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext
 
React.createContext
 
Context.Provider
 
Context.contextType
 
Context.Consumer
 
Context.displayName

应用场景：很多不同层级的组件需要访问同样一些数据。例如当前主题、locale等。

应用：Context共享当前主题

ThemeContext.js
 
import { createContext } from "react";
 
const ThemeContext = createContext();
 
ThemeContext.displayName = "themeContext";
 
export default ThemeContext;
 
App.js
 
import React, { Component } from "react";
 
import ThemeContext from "./ThemeContext";
 
import ClearButton from "./ClearButton";
 
class App extends Component {
 
  render() {
 
    return (
 
      <ThemeContext.Provider value="dark">
 
        <ClearButton />
 
      </ThemeContext.Provider>
 
    );
 
  }
 
}
 
ClearButton.js
 
import React, { Component } from 'react';
 
import ThemeContext from "./ThemeContext";
 
class ClearButton extends Component{
 
    componentDidMount(){
 
        console.log(this.context)
 
    }
 
    handleClear=()=>{
 
    }
 
    render() {
 
        return (
 
              <Tooltip placement="bottom" title="清空画布">
 
                <span className="handlerbar-icon-box">
 
                  <a
 
                    className={`${this.context} top-icon-button clear-icon`}
 
                    onClick={this.handleClear}
 
                  ></a>
 
                </span>
 
              </Tooltip>
 
            )
 
          }
 
    );
 
  }
 
}
 
ClearButton.contextType = ThemeContext;
 
export default ClearButton;

挂载在class上的contextType属性会被重新赋值为一个由React.createContext()创建的Context对象，这可以使我们使用this.context来拿到最近Context上的那个值，并且可以在任何生命周期中访问到它，包括在render函数中。

如果你正在使用public class fields语法，你可以使用static这个类属性来初始化你的contextType.如下：

class ClearButton extends Component{
 
  static contextType = ThemeContext; 
 
  render(){
 
    console.log(this.context)
 
    ....
 
  }
 
}

如果是函数式组件，你该怎么订阅context呢？

可以使用Context.Consumer,他需要函数作为子元素，这个函数接收当前的context值，返回一个React节点

<ThemeContext.Consumer>
 
       {value => (
 
           <span>{value}</span>
 
       )}
 
</ThemeContext.Consumer>

在React DevTools中可看到如上图, themeContext就是我们为了好区分其他的Context而起的名字

ThemeContext.displayName = "themeContext"

React DevTools使用该字符串来确定context要显示的内容。

应用：react-redux中的context

从React 16.3.0开始，Context API包含了2个特殊的组件<Provider>和<Consumer>。如果用过react-redux,会觉得其中的一个很熟悉。那就是<Provider>。因为react-redux也提供了一个叫<Provider>的组件。实际上，react-redux和react提供了两个大致上一样的东西。

react-redux是使用了React的Context特性使Redux的Store共享给嵌入的组件。react-redux中，唯一默认的Context对象实例被React.createContext()创建，被叫做ReactReduxContext.

react-redux中Provider.js中部分代码：

react-redux的<Provider>组件用<ReactReduxContext.Provider>把Redux的store数据放入Context 中，connect用<ReactReduxContext.Consumer>拿到这些值进行一些更新处理。

react-redux中ConnectAdvanced.js中部分代码：

在使用Context 之前请先考虑下面2点：

Context如上所说主要的应用于很多不同层级的组件需要访问同样一些数据。所以请谨慎使用，因为这会使组件的复用性变差。

如果你只是想避免层层传递一些属性，组件组合（Component composition）有时候是一个比context 更好的解决方案。所以请继续看第二种方法吧！

2、component composition

应用场景：子组件与父组件解耦。

组件可以接收任意props，包括基本的数据类型（Number、String、Boolean、Array、Object）、React元素以及函数。

这句话很重要，尤其是props可以是React元素。要先有这个意识才能自己写出来这样的组件。

下面这张草图是商城类的网站，可以先考虑一下要怎样才能写出比较好的组件。

这三个List，普通（例如首页、分类等）的商品列表、订单中的商品列表、购物车里的商品列表，每一个Item很像却又有不一样的地方。用组合组件的思路，我会封装成3个组件,如下：

一个通用的商品Card组件，但是它的header、leftContent、rightContent、footer是可以作为React元素通过Props传进来,正如我们在众多的UI框架中看到的slot.

Stepper组件：用户选择、增减商品数量

Button组件：cancel、退货按钮等风格统一的按钮。

Stepper、Button、checkBox作为React元素，通过rightContent、footer、leftContent的props属性传给Card组件。自从有了这个思路，我很鄙视我之前的做法，因为不是真正的可复用封装。瞅一下以前的做法：那就是List里面嵌套Card,Card组件里面又硬编码嵌套了Stepper组件，比如说现在要根据list组件里面的某个值，判断Stepper组件的UI状态，那么你可能就需要List通过props传给Card，Card又通过props传给Stepper组件。而通过把Stepper组件作为prop(react元素)动态的传给Card，那么Stepper组件就会和Card处于同一级别的组件，List=>Card+Stepper这样就不会出现props的多层传递。

3、render props

render prop是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体地说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

重要的是要记住，render prop 是因为模式才被称为render prop ，你不一定要用名为render的 prop 来使用这种模式。事实上，任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”。

<DataProvider render={data => (
 
<h1>Hello {data.target}</h1>
 
)}/>
 
<Mouse children={mouse => (
 
  <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
 
)}/>

它和组件组合component composition不同的是：子组件需要在渲染前和父组件进行一些交流，例如子组件要分享父组件中的state。

使用 render prop 的库有React Router

下面是官网的一个猫追逐鼠标的例子，猫追逐鼠标，自然要监听鼠标的位置x,y。虽然Cat作为子组件硬编码到Mouse中，但是它不是一个真正的可复用的封装。我们可以提供一个带有prop函数的<Mouse>组件，它能够动态决定什么需要渲染的，并把state作为参数传给prop函数。

class Cat extends React.Component {
 
render() {
 
  const mouse = this.props.mouse;
 
  return (
 
    <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
 
  );
 
}
 
}
 
class Mouse extends React.Component {
 
constructor(props) {
 
  super(props);
 
  this.handleMouseMove = this.handleMouseMove.bind(this);
 
  this.state = { x: 0, y: 0 };
 
}
 
handleMouseMove(event) {
 
  this.setState({
 
    x: event.clientX,
 
    y: event.clientY
 
  });
 
}
 
render() {
 
  return (
 
    <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
      {/*
 
        Instead of providing a static representation of what <Mouse> renders,
 
        use the `render` prop to dynamically determine what to render.
 
      */}
 
      {this.props.render(this.state)}
 
    </div>
 
  );
 
}
 
}
 
class MouseTracker extends React.Component {
 
render() {
 
  return (
 
    <div>
 
      <h1>移动鼠标!</h1>
 
      <Mouse render={mouse => (
 
        <Cat mouse={mouse} />
 
      )}/>
 
    </div>
 
  );
 
}
 
}

可以使用带有 render prop 的常规组件来实现大多数高阶组件(HOC)

高阶组件是一种基于React的组合特性而形成的设计模式，是一个参数是组件，返回值为新组件的函数。例如react-redux中的connectHOC就是一个高阶组件，详细的可以看react-redux源码。

function withMouse(Component) {
 
return class extends React.Component {
 
  render() {
 
    return (
 
      <Mouse render={mouse => (
 
        <Component {...this.props} mouse={mouse} />
 
      )}/>
 
    );
 
  }
 
}
 
}