四月八日

function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  renderLanes: Lanes,
) {
  // stateNode 是 fiber 指向 类组件实例的指针。
  const instance = workInProgress.stateNode;
  let shouldUpdate;
  // instance 为组件实例,如果组件实例不存在，证明该类组件没有被挂载过，那么会走初始化流程
  if (instance === null) {
    // 在这个方法中组件通过new被实例化
    constructClassInstance(workInProgress, Component, nextProps);
    // 初始化挂载组件流程
    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
    // shouldUpdate 标识用来证明 组件是否需要更新。
    shouldUpdate = true;
  } else if (current === null) {
    // 已经存在了一个实例可以被复用
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderLanes,
    );
  } else {
    // 更新组件流程
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderLanes,
    );
  }

  const nextUnitOfWork = finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderLanes,
  );
  return nextUnitOfWork;
}

function finishClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  shouldUpdate: boolean,
  hasContext: boolean,
  renderLanes: Lanes,
) {
  // 即使 shouldComponentUpdate 返回了 false,Refs也应该被更新
  markRef(current, workInProgress);

  const instance = workInProgress.stateNode;

  // Rerender
  ReactCurrentOwner.current = workInProgress;
  // 获取子节点
  let nextChildren = instance.render();

  // 调和子节点
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);

  // Memoize state using the values we just used to render.
  // TODO: Restructure so we never read values from the instance.
  workInProgress.memoizedState = instance.state;

  // The context might have changed so we need to recalculate it.
  if (hasContext) {
    invalidateContextProvider(workInProgress, Component, true);
  }

  return workInProgress.child;
}

// 在从没有渲染过的实例上执行挂载生命周期
function mountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderLanes: Lanes,
): void {
  // 组件实例
  const instance = workInProgress.stateNode;
  instance.props = newProps;
  instance.state = workInProgress.memoizedState;
  instance.refs = emptyRefsObject;

  initializeUpdateQueue(workInProgress);
  
  // 拿到类组件构造函数的静态方法
  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
    if (typeof getDerivedStateFromProps === 'function') {
        var prevState = workInProgress.memoizedState;
        // 返回更新之后的state
        var partialState = getDerivedStateFromProps(nextProps, prevState);
        // 如果返回的state不合法，使用原有状态，否则合并两个状态生成一个新的state对象
        var memoizedState = partialState === null || partialState === undefined ? prevState : _assign({}, prevState, partialState);
        workInProgress.memoizedState = memoizedState; 
        
        // Once the update queue is empty, persist the derived state onto the
        // base state.
        if (workInProgress.lanes === NoLanes) {
            // Queue is always non-null for classes
            var updateQueue = workInProgress.updateQueue;
            updateQueue.baseState = memoizedState;
        }
        instance.state = workInProgress.memoizedState;
    }

  if (typeof instance.componentDidMount === 'function') {
    workInProgress.flags |= fiberFlags;
  }
}

function commitRootImpl(root, renderPriorityLevel){
    const finishedWork = root.finishedWork;
    commitLayoutEffects(finishedWork, root, lanes);
}

function commitLifeCycles(finishedRoot,current,finishedWork){
     switch (finishedWork.tag){                             /* fiber tag 在第一节讲了不同fiber类型 */
        case ClassComponent: {                              /* 如果是 类组件 类型 */
             const instance = finishedWork.stateNode        /* 类实例 */
             if(current === null){                          /* 类组件第一次调和渲染 */
                instance.componentDidMount() 
             }else{                                         /* 类组件更新 */
                instance.componentDidUpdate(prevProps,prevState，instance.__reactInternalSnapshotBeforeUpdate); 
             }
        }
     }
}

function commitLayoutEffectOnFiber(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedLanes: Lanes,
): void {
    switch (finishedWork.tag) {
        case ClassComponent: {
            const instance = finishedWork.stateNode;
            if (!offscreenSubtreeWasHidden) {
                if (
                    enableProfilerTimer &&
                    enableProfilerCommitHooks &&
                    finishedWork.mode & ProfileMode
                ) {
                    try {
                    startLayoutEffectTimer();
                    instance.componentDidMount();
                    } finally {
                    recordLayoutEffectDuration(finishedWork);
                    }
                } else {
                    instance.componentDidMount();
                }
               
            commitUpdateQueue(finishedWork, updateQueue, instance);
            }
            break;
        }
    }
}

