React知識點整理

時間 2019-11-26

標籤 react 知識整理欄目 React 简体版

原文原文鏈接

元素的渲染

什麼是 React 元素javascript
- 元素是構成 React 應用的最小單位，用 ReactDOM.reader() 方法渲染。元素是普通的 js 對象，是構成組件的一個部分。
建立 React 元素css
- 使用 JSX 語法：const element = <h1>Hello, world</h1>;，JSX 語法是用 React.createElement() 來構建 React 元素的。java
- React.createElement()，接受三個參數：1. 能夠是一個標籤名（如div、span、或 React 組件）；2. 爲傳入的屬性；3. 組件的子組件。數組
- React.cloneElement()，與 React.createElement() 類似，不一樣的是它傳入的第一個參數是一個 React 元素，而不是標籤名或組件；新添加的屬性會併入原有屬性，同屬性名新的會替換舊的，傳入到返回的新元素中。瀏覽器
渲染 React 元素到 DOM服務器
- 渲染粗略過程：React元素描述的是虛擬DOM的結構，React會根據虛擬DOM渲染出頁面的真實DOM。
- 渲染詳細過程：1. 先調用 React.createElement() 編譯成上面的 js 對象（也就是虛擬DOM節點）；2. 而後再調用 ReactDOMComponent( vdom).mountComponent() 將虛擬DOM變成真實的DOM；3. 最後用 appendChild( domNode ) 插入DOM樹，顯示出來。
更新已渲染的元素網絡
- React 元素是不可變的，咱們一旦建立了一個元素，就不能再修改其子元素或任何屬性，所以咱們更新 UI 的惟一方法就是建立一個新的元素，並將其傳入 ReactDOM.render() 方法中。
只更新必需要更新的部分架構

JSX 簡介

JSX 是一種 JavaScript 的語法擴展，運用於 React 架構中，它是用來聲明 React 當中的元素，React 使用 JSX 來描述用戶界面。app

