add: comments and examples of context

Author: neroneroffy

src/components/Context/LagcyContext/index.js

@@ -0,0 +1,104 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+class ProviderText extends React.Component{
+  getChildContext() {
+    return {
+      text: this.props.text
+    }
+  }
+
+  render() {
+    return <>
+      <h3>ProviderText</h3>
+      {this.props.children}
+    </>
+  }
+}
+ProviderText.childContextTypes = {
+  text: PropTypes.string
+};
+
+class ConsumerText extends React.Component{
+  render() {
+    return <div>ConsumerText: {this.context.text}</div>
+  }
+}
+ConsumerText.contextTypes = {
+  text: PropTypes.string
+}
+
+class ProviderColor extends React.Component{
+  getChildContext() {
+    return {
+      color: this.props.color
+    }
+  }
+
+  render() {
+    return <>
+      <h3 style={{ color: this.props.color }}>ProviderColor</h3>
+      {this.props.children}
+    </>
+  }
+}
+ProviderColor.childContextTypes = {
+  color: PropTypes.string
+};
+
+class ConsumerColor extends React.Component{
+  render() {
+    const { color } = this.context
+    return <div style={{ color }}>ConsumerColor: {color}</div>
+  }
+}
+ConsumerColor.contextTypes = {
+  color: PropTypes.string
+}
+
+
+class LagcyContext extends React.Component{
+  state = {
+    textValue: 'hello context',
+    color: 'black'
+  }
+  render() {
+    const { textValue, color } = this.state
+    return <>
+      <div style={{ marginTop: 80 }}>
+        <h2>旧版context</h2>
+        <p>
+          颜色：
+          <select
+            name="color"
+            id="color-selector"
+            onChange={e => {
+              this.setState({ color: e.target.value })
+            }}
+          >
+            <option value="black">黑色</option>
+            <option value="red">红色</option>
+            <option value="green">绿色</option>
+          </select>
+        </p>
+        <p>
+          文字：
+          <input
+            type="text"
+            defaultValue={textValue}
+            onChange={e => {
+              this.setState({ textValue: e.target.value })
+            }}
+          />
+        </p>
+      </div>
+      <ProviderText text={textValue}>
+        <ProviderColor color={color}>
+          <ConsumerColor/>
+          <ConsumerText/>
+        </ProviderColor>
+      </ProviderText>
+    </>
+  }
+}
+export default LagcyContext

src/components/Context/LanguageContext/parent.js

@@ -6,7 +6,6 @@ const { ZH_CN, EN } = LANGUAGE
 
 const Parent = () => {
   const [ language, setLanguage ] = useState(ZH_CN)
-  console.log(LanguageContext);
   return <div className={'language-context'}>
     <span>语言</span>
     <select

src/components/Context/ThemeContext/parent.js

@@ -7,6 +7,7 @@ const { PURPLE, BLUE, RED } = THEME_COLOR
 const Parent = () => {
   const [ theme, setTheme ] = useState(PURPLE)
   return <div className={'theme-context'}>
+    <h2>新版context</h2>
     <span>主题</span>
     <select
       onChange={e => {

src/components/Context/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import ThemeParent from './ThemeContext/parent'
 import LanguageParent from './LanguageContext/parent'
+import LagcyContext from './LagcyContext/index'
 import './index.css'
 
 const ContextDemo = () => {
   return <div className={'context-demo'}>
     <ThemeParent/>
     <LanguageParent/>
+    <LagcyContext/>
   </div>
 }
 export default ContextDemo

src/react/v17/react-reconciler/src/ReactFiberClassComponent.old.js

@@ -626,6 +626,7 @@ function constructClassInstance(
     context = readContext((contextType: any));
   } else if (!disableLegacyContext) {
     unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
+    console.log('unmaskedContext', unmaskedContext);
     const contextTypes = ctor.contextTypes;
     isLegacyContextConsumer =
       contextTypes !== null && contextTypes !== undefined;

src/react/v17/react-reconciler/src/ReactFiberContext.old.js

@@ -54,6 +54,7 @@ function getUnmaskedContext(
       // we may have already pushed its own child context on the stack. A context
       // provider should not "see" its own child context. Therefore we read the
       // previous (parent) context instead for a context provider.
+      console.log('previousContext', previousContext);
       return previousContext;
     }
     return contextStackCursor.current;

src/react/v17/react-reconciler/src/ReactFiberHostContext.old.js

@@ -80,7 +80,6 @@ function pushHostContext(fiber: Fiber): void {
   );
   const context: HostContext = requiredContext(contextStackCursor.current);
   const nextContext = getChildHostContext(context, fiber.type, rootInstance);
-
   // Don't push this Fiber's context unless it's unique.
   if (context === nextContext) {
     return;

src/react/v17/react-reconciler/src/ReactFiberStack.old.js

@@ -57,14 +57,20 @@ function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
 }
 
 function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
+  console.log('value', value);
   index++;
-
+  /*
+  * [ { theme: 'red' }, false ]
+  *
+  * [ emptyContext, contextValue ]
+  *
+  * */
   valueStack[index] = cursor.current;
 
   if (__DEV__) {
     fiberStack[index] = fiber;
   }
-
+  // console.log('valueStack', valueStack);
   cursor.current = value;
 }