React 16.3新API

const {Provider, Consumer} = React.createContext(defaultValue);
<Provider value={/* some value */}>
<Consumer>
 {value => /* render something based on the context value */}
</Consumer>

export type ReactContext<T> = {
 $$typeof: Symbol | number,
 Consumer: ReactContext<T>,
 Provider: ReactProviderType<T>,
 unstable_read: () => T, _calculateChangedBits: ((a: T, b: T) => number) | null, _currentValue: T,
 _currentValue2: T,
 _changedBits: number,
 _changedBits2: number, // DEV only
 _currentRenderer?: Object | null,
 _currentRenderer2?: Object | null,
};export type ReactProviderType<T> = {
 $$typeof: Symbol | number,
 _context: ReactContext<T>,
};

context = {
 Consumer: context,
 Provider: {
   _context: context
 }
}

// Check if the context matches.
dependency.context === context && (dependency.observedBits & changedBits) !== 0

export function createContext<T>(
 defaultValue: T,
 calculateChangedBits: ?(a: T, b: T) => number,
): ReactContext<T> {
 if (calculateChangedBits === undefined) {
   calculateChangedBits = null;
 } const context: ReactContext<T> = {
   $$typeof: REACT_CONTEXT_TYPE,
   _calculateChangedBits: calculateChangedBits,
   _currentValue: defaultValue,
   _currentValue2: defaultValue,
   _changedBits: 0,
   _changedBits2: 0,
   // These are circular
   Provider: (null: any),
   Consumer: (null: any),
   unstable_read: (null: any),
 }; context.Provider = {
   $$typeof: REACT_PROVIDER_TYPE,
   _context: context,
 };
 context.Consumer = context;
 context.unstable_read = readContext.bind(null, context); return context;
}

export function pushProvider(providerFiber: Fiber, changedBits: number): void {
 const context: ReactContext<any> = providerFiber.type._context;
 context._currentValue = providerFiber.pendingProps.value;
 context._changedBits = changedBits;
}

export function readContext<T>(
 context: ReactContext<T>,
 observedBits: void | number | boolean,
): T {
 let contextItem = {
   context: ((context: any): ReactContext<mixed>),
   observedBits: resolvedObservedBits,
   next: null,
 }; if (lastContextDependency === null) {
   // This is the first dependency in the list
   currentlyRenderingFiber.firstContextDependency = lastContextDependency = contextItem;
 } else {
   // Append a new context item.
   lastContextDependency = lastContextDependency.next = contextItem;
 }
 return isPrimaryRenderer ? context._currentValue : context._currentValue2;
}

export function propagateContextChange(
 workInProgress: Fiber,
 context: ReactContext<mixed>,
 changedBits: number,
 renderExpirationTime: ExpirationTime,
): void {
   // 遍历fiber子树，找出第一个与context匹配的Consumer或Provider
   while (fiber !== null) {
     // 遍历fiber节点的所有context依赖
     do {
       // 检查是否匹配
       // 匹配的话，标记该fiber需要更新，等待调度
     } while (dependency !== null);
   }
}

export type ReactProvider<T> = {
 $$typeof: Symbol | number,
 type: ReactProviderType<T>,
 key: null | string,
 ref: null,
 props: {
   value: T,
   children?: ReactNodeList,
 },
};export type ReactConsumer<T> = {
 $$typeof: Symbol | number,
 type: ReactContext<T>,
 key: null | string,
 ref: null,
 props: {
   children: (value: T) => ReactNodeList,
   unstable_observedBits?: number,
 },
};

<div ref="mask"></div>
<div ref={(node) => this.maskNode = node}></div>

export function createRef(): RefObject {
 const refObject = {
   current: null,
 }; return refObject;
}

class MyComponent extends React.Component {
 constructor(props) {
   super(props);
   this.myRef = React.createRef();
 }
 render() {
   return <div ref={this.myRef} />;
 }
}

const node = this.myRef.current;
const myComponent = this.myComponentRef.current;

export type RefObject = {|
 current: any,
|};

function CustomTextInput(props) {
 return (
   <div>
     <input ref={props.inputRef} />
   </div>
 );
}class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.inputElement = React.createRef();
 }
 render() {
   return (
     <CustomTextInput inputRef={this.inputElement} />
   );
 }
}

function CustomTextInput(props) {
 return (
   <div>
     <input ref={node => props.refHost.node = node} />
   </div>
 );
}class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.refHost = {};
 }
 render() {
   return (
     <CustomTextInput refHost={this.refHost} />
   );
 }
}

let CustomTextInput = React.forwardRef((props, ref) => (
 <div>
   <input ref={ref} />
 </div>
));class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.inputRef = {};
 }
 render() {
   return (
     <CustomTextInput ref={this.inputRef} />
   );
 }
}

function logProps(Component) {
 class LogProps extends React.Component {
   componentDidUpdate(prevProps) {
     console.log('old props:', prevProps);
     console.log('new props:', this.props);
   }   render() {
     const {forwardedRef, ...rest} = this.props;     // Assign the custom prop "forwardedRef" as a ref
     return <Component ref={forwardedRef} {...rest} />;
   }
 } // Note the second param "ref" provided by React.forwardRef.
 // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
 // And it can then be attached to the Component.
 return React.forwardRef((props, ref) => {
   return <LogProps {...props} forwardedRef={ref} />;
 });
}

function forwardRef<Props, ElementType: React$ElementType>(
 render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) { return {
   $$typeof: REACT_FORWARD_REF_TYPE,
   render,
 };
}

// 挂载
function commitAttachRef(finishedWork: Fiber) {
 const ref = finishedWork.ref;
 if (ref !== null) {
   const instance = finishedWork.stateNode;
   ref.current = instance;
 }
}// 更新
function updateForwardRef(
 current: Fiber | null,
 workInProgress: Fiber,
 renderExpirationTime: ExpirationTime,
) {
 const render = workInProgress.type.render;
 const nextProps = workInProgress.pendingProps;
 const ref = workInProgress.ref; let nextChildren = render(nextProps, ref); reconcileChildren(
   current,
   workInProgress,
   nextChildren,
   renderExpirationTime,
 );
 return workInProgress.child;
}// 卸载
function commitDetachRef(current: Fiber) {
 const currentRef = current.ref;
 if (currentRef !== null) {
   currentRef.current = null;
 }
}

import React from 'react';function ExampleApplication() {
 return (
   <div>
     <Header />
     <React.StrictMode>
       <div>
         <ComponentOne />
         <ComponentTwo />
       </div>
     </React.StrictMode>
     <Footer />
   </div>
 );
}

constructor
componentWillMount
componentWillReceiveProps
componentWillUpdate
getDerivedStateFromProps
shouldComponentUpdate
render
setState updater functions (the first argument)