let firstRender = true;

function RenderFunctionComponent() {
  let initName;

  if(firstRender){
    [initName] = useState("Rudi");
    firstRender = false;
  }
  const [firstName, setFirstName] = useState(initName);
  const [lastName, setLastName] = useState("Yardley");

  return (
    <Button onClick={() => setFirstName("Fred")}>Fred</Button>
  );
}

ReactDOM.render(
  <button className="blue" />,
  document.getElementById('container')
);

// ... 之后 ...

// 应该替换掉 button 宿主实例吗？
// 还是在已有的 button 上更新属性？
ReactDOM.render(
  <button className="red" />,
  document.getElementById('container')
);

let domNode = domContainer.firstChild;
// 更新已有的宿主实例
domNode.className = 'red';

// let domNode = document.createElement('button');
// domNode.className = 'blue';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <button className="blue" />,
  document.getElementById('container')
);

// 能重用宿主实例吗？能！(button → button)
// domNode.className = 'red';
ReactDOM.render(
  <button className="red" />,
  document.getElementById('container')
);

// 能重用宿主实例吗？不能！(button → p)
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <p>Hello</p>,
  document.getElementById('container')
);

// 能重用宿主实例吗？能！(p → p)
// domNode.textContent = 'Goodbye';
ReactDOM.render(
  <p>Goodbye</p>,
  document.getElementById('container')
);

function Form({ showMessage }) {
  let message = null;
  if (showMessage) {
    message = <p>I was just added here!</p>;
  }
  return (
    <dialog>
      {message}
      <input />
    </dialog>
  );
}

function ShoppingList({ list }) {
  return (
    <form>
      {list.map(item => (
        <p key={item.productId}>
          You bought {item.name}
          <br />
          Enter how many do you want: <input />
        </p>
      ))}
    </form>
  )
}

function Page({ currentUser, children }) {
  if (!currentUser.isLoggedIn) {
    return <h1>Please login</h1>;
  }
  return (
    <Layout>
      {children}
    </Layout>
  );
}

<Page>
  {Comments()}
</Page>

function Parent() {
  let [count, setCount] = useState(0);
  return (
    <div onClick={() => setCount(count + 1)}>
      Parent clicked {count} times
      <Child />
    </div>
  );
}

function Child() {
  let [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Child clicked {count} times
    </button>
  );
}

*** 进入 React 浏览器 click 事件处理过程 ***
Child (onClick)
  - setState
  - re-render Child // 😞 不必要的重渲染
Parent (onClick)
  - setState
  - re-render Parent
  - re-render Child
*** 结束 React 浏览器 click 事件处理过程 ***

*** 进入 React 浏览器 click 事件处理过程 ***
Child (onClick)
  - setState
Parent (onClick)
  - setState
*** Processing state updates                     ***
  - re-render Parent
  - re-render Child
*** 结束 React 浏览器 click 事件处理过程  ***

import React from "react";
import ReactDOM from "react-dom";

import ProfilePageFunction from './ProfilePageFunction';
import ProfilePageClass from './ProfilePageClass';

