React概述
React 庫可以說是大廠中用到的最多的一個庫了，我們先來簡單瞭解一下 React 吧。
官網：https://react.docschina.org/
什麼是React？
React 是由 Facebook 研發的，一開始是 Facebook 用來架設自己的網站，後來開源了。用於解決UI複雜度的開源JavaScript庫，目前由 React 聯合社區維護。它並不是框架，只是爲了解決UI複雜度而誕生的一個庫
那 react 有什麼特點呢？
- 輕量：React的開發版所有源碼（包含註釋）僅3000多行
- 原生 JS：所有的React的代碼都是用原生JS書寫而成的，不依賴其他任何庫
- 易擴展：React對代碼的封裝程度較低，也沒有過多的使用魔法，所以React中的很多功能都可以擴展。
- 不依賴宿主環境：React只依賴原生JS語言，不依賴任何其他東西，包括運行環境。因此，它可以被輕鬆的移植到瀏覽器、桌面應用、移動端。
- 漸近式：React並非框架，對整個工程沒有強制約束力。這對與那些已存在的工程，可以逐步的將其改造爲React，而不需要全盤重寫。
- 單向數據流：所有的數據自頂而下的流動
- 組件化
react 和 vue 的對比：
| 對比項 | Vue | React |
|---|---|---|
| 全球使用量 | ✔ | |
| 國內使用量 | ✔ | |
| 性能 | ✔ | ✔ |
| 易上手 | ✔ | |
| 靈活度 | ✔ | |
| 大型企業 | ✔ | |
| 中小型企業 | ✔ | |
| 生態 | ✔ |
我的 react 系列，將會從 React 基礎，React 進階、React-Router、Redux、第三方腳手架、UI庫Ant Design和最後的源碼分析來依次更新。
我們初識一門語言總是來 “ Hello World ”
Hello World
直接在頁面上使用 React，引用下面的 JS
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
React.createElement
創建一個 React 元素，稱作虛擬 DOM，本質上是一個對象
- param1：元素類型，可以是字符串（一個普通的HTML元素），也可以傳入一個組件
- param2：元素的屬性，一個對象
- 後續參數：元素的子節點
const h1 = React.createElement("h1",{id:"title"},"這是一個標題")
ReactDOM.render(h1,document.getElementById("root"))
ReactDOM.render
可以將 React 元素轉換爲 dom 元素
// ReactDOM.render(顯示的東西,容器);
ReactDOM.render("hello world",document.getElementById("root"))
我們通過這種方式書寫肯定會很不爽，所以 react 是支持 JSX 語法的
JSX
什麼是JSX
- JSX是 Facebook 起草的 JS 擴展語法，需要使用 babel 進行轉義
// ...
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(<h1>這是一個標題</h1>, document.getElementById("root"))
</script>
- 本質是一個JS對象，會被babel編譯，最終會被轉換爲React.createElement
const div = ( <div>這是一個div元素</div> )
//會被轉換爲
Reeact.createElement("div",{},"這是一個div元素")
- 每個JSX表達式，有且僅有一個根節點
React.Fragment：如果想要有多個根節點，可以使用React.Fragment，它不會把<React.Fragment>渲染到頁面上
const h1 = (
<React.Fragment>
<h1>這是第一個JSX語法</h1>
<p>這是內容</p>
</React.Fragment>
)
//
const h1 = (
<>
<h1>這是第一個JSX語法</h1>
<p>這是內容</p>
</>
)
- 每個 JSX 元素要遵循 XML 規範，必須有結束標籤
const img = <img src="./logo.png" alt=""> //報錯
//正確寫法
const img = <img src="./logo.png" alt="" /> //自閉合標籤
const img = <img src="./logo.png" alt=""></img>
在JSX中嵌入表達式
const a=123,b=456;
const div = (
<div> {a} * {b} = {a*b} </div>
)
//==>轉換爲
const div = React.createElement("div",{},`${a} * ${b} = ${a*b}`)
- 在JSX中使用註釋
{/* JSX中的註釋 */}
-
將表達式作爲內容的一部分
- null、undefined、false不會顯示
//不會渲染到頁面上 const img = undefined ReactDOM.render(img,document.getElementById("root"))- 普通對象，不可以作爲子元素
const obj = { name:"monk", age:18 } ReactDOM.render(<div> { obj } </div>,document.getElementById("root"))- 可以放置 React 元素對象
const span = <span>這是一個span元素</span> const div = <div> { span } </div> ReactDOM.render(div, document.getElementById("root"))- 可以放置數組元素，但數組元素中有普通對象，同樣會報錯
const arr = [1,2,3,4] const div = <div> { arr } </div> ReactDOM.render(div, document.getElementById("root")) -
將表達式作爲元素屬性
-
屬性使用小駝峯命名法
<img src={url} className="image" style={ {width:"200px"} } alt="">
- 防止注入攻擊，會自動編碼
const content = "<h1>monk</h1>"
cosnt div = (
<div>{ content }</div>
)
//渲染結果是: <h1>monk</h1>
- dangerouslySetInnerHTML
const content = "<h1>monk</h1>"
cosnt div = (
<div dangerouslySetInnerHTML={{ __html:content }}></div>
)
//渲染結果是(大標題): monk
JSX元素的不可變性
- 雖然 JSX 元素是一個對象，但是該對象中的所有屬性不可更改
let div = <div>這是一個 div 元素</div>
ReactDOM.render(div, document.getElementById("root"))
div = <div>這是一個修改過的 div 元素</div>
- 如果確實需要更改元素的屬性，需要重新創建 JSX 元素，不用擔心性能問題，此時改變的是虛擬 dom，ReactDOM 進行優化處理了
div = <div>這是一個修改過的 div 元素</div>
//重新渲染
ReactDOM.render(div, document.getElementById("root"))
開發環境搭建
VSCode配置
- 在 js 中可以編寫標籤的配置（JSX語法）
settings.json中配置：
"emmet.includeLanguages":{
"javascript": "javascriptreact"
}
VSCode插件安裝
- ES7 React/Redux/GraphQL/React-Native snippets：快速編寫React相關代碼
Chrome插件安裝
- React Developer Tools：谷歌商店中可以下載
使用腳手架搭建工程
- create-react-app腳手架，類似vue-cli
yarn create react-app projectName