React源码阅读-4contextContext上下文提供了一种通过组件树传递数据的方式，无需在每一层手动传递props属性。何时使用ContextContext旨在共享组件树中可被视为“全局”的数据，例如当前经过身份验证的用户、主题或首选语言；constcontext:ReactContext={$$typeof:REACT_CONTEXT_TYPE,_calculateChangedBits:calculateChangedBits,_currentValue:defaultValue,_currentValue2:defaultValue,//用于跟踪此上下文当前//在单个渲染器中支持多少个并发渲染器。比如并行服务器渲染。_threadCount:是crircurer//0(null:any),Consumer:(null:any),};示例：classAppextendsReact.Component{render(){return;}}//Toolbar组件接受一个附加的“theme”属性，然后传递给ThemedButton组件。//如果应用程序中的每个按钮都需要知道theme的值，那将很麻烦，//因为这个值必须通过所有组件向下传递。functionToolbar(props){return(
);}classThemedButtonextendsReact.Component{render(){return;使用上下文，我们可以避免通过中间元素传递道具：constThemeContext=React.createContext('light');classAppextendsReact.Component{render(){return();}}//使用Provider将当前主题传递给下面的组件树。//任何组件都可以读取这个值，不管有多深。//在此示例中，我们将“dark”作为当前值传递。functionToolbar(props){return(
);}classThemedButtonextendsReact.Component{.静态上下文类型=ThemeContext；render(){return;}}使用Context前的注意事项1.Context的主要应用场景是很多不同层次的组件需要访问相同的数据。请谨慎使用，因为它会使组件的可重用性变差。如果您只想避免逐层传递属性，组件组合有时是比上下文更好的解决方案。//...渲染...//...渲染...//...渲染...A没有上下文的解决方案是传递Avatar组件本身，因此中间组件不需要知道user或avatarSize等道具：functionPage(props){constuser=props.user;constuserLink=();return;}//现在，我们有了这个组件：//...渲染出来...//...渲染出...//...渲染...{props.userLink}然而，有时组件在不同层次组件树需要访问同一批数据。Context允许你将这些数据“广播”给组件树下的所有组件，所有组件都可以访问这些数据以及后续的数据更新。使用上下文的常见场景包括管理当前语言环境、主题或一些缓存数据，这比替代方案简单得多。React.createContextconstMyContext=React.createContext(defaultValue);创建一个上下文对象。当React渲染一个订阅了这个Context对象的组件时，该组件会从组件树中离自己最近的匹配Provider中读取当前的上下文值。defaultValue参数只有在组件树中没有Provider匹配时才会生效。这对于在不使用Provider包装组件的情况下测试组件很有用。注意：当给Provider的值传递undefined时，consumer组件的defaultValue不会在Context中生效。Provider会为每个Context对象返回一个ProviderReact组件，让consumer组件可以订阅context的变化。context.Provider={$$typeof:REACT_PROVIDER_TYPE,_context:context,};提供者接收一个值属性并将其传递给消费者组件。一个Provider可以和多个consumer组件有对应关系。也可以嵌套多个Provider，内层会覆盖外层数据。当Provider的值改变时，它里面的所有消费者组件都会被重新渲染。Provider及其内部的消费者组件都不受shouldComponentUpdate函数的约束，因此即使其祖先组件退出更新，消费者组件也可以更新。使用与Object.is相同的算法，通过检查旧值和新值来确定更改。Class.contextTypeclassMyClassextendsReact.Component{componentDidMount(){letvalue=this.context;/*组件挂载后，使用MyContext组件的值进行一些副作用操作*/}componentDidUpdate(){letvalue=this.context;/*...*/}componentWillUnmount(){让值=this.context;/*...*/}render(){让值=this.context;/*基于MyContext组件的值渲染*/}}MyClass.contextType=MyContext;安装在类上的contextType属性将被重新分配给由React.createContext()创建的Context对象。这使您可以使用this.context来使用最近上下文中的值。您可以在任何生命周期中访问它，包括渲染函数。多种情况https://zh-hans.reactjs.org/d...classMyClassextendsReact.Component{staticcontextType=MyContext;render(){让值=this.context;/*渲染基于这个值Work*/}}Context.ConsumerconstConsumer={$$typeof:REACT_CONTEXT_TYPE,_context:context,calculateChangedBits:context._calculateChangedBits,};{value=>/*渲染基于contextvalue*/>在这里，React组件也可以订阅上下文变化。这使您可以在功能组件中执行订阅上下文。这需要像孩子一样练习功能。该函数接收当前上下文值并返回一个React节点。传递给函数的值等于组件树上最接近此上下文的提供者提供的值。如果没有对应的Provider，value参数就相当于传递给createContext()的defaultValue。http://react.html.cn/docs/con...
