React17在我看來是這樣的
本文適合覺得React難學(xué)，或者想重頭系統(tǒng)化學(xué)習(xí)React的小伙伴。
如果這篇文章有觸動(dòng)到你，歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～
作者：廣東靚仔
一、前言
本文基于開源項(xiàng)目：
https://github.com/facebook/react
React官方文檔寫得特別好，還帶著我們?nèi)ヮI(lǐng)悟它的設(shè)計(jì)模式。
1.1 沒有React基礎(chǔ)可以開始用React17嗎?
二、React 17 帶來了哪些改變
基石 ，為什么這么說呢？細(xì)心的小伙伴們會發(fā)現(xiàn)官方描述了這么一句話：“React v17 開啟了 React 漸進(jìn)式升級的新篇章”。這句話我看出了雄心勃勃，后續(xù) 18、19 等的更新版本一定是以17這個(gè)“基石”來開啟新篇章。這里列舉讓廣東靚仔眼前一亮的兩點(diǎn)：
1、新的 JSX 轉(zhuǎn)換邏輯
2、事件系統(tǒng)重構(gòu)
當(dāng)然React17也有其他的更新，大家有興趣可以去看官方文檔。
三、重構(gòu) JSX 轉(zhuǎn)換邏輯
React17之前我們?nèi)绻@樣寫，代碼如下：
function MyComponent() {
return <p>前端早茶</p>
}
頁面是會報(bào)錯(cuò)的，why?
上一篇文章有講到React 中對 JSX 代碼的轉(zhuǎn)換依賴的是 React.createElement 這個(gè)函數(shù)。有興趣可以回頭看下上一篇文章。
因此在寫JSX的時(shí)候，是一定要在頭部引入React的，代碼如下：
import React from 'react';
function MyComponent() {
return <p>前端早茶</p>
}
import React from 'react'; React17中編譯器會自動(dòng)幫我們引入 JSX 的解析器的，例如：
function MyComponent() {
return <p>前端早茶</p>
}
這個(gè)代碼最后會被編譯器轉(zhuǎn)換為：
import {jsx as _jsx} from 'react/jsx-runtime';
function MyComponent() {
return _jsx('p', { children: '前端早茶' });
}
https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation
四、事件系統(tǒng)重構(gòu)
React17版本中事件系統(tǒng)重構(gòu)可以分為兩塊來看：
放棄document 來做事件的中心化管控 放棄事件池 4.1 卸掉歷史包袱
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
之后React 組件就只能自己管理自己的東東了，無法再影響到全局了。
4.2 擁抱新潮流
廣東靚仔找來了官方的代碼，來說明：
function handleChange(e) {
// This won't work because the event object gets reused.
setTimeout(() => {
console.log(e.target.value); // Too late!
}, 100);
}
要想獲取的話，我們就需要使用e.persist() ，代碼如下：
function handleChange(e) {
// Prevents React from resetting its properties:
e.persist();
setTimeout(() => {
console.log(e.target.value); // Works
}, 100);
}
五、總結(jié)
在看源碼前，我們先去官方文檔復(fù)習(xí)下框架設(shè)計(jì)理念、源碼分層設(shè)計(jì) 閱讀下框架官方開發(fā)人員寫的相關(guān)文章 借助框架的調(diào)用棧來進(jìn)行源碼的閱讀，通過這個(gè)執(zhí)行流程，我們就完整的對源碼進(jìn)行了一個(gè)初步的了解 接下來再對源碼執(zhí)行過程中涉及的所有函數(shù)邏輯梳理一遍
關(guān)注我，一起攜手進(jìn)階
如果這篇文章有觸動(dòng)到你，歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～