function updateClassInstance(current,workInProgress,ctor,newProps,renderExpirationTime){
    // 类组件实例
    const instance = workInProgress.stateNode;
    // 判断是否具有 getDerivedStateFromProps 生命周期
    const hasNewLifecycles =  typeof ctor.getDerivedStateFromProps === 'function'
    if(!hasNewLifecycles && typeof instance.componentWillReceiveProps === 'function' ){
        // 浅比较 props 不相等
         if (oldProps !== newProps || oldContext !== nextContext) {
            // 执行生命周期 componentWillReceiveProps
            instance.componentWillReceiveProps(newProps, nextContext);
         }
    }
    let newState = (instance.state = oldState);
    if (typeof getDerivedStateFromProps === 'function') {
        /* 执行生命周期getDerivedStateFromProps  ，逻辑和mounted类似 ，合并state  */
        ctor.getDerivedStateFromProps(nextProps,prevState)  
        newState = workInProgress.memoizedState;
    }
    let shouldUpdate = true
    /* 执行生命周期 shouldComponentUpdate 返回值决定是否执行render ，调和子节点 */
    if(typeof instance.shouldComponentUpdate === 'function' ){ 
        shouldUpdate = instance.shouldComponentUpdate(newProps,newState,nextContext,);
    }
    if(shouldUpdate){
        if (typeof instance.componentWillUpdate === 'function') {
            /* 执行生命周期 componentWillUpdate  */
            instance.componentWillUpdate(); 
    }
    return shouldUpdate
}

var callComponentWillUnmountWithTimer = function (current, instance) {
  instance.props = current.memoizedProps;
  instance.state = current.memoizedState;

  {
    instance.componentWillUnmount();
  }
};

constructor(props){
    super(props)        // 执行 super ，别忘了传递props,才能在接下来的上下文中，获取到props。
    this.state={       //① 可以用来初始化state，比如可以用来获取路由中的
        name:'alien'
    }
    this.handleClick = this.handleClick.bind(this) /* ② 绑定 this */
    this.handleInputChange = debounce(this.handleInputChange , 500) /* ③ 绑定防抖函数，防抖 500 毫秒 */
    const _render = this.render
    this.render = function(){
        return _render.bind(this)  /* ④ 劫持修改类组件上的一些生命周期 */
    }
}

class ExampleComponent extends React.Component {
  constructor(props){
    this.state = {
      color: "red"
    };
  }
  state = {
    color: "red"
  };
  componentWillMount() {
    // 应该将初始化状态放到构造函数或属性的初始化状态中
    // this.setState({
    //   color: "red"
    // });
  }
}

// Before
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentWillMount() {
    this._asyncRequest = loadMyAsyncData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // 渲染加载状态 ...
    } else {
      // 渲染真实 UI ...
    }
  }
}

// This is an advanced example! It is not intended for use in application code.
// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
// Most components should just initiate async requests in componentDidMount.

class ExampleComponent extends React.Component {
  _hasUnmounted = false;

  state = {
    externalData: null,
  };

  constructor(props) {
    super(props);

    // Prime an external cache as early as possible.
    // Async requests are unlikely to complete before render anyway,
    // So we aren't missing out by not providing a callback here.
    asyncLoadData(this.props.someId);
  }

  componentDidMount() {
    // Now that this component has mounted,
    // Wait for earlier pre-fetch to complete and update its state.
    // (This assumes some kind of external cache to avoid duplicate requests.)
    asyncLoadData(this.props.someId).then(externalData => {
      if (!this._hasUnmounted) {
        this.setState({ externalData });
      }
    });
  }

