# Dan讲react原理

[https://overreacted.io/react-as-a-ui-runtime/](https://overreacted.io/the-elements-of-ui-engineering/不需要按照特定的顺序学新东西弄清楚自己究竟懂什么，以及哪些东西是有价值的解决独特问题的过程中学的最多在不使用任何库的情况下，做一个微型的app，并且体验要好，有很多可以优化的地方，也能学到很多专注，在一个小的领域内做到优秀不需要懂很多，在一个领域内做到精深就可以了。前端非常大，选一个小的领域https://overreacted.io/preparing-for-tech-talk-part-1-motivation/喜欢用更简单的方式重新理解事物https://overreacted.io/react-as-a-ui-runtime/react)

react 维护一个dom树对象[  
](https://overreacted.io/the-elements-of-ui-engineering/不需要按照特定的顺序学新东西弄清楚自己究竟懂什么，以及哪些东西是有价值的解决独特问题的过程中学的最多在不使用任何库的情况下，做一个微型的app，并且体验要好，有很多可以优化的地方，也能学到很多专注，在一个小的领域内做到优秀不需要懂很多，在一个领域内做到精深就可以了。前端非常大，选一个小的领域https://overreacted.io/preparing-for-tech-talk-part-1-motivation/喜欢用更简单的方式重新理解事物https://overreacted.io/react-as-a-ui-runtime/react)渲染，调用 creatElement原生方法创建dom，appendChild添加。

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

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

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

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

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

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

```javascript
  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都会声明其独立的状态。