他根本不懂React

搜集了部分React作者 Dan Abramov 对于React的看法。
就像网友对尤大说的：《他根本不懂Vue》

关于前辈很烦人的事

React

React是什么，将 React 作为 UI 运行时

class组件和函数式组件有何不同

React Hooks原理探究，慎看

React元素

React 元素并不是永远存在的 。它们总是在重建和删除之间不断循环着。

React 元素具有不可变性。例如，你不能改变 React 元素中的子元素或者属性。如果你想要在稍后渲染一些不同的东西，你需要从头创建新的 React 元素树来描述它。

因此React 需要决定何时更新一个已有的宿主实例来匹配新的 React 元素，何时该重新创建新的宿主实例。

JSX

JSX是一个 JavaScript 的语法扩展，有人称它为Javascript XML，它的最大优点就是灵活，因为其本质就是JS，JS灵活所以JSX也灵活。

在React中，JSX会被编译成就是React.createElement()

JSX与模板都是视图层的DSL，二者各有千秋，个人看来模板有约束，但是约束之中会有性能提升的空间，（Vue的模板complier可以针对点对点进行diff），而JSX很灵活，但是却很难做到这一点。

JSX与模板的讨论
关于Vue3.0的模板为什么性能完爆JSX

更新流程

什么是更新，其实就是使宿主UI与React最新的元素树保持一致，将 React 元素树映射到宿主树（DOM/PDF/IOS）。
当父组件通过 setState 准备更新时，React 默认会协调整个子树。因为 React 并不知道在父组件中的更新是否会影响到其子代，所以 React 默认保持一致性。
React会生成一颗新的元素树，并在新旧两棵树之间做协调（Diff）。
批量更新：更新时，React 会先触发所有的事件处理器，然后再触发一次重渲染以进行所谓的批量更新，这就是在事件中setState是异步的原因。

React Fiber

React Fiber 是什么?
这可能是最通俗的 React Fiber(时间分片) 打开方式
漫画解释React Fiber
Fiber与Hooks是如何结合的

Javascript 引擎是单线程运行的。 严格来说，Javascript 引擎和页面渲染引擎在同一个渲染线程，GUI 渲染和 Javascript执行 两者是互斥的。另外异步 I/O 操作底层实际上可能是多线程的在驱动。

在React16之前，React协调是同步的（Stack Reconcilation），一边Diff一般更新dom，如果大批量同步更新会长期占用浏览器进程，是用户感觉到卡顿。而引用React Fiber之后，协调任务变成了异步，或者说，变成了一个协程（Fiber Reconcilation）。
Fiber解决的不是性能问题，而是调度问题。
① 将VirtualDOM 的数据结构改成了链表，这样可以避免递归而改成遍历，模拟函数调用栈
② 将渲染分为两个阶段，Reconciliation协调阶段和提交阶段，其中对生命周期函数的影响较大，废弃了部分生命周期。而提交阶段（前）的生命周期只能调用一次，所以大部分副作用会留在提交阶段调用。

协调阶段可能被中断、恢复，甚至重做，⚠️React 协调阶段的生命周期钩子可能会被调用多次!, 例如 componentWillMount 可能会被调用两次。

③双缓冲：React会维护一颗WorkInProgressTree，WIP树就是一个缓冲，它在Reconciliation 完毕后一次性提交给浏览器进行渲染。它可以减少内存分配和垃圾回收，WIP 的节点不完全是新的，比如某颗子树不需要变动，React会克隆复用旧树中的子树
④副作用的收集和提交

Hooks

React Hook 最佳实践 – React Blog
重渲染问题：React Hooks(四): immutable

useState

1. useState的原理：为什么useState能把组件和state联系起来
2. 函数式更新，意味着以函数的模式表达一个行为，让state来更新：setCount(c => c + 1)
3. hooks 的 setState: 如果前后两次的 state 引用相等，并不会刷新组件，因此需要用户进行保证当深比较结果不等的情况下，浅比较结果也不等，否则会造成视图和UI的不一致。

useEffect

useEffect 完整指南：

1. 函数式组件用了闭包，所以组件内部的任何函数，包括事件处理函数和 effect，都是从它被创建的那次渲染中被「看到」的。（class组件和函数式组件有何不同）
2. useEffect 可以看成是渲染的一部分，或者是React数据流的一部分。因为每一次渲染都会有一个新的useEffect函数。
3. 使用useReducer或者useRef获取state中的最新值以提供useEffect使用。
4. 如果某些函数仅在effect中调用，你可以把它们的定义移到effect中。若该函数用到state（数据流），需要添加这个state到effect依赖项。再如果该函数还需要复用，最好放外面且用useCallback来包裹一层，再添加到依赖项。
5. How to fetch data with React Hooks：你应该如何在React中请求数据。

useCallback

1.真正做到让函数参与到数据流，以props的形式传到子组件中，形成数据流，当callback中的函数变化时，props也会变化，这一点传统的class组件无法做到。

useRef

1. 生成一个在组件生命周期共享的盒子，可以在盒子中存放dom或者其他属性（state）
2. 而且对ref.current修改也不会引起组件渲染
3. 更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里
   useRef详细总结

 
 
 
 

• • • to be continued