  componentWillUnmount() {
    this._hasUnmounted = true;
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

// Before
class ExampleComponent extends React.Component {
  componentWillMount() {
    this.setState({
      subscribedValue: this.props.dataSource.value,
    });
    // 这是不安全的，它会导致内存泄漏！
    this.props.dataSource.subscribe(
      this.handleSubscriptionChange
    );
  }

  componentWillUnmount() {
    this.props.dataSource.unsubscribe(
      this.handleSubscriptionChange
    );
  }

  handleSubscriptionChange = dataSource => {
    this.setState({
      subscribedValue: dataSource.value,
    });
  };
}

class EmailInput extends Component {
  state = { email: this.props.email };

  render() {
    return <input onChange={this.handleChange} value={this.state.email} />;
  }

  handleChange = event => {
    this.setState({ email: event.target.value });
  };

  componentWillReceiveProps(nextProps) {
    // 这会覆盖所有组件内的 state 更新！
    this.setState({ email: nextProps.email });
  }
}

class EmailInput extends Component {
  state = {
    email: this.props.email
  };

  componentWillReceiveProps(nextProps) {
    // 只要 props.email 改变，就改变 state
    if (nextProps.email !== this.props.email) {
      this.setState({
        email: nextProps.email
      });
    }
  }
} 

class EmailInput extends Component {
  state = { email: this.props.defaultEmail };

  handleChange = event => {
    this.setState({ email: event.target.value });
  };

  render() {
    return <input onChange={this.handleChange} value={this.state.email} />;
  }
}

<EmailInput
  defaultEmail={this.props.user.email}
  key={this.props.user.id}
/>

class EmailInput extends Component {
  state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // 只要当前 user 变化，
    // 重置所有跟 user 相关的状态。
    // 这个例子中，只有 email 和 user 相关。
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }
}

getDerivedStateFromProps(nextProps,prevState)

getSnapshotBeforeUpdate(prevProps, prevState)

class ExampleComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (
      this.state.someStatefulValue !==
      prevState.someStatefulValue
    ) {
      this.props.onChange(this.state.someStatefulValue);
    }
  }
}

class ListBox extends React.Component {
  ref = React.createRef();
  previousScrollOffset=0;
  // 在列表更新的时候，读取DOM属性
  componentWillUpdate(nextProps, nextState) {
    // 当列列表个数被改变的时候计算偏移量
    if (this.props.list.length < nextProps.list.length) {
      this.previousScrollOffset =
        this.ref.current.scrollHeight - this.ref.current.scrollTop;
    }
  }
  // 在列表被挂载的时候修改DOM属性
  componentDidUpdate(){
    // previousScrollOffset ！== 容器高度时(2px是边框高度)，表示滚动条没有滚动到底部，可能在查看历史记录的状态
    if(this.previousScrollOffset!== this.ref.current.offsetHeight-2) return;

    // newScrollHeight - oldScrollHeight + lastScrollTop
    // 相当于在上一次的scrollTop上加上ScrollHeight的增量
    this.ref.current.scrollTop =  (this.ref.current.scrollHeight -　this.previousScrollOffset　)
    this.previousScrollOffset = 0;
  }
  render() {
    return (<div style={{ width: 300, height: 200, overflow: 'auto', border: '1px solid' }} ref={this.ref}>
      {this.props.list.map(item => <div style={{ height: 20 }}>{item.val}</div>)}
    </div>)
  }
}

class ListBox extends React.Component {
  ref = React.createRef();
  getSnapshotBeforeUpdate(prevProps, nextState) {
    if (this.props.list.length > prevProps.list.length) {
      return this.ref.current.scrollHeight - this.ref.current.scrollTop;
    }
  }
  componentDidUpdate(prevProps, prevState, snapshot){
    if(snapshot>this.ref.current.offsetHeight) return;
    this.ref.current.scrollTop =  (this.ref.current.scrollHeight -　snapshot　)
    console.log(this.ref.current.scrollTop);
  }
  render() {
    return (<div style={{ width: 300, height: 200, overflow: 'auto', border: '1px solid' }} ref={this.ref}>
      {this.props.list.map(item => <div style={{ height: 20 }}>{item.val}</div>)}
    </div>)
  }
}

/* children 组件 */
function ChidrenComponent(){
    return <div> In this chapter, let's learn about react props ! </div>
}
/* props 接受处理 */
class PropsComponent extends React.Component{
    componentDidMount(){
        console.log(this,'_this')
    }
    render(){
        const {  children , mes , renderName , say ,Component } = this.props
        const renderFunction = children[0]
        const renderComponent = children[1]
        /* 对于子组件，不同的props是怎么被处理 */
        return <div>
            { renderFunction() }
            { mes }
            { renderName() }
            { renderComponent }
            <Component />
            <button onClick={ () => say() } > change content </button>
        </div>
    }
}
/* props 定义绑定 */
class Index extends React.Component{
    state={  
        mes: "hello,React"
    }
    node = null
    say= () =>  this.setState({ mes:'let us learn React!' })
    render(){
        return <div>
            <PropsComponent  
               mes={this.state.mes}  // ① props 作为一个渲染数据源
               say={ this.say  }     // ② props 作为一个回调函数 callback
               Component={ ChidrenComponent } // ③ props 作为一个组件
               renderName={ ()=><div> my name is alien </div> } // ④ props 作为渲染函数
            >
                { ()=> <div>hello,world</div>  } { /* ⑤render props */ }
                <ChidrenComponent />             { /* ⑥render component */ }
            </PropsComponent>
        </div>
    }
}

