React的React.createContext()源码解析(四)

高铁上的动车 發表於 2020-2-19 15:26:00

React的React.createContext()源码解析(四)

一.产生context原因
<div>从父组件直接传值到孙子组件，而不必一层一层的通过props进行传值，相比较以前的那种传值更加的方便、简介。</div>
二.context的实现方式
新版本(React16.x后)
<div class="cnblogs_code">
<pre>//创建两个组件 Provider,Consumer
//let {Provider,Consumer}=React.createContext(defaultValue); //defaultValue可以设置共享的默认数据当Provider不存在的时候 defaultValue生效
const { Provider, Consumer } = React.createContext({ theme: "green" })
class MessageList extends React.Component {
render() {
//Procider组件遍历子组件，并且有一个属性value用来提供数据
return (
 <Provider value={{ theme: "pink" }}>
 <Content />
 </Provider>
 )
}
}
//中间组件
function Content() {
return (
<div>
 <Button />
</div>
)
}
//接收组件,如果子组件是Consumer的话,将value作为参数值,传递给新创建的Consumer渲染一个函数组件
function Button() {
return (
<Consumer>
 {({ theme }) => (
 <button
 style={{ backgroundColor: theme }}>
 Toggle Theme
 </button>
 )}
</Consumer>
)
}</pre>
</div>
注意：将<code>undefined</code>传递给<code><Provider></code>的<code>value</code>时，<code>createContext</code>中的<code>defaultValue</code>不会生效，<code>Consumer</code>的<code>value</code>显示空值 
三.React.createContext()源码解析
<div class="cnblogs_code">
<pre> //calculateChangedBits方法,使用Object.is()计算新老context变化 //defaultValue 当Provider组件属性value不存在时会使用默认值defaultValue 
function createContext(defaultValue, calculateChangedBits) { if (calculateChangedBits === undefined) {
 calculateChangedBits = null;
 } else {
 {
 !(calculateChangedBits === null || typeof calculateChangedBits === 'function') ? warningWithoutStack$1(false, 'createContext: Expected the optional second argument to be a ' + 'function. Instead received: %s', calculateChangedBits) : void 0;
 }
 }

 var context = {
 $$typeof: REACT_CONTEXT_TYPE, //context的$$typeof在createElement中的type中的type对象中存储
 _calculateChangedBits: calculateChangedBits,//计算新老context变化
 //_currentValue和_currentValue2作用一样,只是作用平台不同
 _currentValue: defaultValue, //Provider的value属性
 _currentValue2: defaultValue,
 _threadCount: 0, //用来追踪context的并发渲染器数量
 // These are circular
 Provider: null, //提供组件
 Consumer: null//应用组件
 };

 //context.Provider的_context指向context对象
 context.Provider = {
 $$typeof: REACT_PROVIDER_TYPE,
 _context: context
 };
 var hasWarnedAboutUsingNestedContextConsumers = false;
 var hasWarnedAboutUsingConsumerProvider = false;

 {
 // A separate object, but proxies back to the original context object for
 // backwards compatibility. It has a different $$typeof, so we can properly
 // warn for the incorrect usage of Context as a Consumer.
 var Consumer = {
 $$typeof: REACT_CONTEXT_TYPE,
 _context: context,
 _calculateChangedBits: context._calculateChangedBits //计算新老context变化
 }; // $FlowFixMe: Flow complains about not setting a value, which is intentional here

 Object.defineProperties(Consumer, {
 Provider: {
 get: function () {
 if (!hasWarnedAboutUsingConsumerProvider) {
 hasWarnedAboutUsingConsumerProvider = true;
 warning$1(false, 'Rendering <Context.Consumer.Provider> is not supported and will be removed in ' + 'a future major release. Did you mean to render <Context.Provider> instead?');
 }

 return context.Provider;
 },
 set: function (_Provider) {
 context.Provider = _Provider;
 }
 },
 _currentValue: {
 get: function () {
 return context._currentValue;
 },
 set: function (_currentValue) {
 context._currentValue = _currentValue;
 }
 },
 _currentValue2: {
 get: function () {
 return context._currentValue2;
 },
 set: function (_currentValue2) {
 context._currentValue2 = _currentValue2;
 }
 },
 _threadCount: {
 get: function () {
 return context._threadCount;
 },
 set: function (_threadCount) {
 context._threadCount = _threadCount;
 }
 },
 Consumer: {
 get: function () {
 if (!hasWarnedAboutUsingNestedContextConsumers) {
 hasWarnedAboutUsingNestedContextConsumers = true;
 warning$1(false, 'Rendering <Context.Consumer.Consumer> is not supported and will be removed in ' + 'a future major release. Did you mean to render <Context.Consumer> instead?');
 }

 return context.Consumer;
 }
 }
 }); // $FlowFixMe: Flow complains about missing properties because it doesn't understand defineProperty

 context.Consumer = Consumer;
 }

 {
 context._currentRenderer = null;
 context._currentRenderer2 = null;
 }
 //返回一个context对象
 return context;
}</pre>
</div>
解析：
1._currentValue 用来记录Provider/Consumer的value值默认为defaultValue
2.在context设置Provider和Consumer属性值
<ul>
<li>Provider属性</li>
</ul>
<div class="cnblogs_code">
<pre>　　context.Provider = {
　　$$typeof: REACT_PROVIDER_TYPE,
　 _context: context
　　};</pre>
</div>
表示给context的provider设置属性值如果我们需要设置当前Provider上的value值 则直接使用context.Provider._context._currentValue进行设置 
<ul>
<li>Consumer属性</li>
</ul>
<div class="cnblogs_code">
<pre>　　var Consumer = {
　　 $$typeof: REACT_CONTEXT_TYPE,
　　 _context: context,
　　 _calculateChangedBits: context._calculateChangedBits
　　 };
　　context.Consumer = Consumer;</pre>
</div>
表示给context设置Consumer设置属性值如果我们需要获取当前通过Provider上的value值则直接通过自身的Consumer组件的context.Consumer._context._currentValue获取value值
3.return context对象
返回的context对象中包含Provider/Consumer/_currentValue/_calculateChangedBits计算新老context变化等值 
<div class="cnblogs_code">
<pre>const { Provider, Consumer } = React.createContext({ theme: "green" })</pre>
</div>
通过React.createContext调用createContext方法获取context中的Provider和Consumer组件对象当调用React.createElement(type,config,..)作为type值进行传递
返回的context内容图解：
<img src="https://img2018.cnblogs.com/common/1853661/202002/1853661-20200219172706962-472088602.png"> 
来源：https://www.cnblogs.com/sunxiaopei/p/12319203.html

頁: [1]

琼殿技术论坛's Archiver

React的React.createContext()源码解析(四)