四月八日

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

const ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher),
};
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  return ((dispatcher: any): Dispatcher);
}
export function useRef<T>(initialValue: T): {|current: T|} {
  const dispatcher = resolveDispatcher();
  return dispatcher.useRef(initialValue);
}

function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
    if (current !== null && current.memoizedState !== null) {
        ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
    } else if (hookTypesDev !== null) {
        // This dispatcher handles an edge case where a component is updating,
        // but no stateful hooks have been used.
        // We want to match the production code behavior (which will use HooksDispatcherOnMount),
        // but with the extra DEV validation to ensure hooks ordering hasn't changed.
        // This dispatcher does that.
        ReactCurrentDispatcher.current = HooksDispatcherOnMountWithHookTypesInDEV;
    } else {
        ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
    }
}

class MyComponent extends Component {
  renderRow = (index) => {
    // This won't work. Ref will get attached to DataTable rather than MyComponent:
    return <input ref={'input-' + index} />;

    // This would work though! Callback refs are awesome.
    return <input ref={input => this['input-' + index] = input} />;
  }
 
  render() {
    return <DataTable data={this.props.data} renderRow={this.renderRow} />
  }
}

export default class Index extends React.Component{
    render=()=> <div>
        <div ref={(node)=> this.currentDom = node } >hello word</div>
        <Children ref={(node) => this.currentComponentInstance = node  }  />
    </div>
}

export default class Index extends React.Component{
    currentDom = React.createRef(null)
    currentComponentInstance = React.createRef(null)
 
    render=()=> <div>
         <div ref={ this.currentDom } >hello word</div>
        <Children ref={ this.currentComponentInstance }  />
   </div>
}

class Level1 extends React.Component{
    render(){
        return <Level2 topRef={this.props.topRef}/>
    }
}

class Level2 extends React.Component{
    render(){
        return <input name='level2' ref={this.props.topRef}/>
    }
}

class TopLevel extends React.Component{
    topRef = React.createRef();
    componentDidMount(){
        console.log(this.topRef.current)
    }
    render(){
        return <Level1 topRef={this.topRef}/> 
    }
}

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));class Level1 extends React.Component{
    render(){
        return <Level2 topRef={this.props.topRef}/>
    }
}
const Level1Ref = React.forwardRef((props,ref)=> <Level1 {...props} topRef={ref}/>)
class Level2 extends React.Component{
    render(){
        return <input name='level2' ref={this.props.topRef}/>
    }
}

class TopLevel extends React.Component{
    topRef = React.createRef();
    componentDidMount(){
        console.log(this.topRef.current)
    }
    render(){
        return <Level1Ref ref={this.topRef}/> 
    }
}
export default TopLevel;

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

class Level1 extends React.Component{
    render(){
        return <Level2 topRef={this.props.topRef}/>
    }
}
const Level1Ref = React.forwardRef((props,ref)=> <Level1 {...props} topRef={ref}/>)
class Level2 extends React.Component{
    render(){
        return <input name='level2' ref={this.props.topRef}/>
    }
}

class TopLevel extends React.Component{
    topRef = React.createRef();
    componentDidMount(){
        console.log(this.topRef.current)
    }
    render(){
        return <Level1Ref ref={this.topRef}/> 
    }
}

// 表单组件
class Form extends React.Component{
    render(){
       return <div>{...}</div>
    }
}
// index 组件
class Index extends React.Component{ 
    componentDidMount(){
        const { forwardRef } = this.props
        forwardRef.current={
            form:this.form,      // 给form组件实例 ，绑定给 ref form属性 
            index:this,          // 给index组件实例 ，绑定给 ref index属性 
            button:this.button,  // 给button dom 元素，绑定给 ref button属性 
        }
    }
    form = null
    button = null
    render(){
        return <div   > 
          <button ref={(button)=> this.button = button }  >点击</button>
          <Form  ref={(form) => this.form = form }  />  
      </div>
    }
}
const ForwardRefIndex = React.forwardRef(( props,ref )=><Index  {...props} forwardRef={ref}  />)
// home 组件
export default function Home(){
    const ref = useRef(null)
     useEffect(()=>{
         console.log(ref.current)
     },[])
    return <ForwardRefIndex ref={ref} />
}