<Container>
    <Children>
</Container>

<Container>
   { (ContainerProps)=> <Children {...ContainerProps}  /> }
</Container>

function  Container(props) {
    const  ContainerProps = {
        name: 'alien',
        mes:'let us learn react'
    }
    return  props.children(ContainerProps)
}

<Container>
    <Children />
    { (ContainerProps)=> <Children {...ContainerProps} name={'haha'}  />  }
</Container>

const Children = (props)=> (<div>
    <div>hello, my name is {  props.name } </div>
    <div> { props.mes } </div>
</div>)

function  Container(props) {
    const ContainerProps = {
        name: 'alien',
        mes:'let us learn react'
    }
     return props.children.map(item=>{
        if(React.isValidElement(item)){ // 判断是 react elment  混入 props
            return React.cloneElement(item,{ ...ContainerProps },item.props.children)
        }else if(typeof item === 'function'){
            return item(ContainerProps)
        }else return null
     })
}

const Index = ()=>{
    return <Container>
        <Children />
        { (ContainerProps)=> <Children {...ContainerProps} name={'haha'}  />  }
    </Container>
}

function Father(props){
    const { age,...fatherProps  } = props
    return <Son  { ...fatherProps }  />
}

function Father(prop){
    return React.cloneElement(prop.children,{  mes:'let us learn React !' })
}

const add = (a, b) => a + b;
export default add;

import bind from "./util/bind";
const log = bind(console.log, console);

export default log;

import add from "./util/add";
import log from "./log";

const count = add(1, 2);
log(count);

const webpack = require("../lib/myWebpack");
const config = require("../config/webpack.config");
const compiler = webpack(config);
compiler.run();

const path = require("path");

module.exports = {
  entry: "../src/index.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "main.js",
  },
};

const fs = require("fs");
const path = require("path");
const { parse } = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const { transformFromAst } = require("@babel/core");

const webpack = (config) => {
  return new Compiler(config);
};

class Compiler {
  constructor(options = {}) {
    this.options = options;
  }

  run() {
    const { entry } = this.options;
    // 获取node进程执行的目录
    const cwdPath = process.cwd();

    // 因为readFile中使用相对路径是以node进程执行时的路径作为基准路径
    // 可能有查不到文件报错的情况，这里使用path.resolve转换成绝对路径
    const relativeEntryPath = path.resolve(__dirname, entry);
    const file = fs.readFileSync(relativeEntryPath, "utf-8");

    // 把文件内容转换成ast抽象语法树
    // https://www.babeljs.cn/docs/babel-parser
    const ast = parse(file, {
      sourceType: "module",
    });

    // 收集入口文件依赖
    const deps = [];
    // 分析ast中的依赖关系保存奥依赖中
    traverse(ast, {
      ImportDeclaration: ({ node }) => {
        // 获取到依赖文件的引用路径
        const traverseModulePath = node.source.value;
        // 转换为绝对路径
        const relativePath = path.resolve(cwdPath, "src", traverseModulePath);
        deps.push(relativePath);
      },
    });

    // 编译代码，从ast编译为es5

    const { code } = transformFromAst(ast, null, {
      presets: ["@babel/preset-env"],
    });
    console.log(code);
  }
}
module.exports = webpack;

const fs = require("fs");
const path = require("path");
const { parse } = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const { transformFromAst } = require("@babel/core");

const webpack = (config) => {
  return new Compiler(config);
};

