元素的渲染
-
什麼是 React 元素
元素是構成 React 應用的最小單位，用 ReactDOM.reader() 方法渲染。
元素是普通的 js 對象，是構成組件的一個部分。 -
創建 React 元素
使用 JSX 語法：const element = <h1>Hello, world</h1>;，JSX 語法是用 React.createElement() 來構建 React 元素的。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 來描述用戶界面。
JSX就是 Javascript 和 XML 結合的一種格式，React 發明了 JSX，利用HTML語法來創建虛擬DOM。當遇到 <，JSX就當HTML解析，遇到 { 就當 JavaScript 解析。
注意：大括號裏是 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的一個內部映射，但其不會傳遞給組件的內部。
React 理念
React 最初的目的是使用 JavaScript 創建大型的，快速響應的網絡應用。
React 的衆多優點之一是它讓我們在編寫代碼的時候同時也在思考我們的應用。
我們需要了解的五大核心概念有：
- 組件
- JSX
- Props & State
- 組件 API
- 組件類型
使用 PropTypes 檢查類型
React 組件參數類型的驗證。
高階組件
高階組件就是一個函數，且該函數接受一個組件作爲參數，並返回一個新的組件。也就是說，高階組件是參數爲組件，返回值爲新組件的函數。