下级组件

类组件

通过将Class的contextType属性指定给上面createContext创建的context

class C extends Component {static contextType = contextrender() {return (
从A组件继承过来的名字是：{this.context.name}
)}
}

或者

class C extends Component {render() {return (
从A组件继承过来的名字是：{this.context.name}
)}
}
C.contextType = context

现在可以通过this.context访问传递的值，不论你在哪个生命周期，都能访问到！

函数式组件

通过上面暴露出的Consumer组件或者react提供的hooks来接收值

export default function D() {return (
{value => `从A组件接收的值 名字是：${value.name}`}
)
}

或者

import React, { useContext } from 'react';export default function C() {const { name, age } = useContext(context);return (
从A组件继承过来的名字是：{name}从A组件继承过来的年龄是：{age}
)
}

官网文档貌似有说

如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比 context 更好的解决方案。

相当于把所有的值放到一个props里，然后每个组件都要接收props。个人感觉还是太繁琐了，换汤不换药啊，只能说是比不聚合在一起要简洁一点吧。

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

所以官方的建议是尽量少用 （谨慎使用）这个api，不然会让你的组件复用性降低。

over

贴一下当初学习时写的demo吧 Github仓库