class Compiler {
  constructor(options = {}) {
    this.options = options;
  }
  analysis(entry) {
    // 获取node进程执行的目录
    const cwdPath = process.cwd();

    // 因为readFile中使用相对路径是以node进程执行时的路径作为基准路径
    // 可能有查不到文件报错的情况，这里使用path.resolve转换成绝对路径
    const relativeEntryPath = path.resolve(cwdPath, "src", entry);
    const file = fs.readFileSync(relativeEntryPath, "utf-8");

    // 把文件内容转换成ast抽象语法树
    // https://www.babeljs.cn/docs/babel-parser
    const ast = parse(file, {
      sourceType: "module",
    });

    // 收集入口文件依赖
    const deps = {};
    // 分析ast中的依赖关系保存到依赖中
    traverse(ast, {
      ImportDeclaration: ({ node }) => {
        // 获取到依赖文件的引用路径
        const traverseModulePath = node.source.value + ".js";
        // 转换为绝对路径
        const relativePath = path.resolve(cwdPath, "src", traverseModulePath);
        deps[traverseModulePath] = relativePath;
      },
    });

    // 编译代码，从ast编译为es5

    const { code } = transformFromAst(ast, null, {
      presets: ["@babel/preset-env"],
    });

    return {
      code,
      deps,
      entry,
    };
  }
  run() {
    const { entry } = this.options;
    // 保存加载的模块
    let module = [];
    let index = 0;
    let parseModule = this.analysis(entry);
    module.push(parseModule);

    while ((parseModule = module[index])) {
      const { deps } = parseModule;
      Object.keys(deps).forEach((depPath) => {
        parseModule = this.analysis(depPath);
        module.push(parseModule);
      });
      index++;
    }

    // 把各模块依赖关系从数据形式转换成对象的形式，方便使用
    module = module.reduce((o, item) => {
      o[item.entry] = {
        deps: item.deps,
        code: item.code,
      };
      return o;
    }, {});
  }
}

module.exports = webpack;

class Compiler {
  generate(module) {
    /**
     * 入口文件
     * var _add = _interopRequireDefault(require("./util/add"));
     * var _log = _interopRequireDefault(require("./log"));
     * function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
     * var count = (0, _add["default"])(1, 2);
     */

    /**
     * 模块文件
     * Object.defineProperty(exports, "__esModule", {
     *  value: true
     * });
     * exports["default"] = void 0;
     * var bind = require('./util/bind');
     * var log = bind(console.log, console);
     * var _default = log;
     * exports["default"] = _default;
     */
    const js = `
        (function(modules){
            //加载入口文件
            var fn = function(path){
                var code = modules[path].code;
                // 提供给模块内部使用的require
                var require = function(path){
                    return fn(path+'.js');
                }
                const exports = {};

                // 根据commonjs规范包装模块的方法
                (function(exports,require,code){
                    // eval方法中的字符串在运行时会向上级作用于查找需要的变量
                    eval(code)
                })(exports,require,code);
                // 导出给下一个模块使用
                return exports; 
            }

            // 加载入口文件
            fn('${this.options.entry}')

        })(${JSON.stringify(module)})
        `;
    const filename = path.resolve(
      this.options.output.path,
      this.options.output.filename
    );
    fs.writeFileSync(filename, js, "utf-8");
  }
}

class Compiler {
  constructor(options = {}) {
    this.options = options;
  }
  analysis(entry) {
    // 获取node进程执行的目录
    const cwdPath = process.cwd();

    // 因为readFile中使用相对路径是以node进程执行时的路径作为基准路径
    // 可能有查不到文件报错的情况，这里使用path.resolve转换成绝对路径
    const relativeEntryPath = path.resolve(cwdPath, "src", entry);
    const file = fs.readFileSync(relativeEntryPath, "utf-8");

    // 把文件内容转换成ast抽象语法树
    // https://www.babeljs.cn/docs/babel-parser
    const ast = parse(file, {
      sourceType: "module",
    });

    // 收集入口文件依赖
    const deps = {};
    // 分析ast中的依赖关系保存到依赖中
    traverse(ast, {
      ImportDeclaration: ({ node }) => {
        // 获取到依赖文件的引用路径
        const traverseModulePath = node.source.value + ".js";
        // 转换为绝对路径
        const relativePath = path.resolve(cwdPath, "src", traverseModulePath);
        deps[traverseModulePath] = relativePath;
      },
    });

    // 编译代码，从ast编译为es5

    let { code } = transformFromAst(ast, null, {
      presets: ["@babel/preset-env"],
    });
    code = `
            (function(exports,require){
                ${code}
            })
        `;
    return {
      code,
      deps,
      entry,
    };
  }
  run() {
    const { entry } = this.options;
    // 保存加载的模块
    let module = [];
    let index = 0;
    let parseModule = this.analysis(entry);
    module.push(parseModule);

    while ((parseModule = module[index])) {
      const { deps } = parseModule;
      Object.keys(deps).forEach((depPath) => {
        parseModule = this.analysis(depPath);
        module.push(parseModule);
      });
      index++;
    }
    let moduleString = "{";
    module.forEach((m) => {
      moduleString += `"${m.entry}":${m.code},`;
    });
    moduleString += "}";
    this.generate(moduleString);
  }
  generate(moduleString) {
    /**
     * 入口文件
     * var _add = _interopRequireDefault(require("./util/add"));
     * var _log = _interopRequireDefault(require("./log"));
     * function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
     * var count = (0, _add["default"])(1, 2);
     */

    /**
     * 模块文件
     * Object.defineProperty(exports, "__esModule", {
     *  value: true
     * });
     * exports["default"] = void 0;
     * var bind = require('./util/bind');
     * var log = bind(console.log, console);
     * var _default = log;
     * exports["default"] = _default;
     */
    const js = `
        (function(modules){
            function require(path){
                var exports = {};
                modules[path+'.js'](exports,require)
                return exports;
            }
            // 加载入口文件
            modules['${this.options.entry}']({},require)

        })(${moduleString})
        `;
    const filename = path.resolve(
      this.options.output.path,
      this.options.output.filename
    );
    fs.writeFileSync(filename, js, "utf-8");
  }
}

