React - 入門：前導、環境、目錄、原理

前導介紹：

facebook、2013開源。官網：https://reactjs.org/

版本v16以後，對其底層的核心算法進行了重構，引入了底層的新引擎React Fiber（16版本之後的react）

可支持服務端渲染

生態豐富：React Router、React Native、React VR、Redux（狀態管理）、Jest（測試相關開發）、TypeScript等

應用：支持前端開發、服務端開發、移動端開發、vr項目開發

優勢：項目容易維護，使用了虛擬DOM、相較於直接操做dom來講性能更好。

特色：API比較少

環境安裝：

1. 本機React開發環境安裝。

npm安裝命令：sudo npm i create-react-app -g 

（mac版複製上述命令到全局命令行。window版去掉前邊sudo關鍵字進行安裝。下同）

 

建立項目：（對應目錄下執行命令）：create-react-app 自定義文件夾名字

 

（在要建立react項目的目錄下，開啓命令行輸入上述命令。）

 

觀察命令行，create的過程當中安裝了三個東西：-

①. react：安裝react

②. react-dom：此庫用來渲染dom，若是沒有他，咱們的代碼沒有辦法渲染到dom當中，因此須要引入，使用react，必須引入react-dom。

③. react-scripts：內置的webpack，有一些命令可讓咱們去使用

 

安裝完畢後，可使用如下幾個運行的命令：

 

 

值得注意的是，npm start 沒有run，可是npm run build 就須要run。

另外，npm run eject是不可會退的，他會把你全部的依賴都移除，因此謹慎使用。

 

2. Chrome開發者工具安裝。

　　a. React Devloper Tools

　　b. Redux DevTools

（須要安裝如下兩個，自行想辦法去chrome商店安裝。或者能夠去插件相關github下載安裝包，解壓後打開這個地址chrome://extensions/拖拽到chrome進行安裝）

模版目錄：

react項目目錄

若是學過vue，跟vue的目錄基本一致

□ node_modules 

□ public

□ src

□ package.json

□ .gitignore

□ readme.md

重點說下public和src文件夾

· public

favicon.icon
index.html	根目錄文件
manifest.json	實現一個快捷圖標，配合serviceWorker實現pwa

· src

App.css
App.js	主頁面
App.test.js	實現自動化測試
index.css
index.js	主入口
logo.svg
serviceWorker.js	pwa技術使用，以寫網頁的形式寫一個app應用。幫助咱們實現一個網頁應用

原理：

render函數及其做用
將jsx語法放到react中進行渲染。

render接收兩個參數：

參數	含義
要進行渲染的元素
一個容器、經過原生js的id選擇器選擇了一個#root的根元素。此元素位於index.html中	將第一個參數渲染的元素放到第二個參數元素中

 render的名字不可改，不過能夠利用es6的as方法進行修改：

 

 

 

不過ReactDOM的名字隨便更改：

【ps：這都是es6的模塊導入與導出的知識點啊！】

 

React的名字不能改，是由於render函數內部有用到React這個變量。

JSX語法會利用babel進行轉化，轉化成React.createcreateElement函數。

此時就必需要用到React這個變量。

 

React.createElement函數：

React.createElement函數接收多個參數

參數	含義	示例	備註
type	元素類型	「div」	html中已有的標籤便可
props	attrs屬性	{id: 'gjf'}	無時能夠傳null佔位
children...	子元素們	'標籤內的文本' React.createElement()	能夠是文本、 也能夠是另外一個新的函數用於生成新的標籤， 子元素能夠有無數個一直延伸，props後邊有幾個參數就有幾個子元素。

 

重寫react.createElement方法

 

初步體驗使用：不用JSX語法轉譯，而是經過React.createElement本身寫一段Node對象來生成html

 

可見，JSX語法就是React.createElement函數的語法糖。

 

App生成的對象打印VNode節點對象：

 

 

React.createElement模擬實現：

 

不引入React，而是本身寫一個React讓其是一個對象，對象裏邊有createElement方法。

 

第一步：搭出大體框架

 

此時的打印結果以下：

 

第二步：深刻細節

 

離勝利只差一步的時候被卡住了，怎麼把獲得的dom元素字符串化呢！

使用js自帶的這些轉化字符串的方法都不可用：

 

後來發現，我把createElement和render一塊兒實現了，

createElement只是vNode對象並返回，並非生成字符串形式的dom標籤，

也不是隻讓render作把React.createElement返回的dom標籤直接塞到根節點裏的。

render函數纔是將React.createElement生成的vNode渲染成html元素並插入到html當中的！

 

 

重寫：第二步深刻細節

 

修改後實現效果，打印vNode虛擬節點以下：

 

接下來就須要重寫render函數！

 

重寫react-dom.render函數

render（vNode，container）

參數	含義	備註
vNode	虛擬節點
container	容器	包裹虛擬節點生成的html元素

 

【重寫render函數】根據虛擬節點vNode生成dom元素，並插入到container中~

  

 

2019-10-13  23:27:35