# React

class ExampleComponent extends React.Component {
    // 用于初始化 state
    constructor() {}

    // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
    // 因为该函数是静态函数，所以取不到 `this` 
    // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
    static getDerivedStateFromProps(nextProps, prevState) {}

    // 判断是否需要更新组件，多用于组件性能优化
    shouldComponentUpdate(nextProps, nextState) {}


    // 组件挂载后调用
    // 可以在该函数中进行请求或者订阅
    componentDidMount() {}


    // 用于获得最新的 DOM 数据
    getSnapshotBeforeUpdate() {}

    
    // 组件即将销毁
    // 可以在此处移除订阅，定时器等等
    componentWillUnmount() {}


    // 组件销毁后调用
    componentDidUnMount() {}


    // 组件更新后调用
    componentDidUpdate() {}
    // 渲染组件函数
    render() {}


    // 以下函数不建议使用
    UNSAFE_componentWillMount() {}
    UNSAFE_componentWillUpdate(nextProps, nextState) {}
    UNSAFE_componentWillReceiveProps(nextProps) {}
}

constructor(props) {
    super(props);
    // Don't call this.setState() here!
    this.state = {
        counter: 0
    };
    this.handleClick = this.handleClick.bind(this);
}

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

const MyContext = React.createContext(defaultValue);

<MyContext.Provider value = {/* 某个值 */ } >

class MyClass extends React.Component {
    static contextType = MyContext // 该写法需要安装babel插件转义
    componentDidMount() {
        let value = this.context;
        /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
    }
    componentDidUpdate() {
        let value = this.context;
        /* ... */
    }
    componentWillUnmount() {
        let value = this.context;
        /* ... */
    }
    render() {
        let value = this.context;
        /* 基于 MyContext 组件的值进行渲染 */
    }
}
MyClass.contextType = MyContext;

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" 在 DevTools 中
<MyContext.Consumer> // "MyDisplayName.Consumer" 在 DevTools 中

// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

//或者短语法
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

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;
      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
  // 然后它就可以被挂载到被 LogProps 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('Current props: ', this.props);
      console.log('Previous props: ', prevProps);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
}

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

const hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * is 方法来判断两个值是否是相等的值，为何这么写可以移步 MDN 的文档
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
function is(x: mixed, y: mixed): boolean {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    return x !== x && y !== y;
  }
}

