React原理

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

函數(shù)式編程

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

回顧SCU和redux代碼

vdom和diff

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

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

合成事件

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

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

為何要合成事件機(jī)制

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

setState batchUpdate

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

核心要點(diǎn)

setState主流程

batchUpdate機(jī)制

setState是同步還是異步

setState無(wú)所謂異步還是同步
看是否能命中batchUpdate機(jī)制
判斷isBatchingUpdates

哪些能命中batchUpdate機(jī)制

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

哪些不能命中batchUpdate機(jī)制

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

transaction（事務(wù)）機(jī)制

組件渲染過(guò)程

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

回顧Vue組件渲染和更新過(guò)程

回顧JSX本質(zhì)和vdom

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

回顧dirtyComponents

講解內(nèi)容

組件渲染過(guò)程

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

組件更新過(guò)程

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

更新的兩個(gè)階段

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

可能會(huì)有性能問(wèn)題

JS是單線程，且和DOM渲染共用一個(gè)線程
當(dāng)組件足夠復(fù)雜，組件更新時(shí)計(jì)算和渲染都?jí)毫Υ?br /> 同事再有DOM操作需求（動(dòng)畫，鼠標(biāo)拖拽等），將卡頓

解決方案 fiber

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

關(guān)于fiber

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

小結(jié)

組件渲染和更新過(guò)程
更新的兩個(gè)階段，reconciliation及commit
React fiber

總結(jié)

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

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