Skip to content

Commit

Permalink
feat: update article
Browse files Browse the repository at this point in the history
  • Loading branch information
Mayvis committed Sep 17, 2024
1 parent a5f456e commit 813c15b
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions content/blog/project-vue-to-react/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,11 +186,11 @@ const Foo: FC<FooProps> = ({ id }) => {

### React Weired Part

如果讀者有去了解一下 React 的源碼,他其實是有做一些 trade off 的,最經典的例子就是 `setState(1)` 兩次,他會重新渲染兩次,儘管兩個值相等,直到第三次觸發也是 `setState(1)`,這次他才不會觸發重新渲染,坦白說,這邊會讓開發者感到非常困惑,為何同值你還要重新渲染?
舉個例子,如果讀者有去了解一下 React 的源碼,他其實是有做一些 trade off 的,最經典的例子就是 `setState(1)` 兩次,他會重新渲染兩次,儘管兩個值相等,直到第三次觸發也是 `setState(1)`,這次他才不會觸發重新渲染,坦白說,這邊會讓開發者感到非常困惑,為何同值你還要重新渲染?

這部分的操作在 React 叫做 eagerState,我本人也有在 React 的 issue 上加入討論 [link](https://github.com/facebook/react/issues/28779),我非常建議可以稍微去看一下那些工程師做的解釋,不過這部分其實也是屬於比較少見及發生的情況,畢竟你為何要更新同樣的值?如果相同為何不 return 掉?

總而言之,這奇怪的情況在 Vue 及 Angular 是沒有的,根本原因在於 React 跟前面所提及的二者是不同的開發體系跟方式,React 在架構上是使用 Fiber,讀者可以去了解一下。
總而言之,這奇怪的情況在 Vue 及 Angular 是沒有的,根本原因在於 React 跟前面所提及的二者是不同的開發體系跟方式,React 在架構上是使用 Fiber,讀者可以去了解一下,網路上有相當多的閱讀 React 源碼 Fiber 解析的資訊讀者可以去學習,我這邊就不多加贅述,當你了解原因後,這奇怪的原因,不可否認還是奇怪,但是你會比較可以接受他,另外還有類似 strict mode、useEffect...等

### Ask question

Expand Down

0 comments on commit 813c15b

Please sign in to comment.