function shallowEqual(objA: mixed, objB: mixed): boolean {
  // 首先对基本类型进行比较
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  // 长度不相等直接返回false
  if (keysA.length !== keysB.length) {
    return false;
  }

  // key相等的情况下，再去循环比较
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

const shouldComponentUpdate = areEqual => BaseComponent => {
    class ShouldComponentUpdate extends React.Component{
        shouldComponentUpdate(nextProps){
            return areEqual(this.props,nextProps)
        }
        render(){
            return <BaseComponent {...this.props}/>
        }
    }
    ShouldComponentUpdate.displayName = `Pure(${BaseComponent.displayName})`
    return ShouldComponentUpdate
}

const Pure = BaseComponent => {
  const hoc = shouldComponentUpdate(
  	(props, nextProps) => !shallowEqual(props, nextProps)
  )

  return hoc(BaseComponent);
}

import React from'react';

const Child = (props) =><div>{props.name}</div>;

export default Pure(Child);

// parent.js
import React, { useState } from "react";
function parent(){
  const [title,setTitle] = useState('ye')
  return(
    <div>
      <h1>{title}</h1>
      <button onClick={() => setTitle("ye1")}>更改名称</button>
       <Child name="lewisye"></Child>
    </div>
  )
}

// child.js
import React from "react";

function Child(props) {
  console.log("child")
  return <h1>{props.name}</h1>
}

export default Child

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

import React from "react";

function Child(props) {
  console.log("child")
  return <h1>{props.name}</h1>
}

export default React.memo(Child)

// parent.js
import React, { useState } from "react";
function parent(){
  const [title,setTitle] = useState('ye')
  const print = () => {
    console.log('print')
  }
  const callback = () => {
    setTitle("ye1")
  }
  return(
    <div>
      <h1>{title}</h1>
       <button onClick={print}>输出</button>
      <Child name="lewisye" onClick={callback}></Child>
    </div>
  )
}

// child.js
import React from "react";

function Child(props) {
  console.log("child")
  return(
    <>
     <button onClick={props.onClick}>改标题</button>
     <h1>{props.name}</h1>
    </>
  )
}

export default React.memo(Child);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

// parent.js
import React, { useState } from "react";
function parent(){
  const [title,setTitle] = useState('ye')
  const print = () => {
    console.log('print')
  }
  const callback = () => {
    setTitle("ye1")
  }
  const memoizedCallback = useCallback(callback, [])
  return(
    <div>
      <h1>{title}</h1>
       <button onClick={print}>输出</button>
      <Child name="lewisye" onClick={memoizedCallback}></Child>
    </div>
  )
}

function App() {
  const [num, setNum] = useState(0);

  // 一个非常耗时的一个计算函数
  // result 最后返回的值是 49995000
  function expensiveFn() {
    let result = 0;

    for (let i = 0; i < 10000; i++) {
      result += i;
    }

    console.log(result) // 49995000
    return result;
  }

  const base = expensiveFn();

  return (
    <div>
      <h1>count：{num}</h1>
      <button onClick={() => setNum(num + base)}>+1</button>
    </div>
  );
}

function App() {
  const [num, setNum] = useState(0);

  function expensiveFn() {
    let result = 0;
    for (let i = 0; i < 10000; i++) {
      result += i;
    }
    console.log(result)
    return result;
  }

  const base = useMemo(expensiveFn, []);

  return (
    <div className="App">
      <h1>count：{num}</h1>
      <button onClick={() => setNum(num + base)}>+1</button>
    </div>
  );
}

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function ExampleWithManyStates() {
  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 类似于 componentDidMount and componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect(() => {
    // 使用
    return () => {
      // 清除
    };
  });

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

const [state,setState] = useState(initialState)

setState(pervState => pervState + 1)

setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

useEffect(()=>{
  const subscription = props.source.subscribe()
  return ()=>{
    //清除订阅
    subscription.unsubscribe()
  }
})

useEffect(
  ()=>{
    const subscription = props.source.subscribe()
    return ()=>{
      subscription.unsubscribe()
    }
  },
  [props.source]
)

const themes = {
  foreground:"#000000",
  background:"#eeeeee"
}

const ThemeContext = React.createContext(themes);

function App(){
  return(
    <ThemeContext.Provider value={themes}>
      <Toolbar/>
    </ThemeContext.Provider>
  )
}

function Toolbar(props){
  return(
    <div>
      <ThemedButton/>
    </div>
  )
}

function ThemedButton(){
  const theme = useContext(ThemeContext)
  return(
    <button style={{background:theme.background,color:theme.foreground}}>
    I am styled by theme context!
    </button>
  )
}

const [state,dispacth] = useReducer(reducer,initialArg,init);

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}
  );

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

// ReactFiberCompleteWork.old.js

finalizeInitialChildren  //  ReactDOMHostConfig.js

setInitialProperties // ReactDOMComponent.js

setInitialDOMProperties // ReactDOMComponent.js

ensureListeningTo // ReactDOMComponent.js

listenToReactEvent // DOMPluginEventSystem.js

getEventListenerMap // ReactDOMComponentTree.js

listenToNativeEvent // DOMPluginEventSystem.js

addTrappedEventListener //  DOMPluginEventSystem.js

createEventListenerWrapperWithPriority // ReactDOMEventListener.js 注入了dispatchEvent

addEventCaptureListenerWithPassiveFlag、addEventCaptureListener、addEventBubbleListenerWithPassiveFlag 、addEventBubbleListener // EventListener.js

target.addEventListener(eventType, listener, false); // EventListener.js