function logProps(WrappedComponent) {
    class LogProps extends React.Component {
        render() {
            return <WrappedComponent {...this.props} />;
        }
    }
    return LogProps;
}

class FancyButton extends React.Component {
    focus() {
        console.log('focus')
    }
    render(){
        return <div>wefwef</div>
    }
}

const HOCFancyButton = logProps(FancyButton);

class MyComponent extends React.Component {
    ref = React.createRef();
    componentDidMount(){
        console.log(this.ref.current)
    }
    render(){
        // 使用高阶组件的时候 ref指向的是LogProps，而不是FancyButton
        return <HOCFancyButton ref={this.ref}/>
    }
}

function logProps(WrappedComponent) {
    class LogProps extends React.Component {
        render() {
            const { forwardedRef, ...rest } = this.props;
            return <WrappedComponent {...rest} ref={forwardedRef} />;
        }
    }
    return React.forwardRef((props, ref) => <LogProps {...props} forwardRef={ref} />);
}

class FancyButton extends React.Component {
    focus() {
        console.log('focus')
    }
    render() {
        return <div>wefwef</div>
    }
}

const HOCFancyButton = logProps(FancyButton);

class MyComponent extends React.Component {
    ref = React.createRef();
    componentDidMount() {
        console.log(this.ref.current)
    }
    render() {
        return <HOCFancyButton ref={this.ref} />
    }
}

class Child extends React.Component{
    receiveMessageFromParent = (msg)=>{
        console.log(msg)
    }
    render(){
        return <>
            <button onClick={()=>this.receiveMessageFromParent('MessageFromChild')}>发消息给父组件</button>
            <div>child</div>
        </> 
    }
}

class Parent extends React.Component {
    childRef = React.createRef();
    sendMessageToChild = ()=>{
        this.childRef.current.receiveMessageFromParent('MessageFromParent')
    }
    receiveMessageFromChild = (msg)=>{
        console.log(msg);
    }
    render(){
        return <>
            <button type='button' onClick={this.sendMessageToChild}>发消息给子组件</button>
            <Child ref={this.childRef} receiveMessageFromChild={this.receiveMessageFromChild}/>
        </> 
    }
}

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

function Child(props, ref) {
    const inputRef = React.useRef();
    const sayChild = useCallback(()=>{
        console.log('child')
    },[])
    React.useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        },
        sayChild
    }));
    return <>
        <button onClick={()=> props.receiveMessageFromChild('MessageFromChild')}>发消息给父组件</button>
        <input ref={ref}/>
    </>
}
Child = React.forwardRef(Child)

const Parent = () => {
    const ref = React.useRef();
    React.useEffect(()=>{
        // 可以拿到子组件定义的方法,或者操作子组件的DOM元素
        console.log(ref.current)
    },[ref])
    const receiveMessageFromChild =useCallback((msg)=>{
        console.log(msg);
    },[])
    return <>
        <Child ref={ref} receiveMessageFromChild={receiveMessageFromChild}/>
    </>
}

// 在 commit 的 mutation 阶段会清空Ref
function commitDetachRef(current: Fiber) {
  const currentRef = current.ref;
  if (currentRef !== null) {
    if (typeof currentRef === 'function') {
      currentRef(null); 
    } else {
      currentRef.current = null;
    }
  }
}

function commitAttachRef(finishedWork: Fiber) {
  const ref = finishedWork.ref;
  if (ref !== null) {
    const instance = finishedWork.stateNode;
    let instanceToUse;
    switch (finishedWork.tag) {
      case HostComponent: //元素节点 获取元素
        instanceToUse = getPublicInstance(instance);
        break;
      default:  // 类组件直接使用实例
        instanceToUse = instance;
    }
    if (typeof ref === 'function') {
      ref(instanceToUse);  //* function 和 字符串获取方式。 */
    } else {
      ref.current = instanceToUse; /* ref对象方式 */
    }
  }
}

