React原理

• 函數(shù)式編程
• • • 回顧SCU和redux代碼
• vdom和diff
• JSX本質(zhì)
• 合成事件
• • • 為何要合成事件機制
• setState batchUpdate
• • • 核心要點
    • • setState主流程
      • batchUpdate機制
      • setState是同步還是異步
      • 哪些能命中batchUpdate機制
      • 哪些不能命中batchUpdate機制
      • transaction（事務(wù)）機制
• 組件渲染過程
• • • 回顧Vue組件渲染和更新過程
    • 回顧JSX本質(zhì)和vdom
    • 回顧dirtyComponents
    • 講解內(nèi)容
    • • 組件渲染過程
      • 組件更新過程
      • 更新的兩個階段
      • 可能會有性能問題
      • 解決方案 fiber
      • 關(guān)于fiber
    • 小結(jié)

函數(shù)式編程

一種編程范式，概念比較多
純函數(shù)
不可變值

回顧SCU和redux代碼

vdom和diff

h函數(shù)
vnode數(shù)據(jù)結(jié)構(gòu)
patch函數(shù)
只比較同一層級，不跨級比較
tag不相同，則直接刪掉重建，不再深度比較
tag和key，兩者都相同，則認為是相同節(jié)點，不再深度比較
Vue2.x Vue3.0 React三者實現(xiàn)vdom細節(jié)都不同
核心概念和實現(xiàn)思路，都一樣
面試主要考察后者，不用全部掌握細節(jié)

JSX本質(zhì)

JSX等同于Vue模板
Vue模板不是html
JSX也不是JS

// https://www.babeljs.cn/// // JSX 基本用法 // const imgElem = <div id="div1"> // <p>some text</p> // <img src={imgUrl}/> // </div>// // JSX style // const styleData = { fontSize: '30px', color: 'blue' } // const styleElem = <p style={styleData}>設(shè)置 style</p>// // JSX 加載組件 // const app = <div> // <Input submitTitle={onSubmitTitle}/> // <List list={list}/> // </div>// // JSX 事件 // const eventList = <p onClick={this.clickHandler}> // some text // </p>// // JSX list // const listElem = <ul>{this.state.list.map((item, index) => { // return <li key={item.id}>index {index}; title {item.title}</li> // })}</ul>// // 總結(jié) // React.createElement('div', null, [child1, child2, child3]) // React.createElement('div', {...}, child1, child2, child3) // React.createElement(List, null, child1, child2, '文本節(jié)點') // // h 函數(shù) // // 返回 vnode // // patch

React.createElement即h函數(shù)，返回vnode
第一個參數(shù)，可能是組件，也可能是html tag
組件名，首字母必須大寫（React規(guī)定）

合成事件

所有事件掛載到document上
event不是原生的，是SyntheticEvent合成事件對象
和Vue事件不同，和DOM事件也不同

// 1. event 是 SyntheticEvent ，模擬出來 DOM 事件所有能力// 2. event.nativeEvent 是原生事件對象// 3. 所有的事件，都被掛載到 document 上// 4. 和 DOM 事件不一樣，和 Vue 事件也不一樣

為何要合成事件機制

更好的兼容性和跨平臺
載到document，減少內(nèi)存消耗，避免頻繁解綁
方便事件的統(tǒng)一管理（如事務(wù)機制）

setState batchUpdate

有時異步（普通使用），有時同步（setTimeout、DOM事件）
有時合并（對象形式），有時不合并（函數(shù)形式）
后者比較好理解（像Object.assign），主要講解前者

核心要點

setState主流程

batchUpdate機制

setState是同步還是異步

setState無所謂異步還是同步
看是否能命中batchUpdate機制
判斷isBatchingUpdates

哪些能命中batchUpdate機制

生命周期（和它調(diào)用的函數(shù)）
React中注冊的時間（和它調(diào)用的函數(shù)）
React可以“管理”入口

哪些不能命中batchUpdate機制

setTimeout setInterval等（和它調(diào)用的函數(shù)）
自定義的DOM時間（和它調(diào)用的函數(shù)）
React“管不到”的入口

transaction（事務(wù)）機制

組件渲染過程

JSX如何渲染為頁面
setState之后如何更新頁面
面試考察全流程

回顧Vue組件渲染和更新過程

回顧JSX本質(zhì)和vdom

JSX即createElement函數(shù)
執(zhí)行生成vnode
patch(elem,vnode)和patch(vnode,newVnode)

回顧dirtyComponents

講解內(nèi)容

組件渲染過程

props state
render()生成vnode
patch(elem,vnode)

組件更新過程

setState(newState) --> dirtyComponents（可能有子組件）
render()生成newVnode
patch(vnode,newVnode)

更新的兩個階段

上述的patch被拆分為兩個階段：
reconciliation階段 - 執(zhí)行diff算法，純JS計算
commit階段 - 將diff結(jié)果渲染DOM

可能會有性能問題

JS是單線程，且和DOM渲染共用一個線程
當組件足夠復(fù)雜，組件更新時計算和渲染都壓力大
同事再有DOM操作需求（動畫，鼠標拖拽等），將卡頓

解決方案 fiber

將reconciliation階段進行任務(wù)拆分（commit無法拆分）
DOM需要渲染時暫停，空閑時恢復(fù)
window.requestIdleCallback

關(guān)于fiber

React內(nèi)部運行機制，開發(fā)者體會不到
了解背景和基本概念即可

小結(jié)

組件渲染和更新過程
更新的兩個階段，reconciliation及commit
React fiber

總結(jié)

以上是生活随笔為你收集整理的（八）React原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。