function setInitialDOMProperties(
  tag: string,
  domElement: Element,
  rootContainerElement: Element | Document,
  nextProps: Object,
  isCustomComponentTag: boolean,
): void {
  for (const propKey in nextProps) {
    if (!nextProps.hasOwnProperty(propKey)) {
      continue;
    }
    const nextProp = nextProps[propKey];
    if (propKey === STYLE) {
     // ...
    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
      if (nextProp != null) {
        if (!enableEagerRootListeners) {
          ensureListeningTo(rootContainerElement, propKey, domElement);
        }
      }
    }
  }
}

export function listenToReactEvent(
  reactEvent: string, // 例如onChange
  rootContainerElement: Element,
  targetElement: Element | null,
): void {
  // dependences这边可以理解为事件依赖，就是说注册某个事件，react会强制依赖其他事件。 如上图的onChange
  const dependencies = registrationNameDependencies[reactEvent];
  const dependenciesLength = dependencies.length;
  const isPolyfillEventPlugin = dependenciesLength !== 1;

  if (isPolyfillEventPlugin) {
    // 首次返回一个空的map对象
    const listenerMap = getEventListenerMap(rootContainerElement);

    // listenerMap不包含当前事件属性，就进入判断(has是判断属性是否存在，即使内容为null，也是返回true)
    // 也就是同一种事件只会注册一遍，onChange、onClick等等
    if (!listenerMap.has(reactEvent)) {
      // 给对象添加一个reactEvent属性，值为null
      listenerMap.set(reactEvent, null); // 这个listenerMap会变成{onChange: null}
      for (let i = 0; i < dependenciesLength; i++) {
        // 循环遍历dependencies
        listenToNativeEvent(
          dependencies[i], // dependence
          false,
          rootContainerElement,
          targetElement,
        );
      }
    }
  } else {
    const isCapturePhaseListener =
      reactEvent.substr(-7) === 'Capture' &&
      reactEvent.substr(-14, 7) !== 'Pointer';
    listenToNativeEvent(
      dependencies[0],
      isCapturePhaseListener,
      rootContainerElement,
      targetElement,
    );
  }
}

const randomKey = Math.random().toString(36).slice(2);
const internalEventHandlersKey = '__reactEvents$' + randomKey;

export function getEventListenerMap(node: EventTarget): ElementListenerMap {
  let elementListenerMap = (node: any)[internalEventHandlersKey];
  if (elementListenerMap === undefined) {
    elementListenerMap = (node: any)[internalEventHandlersKey] = new Map();
  }
  return elementListenerMap;
}

export function listenToNativeEvent(
  domEventName: DOMEventName,
  isCapturePhaseListener: boolean,
  rootContainerElement: EventTarget,
  targetElement: Element | null,
  isPassiveListener?: boolean,
  listenerPriority?: EventPriority,
  eventSystemFlags?: EventSystemFlags = 0,
): void {
  let target = rootContainerElement; // div#root
  // ...

  // 这边去获取上面提到的那个map对象
  const listenerMap = getEventListenerMap(target);

  // export function getListenerMapKey(
  //   domEventName: DOMEventName,
  //   capture: boolean,
  // ): string {
  //   return `${domEventName}__${capture ? 'capture' : 'bubble'}`; 
  // }

  // 获取到的listenerMapKey值是 onChange_bubble
  const listenerMapKey = getListenerMapKey(
    domEventName,
    isCapturePhaseListener, // false
  );

 // 判断listenerMap中是否存在listenerMapKey
  const listenerEntry = ((listenerMap.get(
    listenerMapKey,
  ): any): ElementListenerMapEntry | void);

  // 判断是否需要更新
  const shouldUpgrade = shouldUpgradeListener(listenerEntry, isPassiveListener);

   // 如果不存在当前事件，或者需要更新，进入判断
  if (listenerEntry === undefined || shouldUpgrade) {
    if (shouldUpgrade) {
      removeEventListener(
        target,
        domEventName,
        ((listenerEntry: any): ElementListenerMapEntry).listener,
        isCapturePhaseListener,
      );
    }
    if (isCapturePhaseListener) {
      eventSystemFlags |= IS_CAPTURE_PHASE;
    }

    // addTrappedEventListener内部就是做了：在target上进行事件监听，并返回dispatchEvent函数
    const listener = addTrappedEventListener(
      target, // div#root
      domEventName, // onChange
      eventSystemFlags, // 0
      isCapturePhaseListener, //false
      false,
      isPassiveListener,
      listenerPriority,
    );

    // 最终这个listenerMap会变成{onChange: null, change_bubble: {passive: isPassiveListener, listener}}
    listenerMap.set(listenerMapKey, {passive: isPassiveListener, listener});
  }
}