function coerceRef(returnFiber, current, element) {
    // 会用_stringRef给函数做标记，如果相同则直接返回原来的函数引用
    if (current !== null && current.ref !== null && typeof current.ref === 'function' && current.ref._stringRef === stringRef) {
        return current.ref;
    }

    var ref = function (value) {
        var refs = inst.refs;

        if (refs === emptyRefsObject) {
            // This is a lazy pooled frozen object, so we need to initialize.
            refs = inst.refs = {};
        }

        if (value === null) {
            delete refs[stringRef];
        } else {
            refs[stringRef] = value;
        }
    };

    ref._stringRef = stringRef;
    return ref;
}

function commitMutationEffects(){
     if (effectTag & Ref) {
      const current = nextEffect.alternate;
      if (current !== null) {
        commitDetachRef(current);
      }
    }
}

function commitLayoutEffects(){
     if (effectTag & Ref) {
      commitAttachRef(nextEffect);
    }
}

function markRef(current, workInProgress) {
  var ref = workInProgress.ref;

  if (
      // fiber初始化的时候，且定义了ref属性
      current === null && ref !== null
      // fiber更新的时候，ref对象的引用已经改变
      || current !== null && current.ref !== ref
    ) {
    // Schedule a Ref effect
    workInProgress.flags |= Ref;
  }
}

// 可以把函数定义为类的方法
<div ref={(node)=>{
    this.node = node
    console.log('此时的参数是什么：', this.node )
}}  >ref元素节点</div>

function safelyDetachRef(current) {
  const ref = current.ref;
  if (ref !== null) {
    if (typeof ref === 'function') {  // 函数式 ｜ 字符串
        ref(null)
    } else {
      ref.current = null;  // ref 对象
    }
  }
}

program
    // 通过 node xxx-cli.js -v 可以查看指定版本
	.version(require('../package').version, "-v, --version")

    // 可以修改首行的信息
    // 默认 Usage: sun-cra-cli [options] [command]
    // 修改为： sun-cra-cli [options-my] [command-my]
    .usage('<options-my> [command-my]')

    // 如果指定了-h 选项，默认-h 选项会被覆盖
    // .option('-h, --help', 'help information')
    .option('-s, --small', 'small pizza size')
    .option('-p, --pizza-type <type>', 'flavour of pizza')

    // 一定要放在参数处理的逻辑之前,否则不能执行
    program.parse(process.argv);

    // 获取选项执行其他的逻辑
    const options = program.opts();
    if (options.small) console.log('- small pizza size');
    if (options.pizzaType) console.log(`- ${options.pizzaType}`);

function help () {
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}
help()

program
    .command('init', 'generate a new project from a template')

program
  // 如果想让命令带上参数，就不能把命令描述写在第二个参数上，要用description方法
  .command('init')
  .description('clone a repository into a newly created directory')
  // 两个都是必选参数
  .argument('<username>', 'user to login')
  .argument('<password>', 'password for user, if required')

  // 这时执行 `node xxx-cli.js init` 并不会自动执行init命令所对应的文件
  // 需要在action中处理执行逻辑
  .action((username, password) => {
    console.log('username:', username);
    console.log('password:', password);
  });

program.parse(process.argv);

spinner.start('waiting')
spinner.succeed('successfully')
spinner.start('waiting')
spinner.succeed('successfully')

/**
✔ Initialization successful.
✔ Initialization successful.
*/

#!/usr/bin/env node
const { program } = require("commander");

/**
 * Usage: create-bigdata-frontend [options] <name>
 * name 项目名称 --ts 是否使用ts模板
 */
program
	.version(require('../package').version, "-v, --version") // 定义版本选项
	// .command('create [name]', 'create a project') // 定义命令+描述
	.arguments("<name>") // 定义命令参数
	.option("--ts", "using the typescript template") // 定义可提供的选项+描述: 是否使用ts
	.description("Create a project", { name: "Project name" }) // 描述+参数，描述
	.action((name, options, command) => { // 处理函数：(命令声明的所有参数, 选项, 命令对象自身)
		require("../lib/create.js")(name, options && options.ts);
	})
	.program.parse();

