Dan讲react原理

https://overreacted.io/react-as-a-ui-runtime/

react 维护一个dom树对象 渲染，调用 creatElement原生方法创建dom，appendChild添加。

重新匹配，重新渲染，价格一个元素类型相同，不用创建新元素，复用，创建新元素之前的滚动状态等状态会丢掉。

数组遍历，key用对象的id最好，不能用index。因为list顺序变了，用对象id知道哪个可以重用，用inde显然不行。会有bug的。

组件内改变props无效，只能父组件改变，子组件更新。

UI树，一个json对象，包含type，包含children

渲染和提交两个阶段，渲染异步的，获得树。提交，同步的，真正渲染。

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

  function increment() {
    setCount(count + 1);
  }
 // 如果我们一开始就将 count 设置为 0 ，那么这只会是三次 setCount(1) 调用。
// 为了解决这个问题， setState 提供了一个接受“updater”函数的重载：
  function handleClick() {
    increment();
    increment();
    increment();
  }

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

  function increment() {
    setCount(c => c + 1);
  }
 // setState 提供了一个接受“updater”函数的重载：
// React would put the updater functions in a queue, and later run them in sequence, 
// resulting in a re-render with count set to 3.
  function handleClick() {
    increment();
    increment();
    increment();
  }

react 在渲染过程中不应该有可以看到的副作用。

自定义hook允许共享共同的状态逻辑，但是不会共享状态。每次调用hook都会声明其独立的状态。