function addTrappedEventListener(
  targetContainer: EventTarget, // div#root
  domEventName: DOMEventName, // onChange
  eventSystemFlags: EventSystemFlags, // 0
  isCapturePhaseListener: boolean, // false
  isDeferredListenerForLegacyFBSupport?: boolean,
  isPassiveListener?: boolean,
  listenerPriority?: EventPriority,
): any => void {

  // 这段代码尤为重要，通过传入的domEventName获取当前事件的优先级，返回的是经过包装过的三类dispatchEvent事件
  // 分别为dispatchDiscreteEvent =>0 | dispatchUserBlockingUpdate =>1 | dispatchEvent=>2

  // export function createEventListenerWrapperWithPriority(
  //   targetContainer: EventTarget,
  //   domEventName: DOMEventName,
  //   eventSystemFlags: EventSystemFlags,
  //   priority?: EventPriority,
  // ): Function {
  //   const eventPriority =
  //     priority === undefined
  //       ? getEventPriorityForPluginSystem(domEventName)
  //       : priority;
  //   let listenerWrapper;
  //   switch (eventPriority) {
  //     case DiscreteEvent:
  //       listenerWrapper = dispatchDiscreteEvent;
  //       break;
  //     case UserBlockingEvent:
  //       listenerWrapper = dispatchUserBlockingUpdate;
  //       break;
  //     case ContinuousEvent:
  //     default:
  //       listenerWrapper = dispatchEvent;
  //       break;
  //   }
  //   return listenerWrapper.bind(
  //     null,
  //     domEventName,
  //     eventSystemFlags,
  //     targetContainer,
  //   );
  // }

  let listener = createEventListenerWrapperWithPriority(
    targetContainer,
    domEventName,
    eventSystemFlags,
    listenerPriority,
  );
  
  // ...


  if (isCapturePhaseListener) {
    if (isPassiveListener !== undefined) {
      unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener,
      );
    } else {
      unsubscribeListener = addEventCaptureListener(
        targetContainer,
        domEventName,
        listener,
      );
    }
  } else {
    if (isPassiveListener !== undefined) {
      unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener,
      );
    } else {
      unsubscribeListener = addEventBubbleListener(
        targetContainer,
        domEventName,
        listener,
      );
    }
  }
  return unsubscribeListener;
}

dispatchEvent // ReactDOMEventListener.js

dispatchEventForPluginEventSystem // DOMPluginEventSystem.js

batchedEventUpdates // ReactDOMUpdateBatching.js

dispatchEventsForPlugins // DOMPluginEventSystem.js // 该函数先合成事件 然后再执行

extractEvents // DOMPluginEventSystem.js

// 以ChangeEventPlugin为例子

createAndAccumulateChangeEvent //  // react-dom/src/client/events/ChangeEventPlugin.js

accumulateTwoPhaseListeners  // DOMPluginEventSystem.js

processDispatchQueue // 在dispatchEventsForPlugins函数中调用

executeDispatch  // DOMPluginEventSystem.js

invokeGuardedCallbackAndCatchFirstError // shared/ReactErrorUtils