const CLIManager = require("./CLIManager");
module.exports = async (appName, ts) => {
  const cliM = new CLIManager({ appName });
  await cliM.downloadTemplate('https//:xxx.xxx.xxx/xx.git'); // 获取远程模板
  await cliM.writePackageJson(); // 修改package.json
  await cliM.rmGit(); // 移除原有.git信息
  await cliM.install(); // 安装依赖
};

const fs = require("fs");
const path = require("path");
const { exec } = require("child_process");
module.exports = class CLIManager {
  constructor({ appName }) {
    this.appName = appName;
    // 获取当前命令执行是的目录
    this.cwd = process.cwd();
    this.targetDir = path.join(process.cwd(), appName);
  }

  // 执行命令
  run(command, options, cb) {
    exec(command, options, (error, stdout, stderr) => {
      if (error !== null) {
        console.log(chalk.red("X"), "exec error: " + error);
        return;
      }
      cb(stdout);
    });
  }

  // 拉取远程模板
  downloadTemplate(repositiry) {
    return new Promise((resolve, reject) => {
      exec(
        `git clone https://github.com/jquery/jquery.git ${this.appName}`,
        (error, stdout, stderr) => {
          if (error !== null) {
            spinner.fail(`Failed fetching remote git repo`);
            reject(error);
            return;
          }
          resolve(stdout);
        }
      );
    });
  }

  // 删除.git
  rmGit() {
    return new Promise((resolve) => {
      this.run("rm -rf .git", { cwd: this.targetDir }, (stdout) => {
        resolve(stdout);
      });
    });
  }

  // 安装依赖
  install() {
    return new Promise((resolve) => {
      this.run("npm ci", { cwd: this.targetDir }, (stdout) => {
        resolve(stdout);
      });
    });
  }
};

{
  "extends": "stylelint-config-sass-guidelines",
  "plugins": [
    "stylelint-scss",
    "stylelint-order"
  ],
  "rules": {
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
}

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

{
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-prettier/recommended"
  ],
  "plugins": [
    "stylelint-scss"
  ]
}

module.exports =  {
  // 表示eslint检查只在当前目录生效
  root:true,

  // 默认ESlint使用Espree作为解析器，但是一旦我们使用babel的话，我们需要用@babel/eslint-parser。
  // 如果使用TS，则使用 @typescript-eslint/parser
  // Specifies the ESLint parser
  parser:  '@babel/eslint-parser',

  parserOptions: {
    // ecmaVersion: 默认值是5，可以设置为3、5、6、7、8、9、10，用来指定使用哪一个ECMAScript版本的 // 语法。也可以设置基于年份的JS标准，比如2015(ECMA 6),也可以设置 latest 使用最近支持的版本
    // specify the version of ECMAScript syntax you want to use: 2015 => (ES6)
    ecmaVersion: 'latest',
    // 如果你的代码是ECMAScript 模块写的，该字段配置为module，否则为script(默认值)
    sourceType:  'module',  // Allows for the use of imports
    // 额外的语言特性
    ecmaFeatures: {
      jsx: true, // enable JSX
      impliedStrict: true // enable global strict mode
    }，
      // babel 文件路径
    babelOptions: {
      configFile: './.babelrc',
    },
  },

  // 指定扩展的配置，配置支持递归扩展，支持规则的覆盖和聚合。
  extends:  [
    // // Uses airbnb, it including the react rule(eslint-plugin-react/eslint-plugin-jsx-a11y)
    'airbnb',
    // prettier规则额放在最后需要覆盖默认规则
    'plugin:prettier/recommended',
  ],

  // 字段定义的数据可以在所有的插件中共享。这样每条规则执行的时候都可以访问这里面定义的数据
  settings: {
    'import/resolver': { // This config is used by eslint-import-resolver-webpack
      webpack: {
        config: './webpack/webpack-common-config.js'
      }
    },
  },
  // 环境可以提供的全局变量
  env: {
    // enable all browser global variables
    browser: true
  },

  // 配置那些我们想要Linting规则的插件。
  // plugins: ['react-hooks', 'promise'],

  // 自定义规则，可以覆盖掉extends的配置。
  rules:  {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
};

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;
  }
}