function adoptClassInstance(workInProgress: Fiber, instance: any): void {
  instance.updater = classComponentUpdater;
  workInProgress.stateNode = instance;
}

const classComponentUpdater = {
  enqueueSetState(inst, payload, callback) {
    // 获取当前fiber节点
    const fiber = getInstance(inst);
    // 获取当前更新时间
    const eventTime = requestEventTime();
    // 获取更新优先级
    const lane = requestUpdateLane(fiber);

    // 每一次调用`setState`，react 都会创建一个 update 
    const update = createUpdate(eventTime, lane);
    update.payload = payload;

    // 保存更新之后的会掉函数
    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }
    /* enqueueUpdate 把当前的update 传入当前fiber，待更新队列中 */
    enqueueUpdate(fiber, update, lane);

    // 开始调度更新
    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
  }
}

export function hydrateRoot(
  container: Container,
  initialChildren: ReactNodeList,
  options?: HydrateRootOptions,
): RootType {
  // 在root元素上监听所有的时间
  listenToAllSupportedEvents(container);
}

export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
    // 循环所有的事件名称，绑定事件
    allNativeEvents.forEach(domEventName => {
        listenToNativeEvent(domEventName, true, rootContainerElement);
    });
}

function listenToNativeEvent(domEventName, isCapturePhaseListener, rootContainerElement, targetElement) {
    addTrappedEventListener(target, domEventName, eventSystemFlags, isCapturePhaseListener);
}

function addTrappedEventListener(targetContainer, domEventName, eventSystemFlags, isCapturePhaseListener, isDeferredListenerForLegacyFBSupport) {
  var listener = createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags); // If passive option is not supported, then the
}

function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags) {
  var eventPriority = getEventPriorityForPluginSystem(domEventName);
  var 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);
}

function dispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent) {
  dispatchEventForPluginEventSystem(domEventName, eventSystemFlags, nativeEvent, null, targetContainer);
} // Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.

// 在`legacy`模式下，所有的事件都将经过此函数同一处理 
function dispatchEventForPluginEventSystem(domEventName, eventSystemFlags, nativeEvent, targetInst, targetContainer) {
  batchedEventUpdates(function () {
    return dispatchEventsForPlugins(domEventName, eventSystemFlags, nativeEvent, ancestorInst);
  });
}

function batchedEventUpdates(fn, a, b) {
  // 标记为批量更新
  // scheduleUpdateOnFiber中会根据这个变量判断是否批量更新
  isBatchingEventUpdates = true;
  try {
    return batchedEventUpdatesImpl(fn, a, b);
  } finally {
    // try 不会影响finally执行，执行结束后标记为false
    isBatchingEventUpdates = false;
    finishEventHandler();
  }
}

export default class index extends React.Component{
    state = { number:0 }
    handleClick= () => {
          this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback1', this.state.number)  })
          console.log(this.state.number)
          this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback2', this.state.number)  })
          console.log(this.state.number)
          this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback3', this.state.number)  })
          console.log(this.state.number)
    }
    render(){
        return <div>
            { this.state.number }
            <button onClick={ this.handleClick }  >number++</button>
        </div>
    }
} 