JSX就是 Javascript 和 XML 結合的一種格式，React 發明了 JSX，利用HTML語法來建立虛擬DOM。當遇到 <，JSX就當HTML解析，遇到 { 就當 JavaScript 解析。dom

**注意：**大括號裏是 JavaScript，不要加引號，加引號就會被當成字符串。

組件 & Props

組件能夠將UI切分紅一些獨立的、可複用的部件，這樣就只需專一於構建每個單獨的部件了。

定義組件
- 函數定義組件（JavaScript函數）
- ES6 class 定義組件
自定義組件（組件名稱必須以大寫字母開頭）
組件渲染（組件名必須大寫字母開頭）
- 將組件做爲React元素，標籤的屬性做爲props鍵值。
組合組件（返回值只能有一個根元素）
- 組合組件它能夠在輸出中引用其餘組件，在 React 應用中，按鈕、表單、對話框以及整個屏幕的內容均可被表示爲組件。
提取組件
- 能夠將組件切分爲更小的組件。
Props 的只讀性
- 不管是使用函數或是類來聲明一個組件，它都不能修改它本身的props值。

state & 生命週期

修改 state 時使用 setState()。

將函數轉換爲類
- 建立擴展名爲 React.Component 的ES6類
- 建立 render() 空方法
- 將函數體移動到 render() 方法中
- 在 render() 方法中使用 this.props 替換 props
爲一個類添加局部狀態
- 在 render() 方法中使用 this.state.date 替代 this.props.date
- 添加一個類構造函數來初始化狀態 this.state
- 從 <Clock /> 元素移除 date 屬性
將生命週期方法添加到類中
- 當 <Clock /> 被傳遞給 ReactDOM.render() 時，React 調用 Clock 組件的構造函數；
- React 而後調用 Clock 組件的 render() 方法；
- 當 Clock 的輸出插入到 DOM 中時，React 調用 componentDidMount() 生命週期鉤子；
- 瀏覽器每秒鐘調用 tick() 方法；
- 一旦 Clock 組件被從DOM中移除，React會調用 componentWillUnmount() 這個鉤子函數，定時器也就會被清除。
正確地使用狀態 關於 setState() ：
- 不能直接更新狀態，應當使用 setState()； -更新狀態多是異步的，構造函數是惟一可以初始化 this.state 的地方；
- 狀態更新合併（淺合併），當更新一個狀態時，其餘的狀態保持不變。
數據單向流動
- 從父節點傳遞到子節點，由於組件是簡單而且易於把握的，咱們只須要從父節點獲取props渲染便可，若是頂層組件的某個props改變了，那麼 React 會遞歸的向下遍歷整棵組件樹，從新渲染全部使用這個屬性的組件。

事件處理

語法差別
- React 事件綁定屬性的命名採用駝峯式寫法，而不是小寫。
- 若是採用 JSX 的語法咱們須要傳入一個函數做爲事件處理函數，而不是一個字符串。
- return false; 不會阻止組件的默認行爲，須要調用 e.preventDefault();
儘可能不要使用 addEventListener
綁定事件處理函數的 this

-經過 bind 方法，原地綁定事件處理函數的 this 指向（特色：書寫簡單，可是每次渲染都會執行生成一個新函數） -經過一個箭頭函數將真實的事件處理函數包裝（特色：能清晰描述事件處理函數接收的參數列表） -在 constructor 中預先將全部的事件處理函數經過 bind 方法進行綁定（特色：解決了前兩種方法的額外開銷和從新渲染的問題，可是書寫有點複雜） -使用類成員字段定義語法（特色：解決了上述三種問題，惟一的就是它還沒被正式歸入 ES5 規範中）

表單（Forms）

HTML 表單元素與 React 中的其餘DOM元素有所不一樣，由於表單元素生來就保留了一些內部狀態。

用value實現受控組件
- < input type=」text」/>
- <textarea>，經過它的子節點定義了它的文本值
- <select>，建立下拉列表
file input 標籤
處理多個輸入元素
受控 input 組件的 null 值
- 在受控組件上指定值 prop 可防止用戶更改輸入，若是咱們指定了一個 value，可是輸入的值卻仍然是能夠編輯的，那麼可能會之外的把 value 設置爲 undefined 或者是 null。

CSS 和 SASS

CSS

內聯樣式：使用內聯樣式屬性設置元素樣式，值必須是JavaScript對象。
- camelCased屬性名稱：因爲內聯CSS是用JavaScript對象background-color 編寫的，所以必須使用camel case語法編寫具備兩個名稱的屬性。
- JavaScript 對象：使用樣式信息建立對象，並在style屬性中引用它。
CSS 樣式表
- 在單獨的文件中編寫CSS樣式，只需使用 .css 文件擴展名保存文件，而後將其導入應用程序。
CSS 模塊
- 嚮應用程序添加樣式的另外一種方法是使用CSS模塊，它便於放置在單獨文件中的組件。

Sass

Sass是一款CSS預處理器，它的文件在服務器上執行，並將 CSS 發送到瀏覽器。

條件渲染

React 中的條件渲染和 JavaScript 中的一致，使用 JavaScript 操做符 if 或條件運算符來建立表示當前狀態的元素，而後讓 React 根據它們來更新 UI。

if 語句，在React中使用if語句條件渲染是最簡單的，if... else 是最基本的條件渲染方式，用 if 從渲染方法中返回null提早退出函數。
三元操做符，兩種模式（edit，view），它使條件渲染更加的簡潔,使得代碼能夠採用內聯(inline)的方式表達出來。邏輯 && 操做符，不返回元素就返回null時使用。
switch... case 語句，比較冗長，能夠經過當即調用函數內聯使用。
枚舉（enums），使用多種條件渲染最好的方式是枚舉，在javascript中，對象的鍵值對能夠用做枚舉。
多層條件渲染，也被叫作嵌套條件渲染。
使用高階組件（HOCs），使用高階組件而屏蔽條件渲染，它的一種使用方式就是改變組件的外觀，組件能關注主要的邏輯目的。

列表 & Keys

Keys 能夠在DOM中的某些元素被增長或刪除的時候幫助 React 識別哪些元素髮生了變化。

列表（Lists）
- 多組件渲染
- 基本列表組件
鍵（Keys）- 幫助 React 標識哪一個項被修改、添加或者移除了
- 使用 keys 提取組件，keys 只在數組的上下文中存在乎義。
- 在數組中使用的 keys 在同輩元素中必須是惟一的。
- keys 的內部性，鍵是React的一個內部映射，但其不會傳遞給組件的內部。