class App extends React.Component {
  state = {
    user: 'Dan',
  };
  render() {
    return (
      <>
        <label>
          <b>Choose profile to view: </b>
          <select
            value={this.state.user}
            onChange={e => this.setState({ user: e.target.value })}
          >
            <option value="Dan">Dan</option>
            <option value="Sophie">Sophie</option>
            <option value="Sunil">Sunil</option>
          </select>
        </label>
        <h1>Welcome to {this.state.user}’s profile!</h1>
        <p>
          <ProfilePageFunction user={this.state.user} />
          <b> (function)</b>
        </p>
        <p>
          <ProfilePageClass user={this.state.user} />
          <b> (class)</b>
        </p>
        <p>
          Can you spot the difference in the behavior?
        </p>
      </>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from 'react';

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

export default ProfilePage;

class ProfilePage extends React.Component {
  constructor(props) {
    super(props);
    this.showMessage = this.showMessage.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  showMessage() {
    alert('Followed ' + this.props.user);
  }

  handleClick() {
    setTimeout(this.showMessage, 3000);
  }

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

class ProfilePage extends React.Component {
  showMessage = (user) => {
    alert('Followed ' + user);
  };

  handleClick = () => {
    const {user} = this.props;
    setTimeout(() => this.showMessage(user), 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

class ProfilePage extends React.Component {
  render() {
    // Capture the props!
    const props = this.props;

    // Note: we are *inside render*.
    // These aren't class methods.
    const showMessage = () => {
      alert('Followed ' + props.user);
    };

    const handleClick = () => {
      setTimeout(showMessage, 3000);
    };

    return <button onClick={handleClick}>Follow</button>;
  }
}

function ProfilePage({ user }) {
  const showMessage = () => {
    alert('Followed ' + user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

function MessageThread() {
  const [message, setMessage] = useState('');

  const showMessage = () => {
    alert('You said: ' + message);
  };

  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };

  return (
    <>
      <input value={message} onChange={handleMessageChange} />
      <button onClick={handleSendClick}>Send</button>
    </>
  );
}

function ProfilePage(props) {
  const ref = useRef(null);
  const showMessage = () => {
    alert("Followed " + ref.current.user);
  };
  useEffect(() => {
    ref.current ={user:props.user};
  }, [props,ref]);
  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return <button onClick={handleClick}>Follow</button>;
}

<div style={shouldHide ? {display: 'none'} : {}}>
  <Foo/>
</div>

import React, { useEffect, useState,useRef, useCallback } from 'react';
import ReactDOM from 'react-dom'

const KeepAlive = (props)=>{
  // 创建DOM元素用于缓存react子元素
  const [targetElement] = useState(()=>document.createElement('div'));
  // 用于挂载缓存的子元素
  const containerRef = useRef(null)
  // 通过外层属性判断是否需要渲染自元素
  useEffect(()=>{
    if (props.active) {
      containerRef.current.appendChild(targetElement)
    } else {
      try {
        containerRef.current.removeChild(targetElement)
      } catch (e) {}
    }
  },[
    props.active,
    targetElement
  ])
  
  return (
    <>
      <div ref={containerRef} />
      {ReactDOM.createPortal(props.children, targetElement)}
    </>
  )
}

const Count = ()=>{
  const [count,setCount]=  useState(1);
  const addCount = useCallback(()=>{
    setCount(state=>state+1);
  },[
    setCount
  ])
  return (<div>
    <div onClick={addCount}>+1</div>
    <div>
      {count}
    </div>
  </div>)
}

const App = ()=>{
  const [shouldHide,setShouldHide] = useState(false);
  
  const toggleVisable = useCallback(()=>{
    setShouldHide(state=>!state)
  },[
    setShouldHide
  ])

  return (
    <div>
      <div>xxx</div>
      <div onClick={toggleVisable}>显示隐藏</div>
      <KeepAlive active={!shouldHide}>
        <Count/>
      </KeepAlive>
    </div>
  )
}

export default App;

const KeepAlive = (props)=>{
  const [targetElement] = useState(()=>document.createElement('div'));
  const containerRef = useRef(null);
  const activeMark = useRef(false);
  //一旦第一次加载后，会被标记为true,已加载并不会再改变
  activeMark.current = activeMark.current || props.active;
  useEffect(()=>{
    if (props.active) {
      containerRef.current.appendChild(targetElement)
    } else {
      try {
        containerRef.current.removeChild(targetElement)
      } catch (e) {}
    }
  },[
    props.active,
    targetElement
  ])
  return (
    <>
      <div ref={containerRef} />
      {
        activeMark.current && ReactDOM.createPortal(props.children, targetElement)
      }
    </>
  )
}

{show && (
  <KeepAlive>
    <Counter />
  </KeepAlive>
)}

import React, { createContext, useCallback, useRef, useState,memo, useEffect, useContext, useLayoutEffect } from 'react'

const KeepAliveContext = createContext()

export const AliveScope = memo((props) => {
  const nodes = useRef({});
  const [cache,setCache] = useState({});
  const promiseThen = useRef([]);
  
  useLayoutEffect(()=>{
    while(promiseThen.current.length) {
      const [resolve,id] = promiseThen.current.pop();
      resolve(nodes.current[id]);
    }
  },[
    cache,
  ])

  const keep = useCallback((id,children)=>(
    new Promise(resolve=>{
      setCache(cache=> ({...cache,[id]:children}));
      promiseThen.current.push([resolve,id])
    })
  ),[setCache]);
  
  return (
    <KeepAliveContext.Provider value={keep}>
      {props.children}
      {Object.entries(cache).map(([id, children]) => (
        <div
          key={id}
          ref={node => {
            nodes.current[id] = node
          }}
        >
          {children}
        </div>
      ))}
    </KeepAliveContext.Provider>
  )
})

const KeepAlive = memo(({id,children})=>{
  const keep = useContext(KeepAliveContext);
  const mountRef= useRef(null);

  useEffect(()=>{
     (async ()=>{
      const element = await keep(id,children);
      console.log(element);
      mountRef.current && mountRef.current.appendChild(element)
    })()
  },[
    id,
    children,
    keep
  ])

  return (<div ref = {mountRef}></div>)
})

(function(modules) { // webpackBootstrap
 	// 模块的缓存
 	var installedModules = {};

 	// 核心require方法
 	function __webpack_require__(moduleId) {
 		// 如果存在缓存直接返回
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// 创建一个新的module并放入的缓存中
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// 执行模块函数
    // 导出的对象会被添加到module.exports对象中
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    // 标识为loading状态
 		module.l = true;

 		// 返回模块中导出的对象
 		return module.exports;
 	}


 	// expose the modules object (__webpack_modules__)
  // 所有的模块对象
 	__webpack_require__.m = modules;

 	// expose the module cache
  // 被缓存的模块对象
 	__webpack_require__.c = installedModules;


 	// 在导出对象上定义 __esModule 属性，es6模块化规范
 	__webpack_require__.r = function(exports) {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};
 
 	// 加载入口文件并导出
  // __webpack_require_方法上添加一个静态属性s,标识入口文件模块索引
 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
/************************************************************************/
 ({
"./src/app.js":
  (function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.r(__webpack_exports__);
    console.log('app')
    function App(){};
    __webpack_exports__["default"] = (App)
  }),

"./src/index.js":
  (function(module, __webpack_exports__, __webpack_require__) {
  __webpack_require__.r(__webpack_exports__);
    var _app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/app.js");
    Object(_app__WEBPACK_IMPORTED_MODULE_0__["default"])();
    console.log("index.js");
  })
 });

(() => {
 	"use strict";
  // 类似react hooks的写法,直接在内部作用域中定义并执行
 	var __webpack_modules__ = ({
    "./src/app.js":
      ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

        __webpack_require__.r(__webpack_exports__);

        // 在指定的对象上面添加属性
        __webpack_require__.d(__webpack_exports__, {
          // 定义一个函数不会使用到未初始化的变量
          "default": () => (__WEBPACK_DEFAULT_EXPORT__)
        });
        console.log('app');
        function App(){}
        const __WEBPACK_DEFAULT_EXPORT__ = (App);
      }),
    "./src/index.js":
      ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
        __webpack_require__.r(__webpack_exports__);
        var _app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/app.js");
        // ???????
        (0,_app__WEBPACK_IMPORTED_MODULE_0__.default)();
        console.log("index.js");
      })
  });
  // 模块缓存
  var __webpack_module_cache__ = {};

  // __webpack_require__没有变化
 	function __webpack_require__(moduleId) {
 		// Check if module is in cache
 		if(__webpack_module_cache__[moduleId]) {
 			return __webpack_module_cache__[moduleId].exports;
 		}

 		var module = __webpack_module_cache__[moduleId] = {
 			// no module.id needed
 			// no module.loaded needed
 			exports: {}
 		};
 	
 		// Execute the module function
 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 	
 		// Return the exports of the module
 		return module.exports;
 	}
 	
 	(() => {
 		// define getter functions for harmony（和谐） exports
    // 
 		__webpack_require__.d = (exports, definition) => {
 			for(var key in definition) {
        // 如果exports没有想添加的属性时
 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
          // 在exports上添加注入的属性
 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 				}
 			}
 		};
 	})();
 	
 	// hasOwnProperty简写
 	(() => {
 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 	})();
 	
  // 添加Module标识
 	(() => {
 		__webpack_require__.r = (exports) => {
 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			}
 			Object.defineProperty(exports, '__esModule', { value: true });
 		};
 	})();
 	
 	
 	// startup
 	// Load entry module and return exports
 	// This entry module can't be inlined because the eval devtool is used.
 	var __webpack_exports__ = __webpack_require__("./src/index.js");
 	
 })()
;

(function(modules) {
 	// 加载异步模块成功后的回调函数
 	function webpackJsonpCallback(data) {
 		var chunkIds = data[0];
 		var moreModules = data[1];

 		// add "moreModules" to the modules object,
 		// then flag all "chunkIds" as loaded and fire callback
 		var moduleId, chunkId, i = 0, resolves = [];
 		for(;i < chunkIds.length; i++) {
 			chunkId = chunkIds[i];
 			if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
        // 把模块请求promise的resolve函数添加到数组中
 				resolves.push(installedChunks[chunkId][0]);
 			}
      // 标记模块已经加载完成
 			installedChunks[chunkId] = 0;
 		}

    //在模块集合中添加异步请求的模块
 		for(moduleId in moreModules) {
 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
 				modules[moduleId] = moreModules[moduleId];
 			}
 		}

    // 异步模块的信息添加到全局的jsonpArray中
 		if(parentJsonpFunction) parentJsonpFunction(data);

 		while(resolves.length) {
 			resolves.shift()();
 		}
 	};


 	// The module cache
 	var installedModules = {};

 	// object to store loaded and loading chunks
 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 	// Promise = chunk loading, 0 = chunk loaded
  // 标识模块加载的4个状态
 	var installedChunks = {
 		"main": 0
 	};

 	// script path function
 	function jsonpScriptSrc(chunkId) {
 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
 	}

 	// require方法无变化
 	function __webpack_require__(moduleId) {
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 		module.l = true;
 		return module.exports;
 	}

 	// 这个文件只包含入口chunk
 	// 额外的chunks使用chunk loading函数
 	__webpack_require__.e = function requireEnsure(chunkId) {
 		var promises = [];
 		// JSONP chunk loading for javascript
    // 检查已经安装的包中有没有当前模块
 		var installedChunkData = installedChunks[chunkId];
 		if(installedChunkData !== 0) { // 0 means "already installed".

 			// a Promise means "currently loading".
      // 4个状态中只有Promise为真
 			if(installedChunkData) {
 				promises.push(installedChunkData[2]);
 			} else {
 				// setup Promise in chunk cache
 				var promise = new Promise(function(resolve, reject) {
 					installedChunkData = installedChunks[chunkId] = [resolve, reject];
 				});
        // installedChunkData = [resolve, reject,Promise]
 				promises.push(installedChunkData[2] = promise);

 				// 开始加载异步模块
 				var script = document.createElement('script');
 				var onScriptComplete;

 				script.charset = 'utf-8';
 				script.timeout = 120;
 				if (__webpack_require__.nc) {
 					script.setAttribute("nonce", __webpack_require__.nc);
 				}
 				script.src = jsonpScriptSrc(chunkId);

 				// create error before stack unwound to get useful stacktrace later
 				var error = new Error();
 				onScriptComplete = function (event) {
 					// avoid mem leaks in IE.
          // 避免IE内存泄漏
 					script.onerror = script.onload = null;
 					clearTimeout(timeout);
 					var chunk = installedChunks[chunkId];
 					if(chunk !== 0) {
 						if(chunk) {
 							var errorType = event && (event.type === 'load' ? 'missing' : event.type);
 							var realSrc = event && event.target && event.target.src;
 							error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
 							error.name = 'ChunkLoadError';
 							error.type = errorType;
 							error.request = realSrc;
 							chunk[1](error);
 						}
 						installedChunks[chunkId] = undefined;
 					}
 				};
 				var timeout = setTimeout(function(){
 					onScriptComplete({ type: 'timeout', target: script });
 				}, 120000);
 				script.onerror = script.onload = onScriptComplete;
 				document.head.appendChild(script);
 			}
 		}
 		return Promise.all(promises);
 	};

 	// expose the modules object (__webpack_modules__)
 	__webpack_require__.m = modules;

 	// expose the module cache
 	__webpack_require__.c = installedModules;

 	// define __esModule on exports
 	__webpack_require__.r = function(exports) {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};

 	// __webpack_public_path__
 	__webpack_require__.p = "";

 	// on error function for async loading
 	__webpack_require__.oe = function(err) { console.error(err); throw err; };


	// 定义全局变量
 	var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
 	var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
	// push方法会调用webpackJsonpCallback
 	jsonpArray.push = webpackJsonpCallback;
 	jsonpArray = jsonpArray.slice();
 	for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
 	var parentJsonpFunction = oldJsonpFunction;


  // 加载入口模块
 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
/************************************************************************/
 ({
    "./src/index.js":
      (function(module, exports, __webpack_require__) {
      __webpack_require__.e(0)
        .then(__webpack_require__.bind(null, "./src/app.js"))
        .then(module=>{(module.default)()});
        console.log("index.js");
    })

 });

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
"./src/app.js":
(function(module, __webpack_exports__, __webpack_require__) {
  __webpack_require__.r(__webpack_exports__);
  console.log('app');
  function App(){};
  __webpack_exports__["default"] = (App);
  })
}]);