setTimeout(()=>{
  this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback1', this.state.number)  })
  console.log(this.state.number)
  this.setState({ number:this.state.number + 1 },()=>{    console.log( 'callback2', this.state.number)  })
  console.log(this.state.number)
  this.setState({ number:this.state.number + 1 },()=>{   console.log( 'callback3', this.state.number)  })
  console.log(this.state.number)
})

import ReactDOM from 'react-dom'
const { unstable_batchedUpdates } = ReactDOM
setTimeout(()=>{
    unstable_batchedUpdates(()=>{
        this.setState({ number:this.state.number + 1 })
        console.log(this.state.number)
        this.setState({ number:this.state.number + 1})
        console.log(this.state.number)
        this.setState({ number:this.state.number + 1 })
        console.log(this.state.number)
    })
})

handerClick=()=>{
  setTimeout(()=>{
      this.setState({ number: 1  })
  })
  this.setState({ number: 2  })
  ReactDOM.flushSync(()=>{
      this.setState({ number: 3  })
  })
  this.setState({ number: 4  })
}
render(){
   console.log(this.state.number)
   return ...
}

export default function Index(props){
  const [ number , setNumber ] = React.useState(0)
  /* 监听 number 变化 */
  React.useEffect(()=>{
      console.log('监听number变化，此时的number是:  ' + number )
  },[ number ])

  const handerClick = ()=>{
      // 遇到下面高优先级更新被合并更新
      setNumber(5) 

      // 和handerClick方法中下面的几个打印函数一样
      // 打印值都为0,每次触发更新之后，Index函数都会被重新执行
      // number值已经与当前环境绑定
      console.log(number);

      /** 高优先级更新 **/
      ReactDOM.flushSync(()=>{
          setNumber(3) 
      })

      // 批量更新，只会触发一次更新
      setNumber(1) 
      setNumber(2) 
      console.log(number);

      // 滞后更新 ，批量更新规则被打破
      setTimeout(()=>{
          setNumber(4) 
          console.log(number);
      })
     
  };

  // 每次函数被重新执行的时候，打印最新的state值
  console.log(number)
  return <div>
      <span> { number }</span>
      <button onClick={ handerClick }  >number++</button>
  </div>
}

const fs = require('fs');
const path = require('path');
const glob = require("glob")
const {promisify} = require('util');
const readFile = promisify(fs.readFile);

const {RawSource}  = require('webpack').sources;
const  { validate }  = require('schema-utils');

const schema = {
  "type": 'object',
  "properties": {
    "from": {
      "type": 'string',
    },
    "to": {
      "type": 'string',
    },
    "ignore": {
      "type": 'array',
    },
    // 不允许有其他属性
    "additionalProperties": false
  }
};

class CopyfilePlugin {
  constructor(options={}){
    // 验证参数
    validate(schema, options);
    this.options = options;
  }
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('CopyfilePlugin',(compilation)=>{
      compilation.hooks.additionalAssets.tapAsync('CopyfilePlugin', (callback) => {

        const {from,to,ignore} = this.options;
        // 获取系统运行时的文件目录
        const {context} = compiler.options;
        // 获取from的绝对路径
        const fromRelative = path.resolve(context,from,'*.*');

        // 获取from文件夹的文件
        // 排除不需要的文件
        const filePaths =  glob.sync(fromRelative,{
          ignore:['**/index.html']
        })
        filePaths.forEach(async (filePath)=>{
          const file = await readFile(filePath);
          // 获取文件名称
          const filename = path.basename(filePath);
          // 添加额外的打包资源
          compilation.assets[filename] = new RawSource(file);
        })

        callback()
      });
    })
  }
}

module.exports  =CopyfilePlugin;

"scripts": {
  "start": "node --inspect-brk ./node_modules/webpack/bin/webpack.js",
}

const {RawSource}  = require('webpack').sources;
const fs = require('fs');
const {promisify} = require('util');
const readFile = promisify(fs.readFile);
const path = require('path');

class Plugin1 {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('Plugin2',(compilation)=>{
      // compilation也有自己的生命周期
      // 可以对compilation对象上的资源进行操作
      compilation.hooks.additionalAssets.tapAsync('Plugin2', async (callback) => {
        
        const file = await readFile(path.resolve(__dirname,'../src/b.txt'));

        // 添加额外的打包资源
        compilation.assets['b.txt'] = new RawSource(file);
        callback()
      });
    })
  }
}

module.exports = Plugin1;