注意：结合Context ， Provider，Consumer的使用说明阅读，会更有收获

https://www.yuque.com/lijunyang/dk90s4/akf6xn#RrPJp

  1. <!-- /dist/index.html -->
  2. <!doctype html>
  3. <html>
  5. <head>
  6.   <title>react</title>
  7.   <script src="./react.js"></script>
  8.   <script src="./react-dom.js"></script>
  9. </head>
  11. <body>
  12.   <div id="root">
  14.   </div>
  15.   <script>
  16.     debugger;
  18.     var context = React.createContext('默认值');
  20.     var contextProvider = context.Provider;
  21.     var contextConsumer = context.Consumer;
  23.     var Son = (function (Component) {
  24.       Mod.prototype = Object.create(Component.prototype);
  25.       Mod.prototype.constructor = Mod;
  26.       Mod.__proto__ = Component;
  28.       function Mod() {
  29.         debugger;
  30.         var _this;
  32.         _this = Component.apply(this, arguments) || this;
  34.         return _this;
  35.       }
  37.       Mod.prototype.render = function () {
  39.         const self = this;
  40.         console.log('self', self);
  42.         return React.createElement(
  43.           'div',
  44.           {
  45.             onClick: function () {
  46.               self.context.rename('999');
  47.             }
  49.           },
  50.           self.context.value
  51.         );
  52.       }
  53.       return Mod;
  54.     }(React.Component))
  56.     var ShouldFalse = (function (Component) {
  57.       Mod.prototype = Object.create(Component.prototype);
  58.       Mod.prototype.constructor = Mod;
  59.       Mod.__proto__ = Component;
  61.       function Mod() {
  62.         var _this;
  64.         _this = Component.apply(this, arguments) || this;
  66.         _this.shouldComponentUpdate = function () {
  67.           // 接受两个参数nextProps,nextState
  68.           console.log('shouldComponentUpdate', arguments)
  69.           return false; // context子组件可以不受到shouldComponentUpdate的影响
  70.         }
  72.         return _this;
  73.       }
  75.       Mod.prototype.render = function () {
  77.         const self = this;
  78.         console.log('self', self);
  80.         return React.createElement(
  81.           'div',
  82.           {
  83.             onClick: function () {
  84.               self.context.rename('888');
  85.             }
  87.           },
  88.           self.context.value
  89.         );
  90.       }
  91.       return Mod;
  92.     }(React.Component))
  94.     // 注意，这个是关键，没有的话，就不能拿到Context了
  95.     Son.contextType = context;
  96.     ShouldFalse.contextType = context;
  98.     var Parent = (function (Component) {
  100.       Mod.prototype = Object.create(Component.prototype);
  101.       Mod.prototype.constructor = Mod;
  102.       Mod.__proto__ = Component;
  104.       function Mod() {
  105.         var _this;
  107.         _this = Component.apply(this, arguments) || this;
  108.         _this.state = {
  109.           name: 'TestMod',
  110.           errorFlag: false,
  111.         };
  113.         _this.componentDidMount = function () {
  114.           // 没参数
  115.           console.log('componentDidMount', arguments)
  116.         }
  118.         _this.shouldComponentUpdate = function () {
  119.           // 接受两个参数nextProps,nextState
  120.           console.log('shouldComponentUpdate', arguments)
  121.           return true;
  122.         }
  124.         _this.getSnapshotBeforeUpdate = function () {
  125.           // 接受2个参数，return的值作为componentDidUpdate的第三个参数
  126.           console.log('getSnapShotBeforeUpdate', arguments)
  127.           return { a: 1 };
  128.         }
  130.         _this.componentDidUpdate = function () {
  131.           // 接受3个参数，prevProps，prevState
  132.           console.log('componentDidUpdate', arguments)
  133.         }
  135.         _this.componentDidCatch = function (error, info) {
  136.           // 子组件的render发生异常，才会被执行的生命周期
  137.           console.log('Parent componentDidCatch', arguments)
  138.           _this.setState({
  139.             errorFlag: true,
  140.           })
  141.         }
  143.         return _this;
  144.       }
  146.       var count = 0;
  148.       Mod.getDerivedStateFromProps = function () {
  149.         if (count === 0) {
  150.           console.log('初始化 getDerivedStateFromProps')
  151.         } else {
  152.           console.log('变更期 getDerivedStateFromProps')
  153.         }
  154.         return null;
  155.       }
  157.       Mod.prototype.render = function () {
  159.         if (count === 0) {
  160.           console.log("初始化 render")
  161.           count = 1;
  162.         } else {
  163.           console.log("变更起 render")
  164.         }
  166.         const self = this;
  167.         var errorFlag = this.state.errorFlag;
  170.         return React.createElement(
  171.           'div',
  172.           {
  173.             key: 'Parent',
  174.             id: 'Parent',
  175.           },
  176.           React.createElement(
  177.             contextProvider,
  178.             {
  179.               value: {
  180.                 value: self.state.name,
  181.                 rename: function rename(name) {
  182.                   self.setState({
  183.                     name: name
  184.                   });
  185.                 }
  186.               }
  187.             },
  188.             React.createElement(Son, null),
  189.             React.createElement(ShouldFalse, null),
  190.             React.createElement('div', null,
  191.               React.createElement(function (props, context) {
  192.                 console.log('arguments1', arguments); // 它没有props，context
  194.                 return React.createElement(Son, null); // 它拿到了Context
  195.               })
  196.             ),
  197.             React.createElement(contextConsumer, null, function (props) {
  198.               console.log('arguments2', arguments); // 它没有context，但是它拿到了Props
  199.               return React.createElement('div', null, props.value)
  200.             })
  201.           ),
  202.           React.createElement(contextProvider, null, // 拿不到默认的value
  203.             React.createElement(contextConsumer, null, function () { // 拿不到默认的value
  204.               console.log('arguments3', arguments);
  205.               return React.createElement('div', null, '111')
  206.             })
  207.           ),
  208.           React.createElement(contextProvider, null, // 它什么都没拿到
  209.             React.createElement(function () {
  210.               console.log('arguments4', arguments);
  211.               return React.createElement('div', null, '111')
  212.             })
  213.           ),
  214.           React.createElement(contextConsumer, null, function (props) { // 只有它才能拿到默认的value
  215.             console.log('arguments5', arguments);
  216.             return React.createElement('div', null, props)
  217.           })
  218.         );
  219.       }
  220.       return Mod;
  221.     }(React.Component))
  225.     var reactElement = React.createElement(Parent, null);
  227.     ReactDOM.render(reactElement, document.getElementById('root'))
  228.   </script>
  230. </body>
  232. </html>
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,
      _calculateChangedBits: calculateChangedBits,
      _currentValue: defaultValue,
      _currentValue2: defaultValue,
      _threadCount: 0,
      Provider: null,
      Consumer: null
    };

    context.Provider = {
      $$typeof: REACT_PROVIDER_TYPE,
      _context: context
    };

    var hasWarnedAboutUsingNestedContextConsumers = false;
    var hasWarnedAboutUsingConsumerProvider = false;

    {
      var Consumer = {
        $$typeof: REACT_CONTEXT_TYPE,
        _context: context,
        _calculateChangedBits: context._calculateChangedBits
      };
      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;
          }
        }
      });
      context.Consumer = Consumer;
    }

    {
      context._currentRenderer = null;
      context._currentRenderer2 = null;
    }

    return context;
  }