export function dispatchEvent(
  domEventName: DOMEventName,  //onChange
  eventSystemFlags: EventSystemFlags, // 0
  targetContainer: EventTarget, //div#root
  nativeEvent: AnyNativeEvent,
): void {


  // ....
  dispatchEventForPluginEventSystem(
    domEventName,
    eventSystemFlags,
    nativeEvent,
    null,
    targetContainer,
  );
}

export function dispatchEventForPluginEventSystem(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget,
): void {
  // ...

  //批量更新
  batchedEventUpdates(() =>
    dispatchEventsForPlugins(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      ancestorInst,
      targetContainer,
    ),
  );
}

export function batchedEventUpdates(fn, a, b) {
  if (isBatchingEventUpdates) {// 初始是false
    return fn(a, b);
  }
  isBatchingEventUpdates = true;
  try {
    return batchedEventUpdatesImpl(fn, a, b);
  } finally {
    isBatchingEventUpdates = false;
    finishEventHandler();
  }
}

function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget,
): void {
  const nativeEventTarget = getEventTarget(nativeEvent); // 获取当前dom元素
  const dispatchQueue: DispatchQueue = [];
  // 进行事件合成
  extractEvents(
    dispatchQueue,  // []
    domEventName, // onChange
    targetInst,
    nativeEvent, // 原生事件
    nativeEventTarget, // 获取当前dom元素
    eventSystemFlags, // 0
    targetContainer, // div#root
  );
  // 按顺序执行事件队列,此时dispatchQueue已经变成[onChange, [{instance, listener, currentTarget}, ...]]
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

function extractEvents(
  dispatchQueue: DispatchQueue, // 初始为[]
  domEventName: DOMEventName, // dependence
  targetInst: null | Fiber, // 
  nativeEvent: AnyNativeEvent, // 原生事件
  nativeEventTarget: null | EventTarget, // 当前dom元素
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
) {
  SimpleEventPlugin.extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  const shouldProcessPolyfillPlugins = (eventSystemFlags & SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS) === 0;
  if (shouldProcessPolyfillPlugins) {
    EnterLeaveEventPlugin.extractEvents(
      ...
    );
    ChangeEventPlugin.extractEvents(
      ...
    );
    SelectEventPlugin.extractEvents(
      ...
    );
    BeforeInputEventPlugin.extractEvents(
     ...
    );
  }
}

// react-dom/src/client/events/ChangeEventPlugin.js

function extractEvents(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  targetContainer: null | EventTarget,
) {
  const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;

  let getTargetInstFunc, handleEventFunc;
  // 这边判断当前的节点符不符合当前插件创建相应合成事件的要求
  if (shouldUseChangeEvent(targetNode)) {
    getTargetInstFunc = getTargetInstForChangeEvent;
  } else if (isTextInputElement(((targetNode: any): HTMLElement))) {
    if (isInputEventSupported) {
      getTargetInstFunc = getTargetInstForInputOrChangeEvent;
    } else {
      getTargetInstFunc = getTargetInstForInputEventPolyfill;
      handleEventFunc = handleEventsForInputEventPolyfill;
    }
  } else if (shouldUseClickEvent(targetNode)) {
    getTargetInstFunc = getTargetInstForClickEvent;
  }

  if (getTargetInstFunc) {
    const inst = getTargetInstFunc(domEventName, targetInst);
    if (inst) {
      createAndAccumulateChangeEvent(
        dispatchQueue,
        inst,
        nativeEvent,
        nativeEventTarget,
      );
      return;
    }
  }

  if (handleEventFunc) {
    handleEventFunc(domEventName, targetNode, targetInst);
  }

  if (domEventName === 'focusout') {
    handleControlledInputBlur(((targetNode: any): HTMLInputElement));
  }
}

function createAndAccumulateChangeEvent(
  dispatchQueue,
  inst,
  nativeEvent,
  target,
) {
  // 生成合成事件
  const event = new SyntheticEvent(
    'onChange',
    'change',
    null,
    nativeEvent,
    target,
  );
  // Flag this event loop as needing state restore.
  enqueueStateRestore(((target: any): Node));
  accumulateTwoPhaseListeners(inst, dispatchQueue, event);
}

export function accumulateTwoPhaseListeners(
  targetFiber: Fiber | null, 
  dispatchQueue: DispatchQueue, // []
  event: ReactSyntheticEvent, // onChange合成事件
): void {
  const bubbled = event._reactName; // 就是“onChange”
  const captured = bubbled !== null ? bubbled + 'Capture' : null; // 就是“onChangeCapture”
  const listeners: Array<DispatchListener> = [];
  let instance = targetFiber;

  // 这边向上查找到所有当前类型事件的回调函数，重要！！！
  while (instance !== null) {
    const {stateNode, tag} = instance;
    if (tag === HostComponent && stateNode !== null) {
      const currentTarget = stateNode;
      if (captured !== null) {
        // 返回当前节点的回调函数

      // export default function getListener(
      //   inst: Fiber, // 当前实例
      //   registrationName: string, // “onChange”
      // ): Function | null {
      //   ...
      //   // 返回dom上的props
      //   const props = getFiberCurrentPropsFromNode(stateNode);
      //   if (props === null) {
      //     // Work in progress.
      //     return null;
      //   }
      //   // 获取到当前事件的回调函数
      //   const listener = props[registrationName]
      //   return listener;
      // }

        const captureListener = getListener(instance, captured);
        if (captureListener != null) {
          // 捕获，插入数组头部
          listeners.unshift(
            // 工具函数，返回对象{instance, listener, currentTarget}
            createDispatchListener(instance, captureListener, currentTarget),
          );
        }
      }
      if (bubbled !== null) {
        // 返回当前节点的回调函数
        const bubbleListener = getListener(instance, bubbled);
        if (bubbleListener != null) {
          // 冒泡，插入数组尾部
          listeners.push(
            // 工具函数，返回对象{instance, listener, currentTarget}
            createDispatchListener(instance, bubbleListener, currentTarget),
          );
        }
      }
    }
    instance = instance.return;
  }

  // listeners即某一类合成事件的所有回调函数的集合，[{instance, listener, currentTarget}, ...]
  if (listeners.length !== 0) {
    // createDispatchEntry返回的是对象{event, listeners};
    // dispatchQueue最后为[{event, listeners}, ...], 即[{onChange, [{instance, listener, currentTarget}, ...]}, ...]
    dispatchQueue.push(createDispatchEntry(event, listeners));
  }
}

export function processDispatchQueue(
  dispatchQueue: DispatchQueue,
  eventSystemFlags: EventSystemFlags,
): void {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  // 循环取出合成事件和对应的回调函数队列
  for (let i = 0; i < dispatchQueue.length; i++) {
    const {event, listeners} = dispatchQueue[i];

    // 逐个执行每个回调函数
    processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
    //  event system doesn't use pooling. 不在使用事件池
  }
  // This would be a good time to rethrow if any of the event handlers threw.
  rethrowCaughtError();
}

function processDispatchQueueItemsInOrder(
  event: ReactSyntheticEvent,
  dispatchListeners: Array<DispatchListener>,
  inCapturePhase: boolean,
): void {
  let previousInstance;
  if (inCapturePhase) {
    for (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  } else {
    for (let i = 0; i < dispatchListeners.length; i++) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  }
}

function executeDispatch(
  event: ReactSyntheticEvent, // onChange
  listener: Function, // 对应的回调函数
  currentTarget: EventTarget,
): void {
  // "onChange"
  const type = event.type || 'unknown-event'; 
  // 将当前dom元素赋值给合成事件的currentTarget
  event.currentTarget = currentTarget;
  // 执行回调函数，listener为回调函数, event为合成事件,最后执行listener(event)这个方法调用
  // 这样就回调到了我们在JSX中注册的callback。比如onClick={(event) => {console.log(1)}}
  // 现在就明白了callback怎么被调用的,以及event参数怎么传入callback里面的了
  invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
  event.currentTarget = null;
}

// invokeGuardedCallbackAndCatchFirstError 函数的本质是如下函数
// shared/invokeGuardedCallbackImpl.js

function invokeGuardedCallbackProd<A, B, C, D, E, F, Context>(
  name: string | null,
  func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,
  context: Context,
  a: A,
  b: B,
  c: C,
  d: D,
  e: E,
  f: F,
) {
  const funcArgs = Array.prototype.slice.call(arguments, 3);
  try {
    //最后就是在这里执行的回调函数
    func.apply(context, funcArgs);
  } catch (error) {
    this.onError(error);
  }
}

  componentDidMount() {
    this.parent.addEventListener('click', (e) => {
      console.log('dom parent');
    })
    this.child.addEventListener('click', (e) => {
      console.log('dom child');
    })
    document.addEventListener('click', (e) => {
      console.log('document');
    })
  }

  childClick = (e) => {
    console.log('react child');
  }

  parentClick = (e) => {
    console.log('react parent');
  }

  render() {
    return (
      <div onClick={this.parentClick} ref={ref => this.parent = ref}>
        <div onClick={this.childClick} ref={ref => this.child = ref}>
          test
        </div>
      </div>)
  }

dom child
dom parent
react child
react parent
document

const fontSizeState = atom({
  key: 'fontSizeSstate',
  default: 12
})

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

import React from 'react'

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

const atomKey = Symobl('atom')

const textState = atom({
  key: atomKey, // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

const selectorKey = Symobl('selector')

const charCountState = selector({
  key: selectorKey, // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

function MyApp() {
  return (
    <RecoilRoot>
      <ErrorBoundary>
        <React.Suspense fallback={<div>Loading...</div>}>
          <CurrentUserInfo />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );
}

    requestIdelCallback(myNonEssentialWork);
    
    
    function myNonEssentialWork (deadline) {
    
      // deadline.timeRemaining()可以获取到当前帧剩余时间
      while (deadline.timeRemaining() > 0 && tasks.length > 0) {
        doWorkIfNeeded();
      }
      if (tasks.length > 0){
        requestIdleCallback(myNonEssentialWork);
      }
    }

requestIdleCallback = (callback) => {
  setTimeout(callback({
    timeRemaining() {
      return Infinity
    }
  }))
}

const ANIMATION_FRAME_TIMEOUT = 100;
let rAFID;
let rAFTimeoutID;
// 调用 requestAnimationFrame, 并对执行时间超过 100 ms 的任务用 setTimeout 进行处理
const requestAnimationFrameWithTimeout = function (callback) {
  rAFID = requestAnimationFrame(function (timestamp) {
    clearTimeout(rAFTimeoutID);
    callback(timestamp);
  });
  // 如果在一帧中某个任务执行时间超过 100 ms 则终止该帧的执行并将该任务放入下一个事件队列中
  rAFTimeoutID = setTimeout(function () {
    cancelAnimationFrame(rAFID);
    callback(getCurrentTime());
  }, ANIMATION_FRAME_TIMEOUT);
};

let scheduledHostCallback = null; // 调度器回调函数
let isMessageEventScheduled = false; // 消息事件是否执行
let timeoutTime = -1;

let isAnimationFrameScheduled = false;

let isFlushingHostCallback = false;

let frameDeadline = 0; // 当前帧的截止时间

// 假设最开始的 FPS(feet per seconds) 为 30, 但这个值会随着动画帧调用的频率而动态变化
let previousFrameTime = 33; // 一帧的时间: 1000 / 30 ≈ 33
let activeFrameTime = 33;

// 建立通道
const channel = new MessageChannel();
const port = channel.port2;


shouldYieldToHost = function () {
  return frameDeadline <= getCurrentTime();
};

getCurrentTime = function () {
  return performance.now();
};


// 步骤一
requestHostCallback = function (callback, absoluteTimeout) {
  scheduledHostCallback = callback; // 这里的 callback 为调度器回调函数
  timeoutTime = absoluteTimeout;
  if (isFlushingHostCallback || absoluteTimeout < 0) {
    // 针对优先级较高的任务不等下一个帧，在当前帧通过 postMessage 尽快执行
    port.postMessage(undefined);
  } else if (!isAnimationFrameScheduled) {
    // 如果 rAF 在当前帧没有安排任务, 则开始一个帧的流程
    isAnimationFrameScheduled = true;
    requestAnimationFrameWithTimeout(animationTick);
  }
};

// 步骤二 上述代码requestAnimationFrameWithTimeout部门


// 步骤三 requestAnimationFrame 的回调函数。传入的 rafTime 为执行该帧的时间戳。
const animationTick = function (rafTime) {
  // 如果存在调度器回调函数则在一帧的开头急切地安排下一帧的动画回调(急切是因为如果在帧的后半段安排动画回调的话, 就会增大下一帧超过 100ms 的几率, 从而会浪费一个帧的利用, 可以结合步骤②来理解这句话), 如果不存在调度器回调函数否则立马终止执行。
  if (scheduledHostCallback !== null) {
    requestAnimationFrameWithTimeout(animationTick);
  } else {
    isAnimationFrameScheduled = false;
    return;
  }

  let nextFrameTime = rafTime - frameDeadline + activeFrameTime; // 当前帧开始调用动画的时间 - 上一帧调用动画的截止时间 + 当前帧执行的时间，这里的 nextFrameTime 仅仅是临时变量
  // 如果连续两帧的时间都小于当前帧的时间, 则说明得调高 FPS
  if (nextFrameTime < activeFrameTime && previousFrameTime < activeFrameTime) {
    // 将 activeFrameTime 的值减小相当于调高 FPS。同时取 nextFrameTime 与 previousFrameTime 中较大的一个以让前后两帧都不出问题。
    activeFrameTime = nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;
  } else {
    previousFrameTime = nextFrameTime;
  }
  frameDeadline = rafTime + activeFrameTime; // 当前帧的截止时间(上面几行代码的目的是得到该 frameDeadline 值, 该值在 postMessage 会用来判断)
  if (!isMessageEventScheduled) {
    isMessageEventScheduled = true;
    port.postMessage(undefined); // 最后进入第④步, 通过 postMessage 触发消息事件。
  }
};



// 步骤四  接受 `postMessage` 指令, 触发消息事件的执行。在其中判断任务是否在当前帧执行，如果在的话执行该任务
channel.port1.onmessage = function (event) {
  isMessageEventScheduled = false;

  const prevScheduledCallback = scheduledHostCallback;
  const prevTimeoutTime = timeoutTime;
  scheduledHostCallback = null;
  timeoutTime = -1;

  const currentTime = getCurrentTime();

  let didTimeout = false; // 是否超时
  // 如果当前帧已经没有时间剩余, 检查是否有 timeout 参数，如果有的话是否已经超过这个时间
  if (frameDeadline - currentTime <= 0) {
    if (prevTimeoutTime !== -1 && prevTimeoutTime <= currentTime) {
      // didTimeout 为 true 后, 在当前帧中执行(针对优先级较高的任务)
      didTimeout = true;
    } else {
      // 在下一帧中执行
      if (!isAnimationFrameScheduled) {
        isAnimationFrameScheduled = true;
        requestAnimationFrameWithTimeout(animationTick);
      }
      scheduledHostCallback = prevScheduledCallback;
      timeoutTime = prevTimeoutTime;
      return;
    }
  }

  if (prevScheduledCallback !== null) {
    isFlushingHostCallback = true;
    try {
      prevScheduledCallback(didTimeout);
    } finally {
      isFlushingHostCallback = false;
    }
  }
};

// 取消
cancelHostCallback = function () {
  scheduledHostCallback = null;
  isMessageEventScheduled = false;
  timeoutTime = -1;
};