摘要：生命周期在版本中引入了機制。以后生命周期圖解不包含官方不建議使用的事件處理事件的命名采用小駝峰式，而不是純小寫。只是在兄弟節點之間必須唯一受控組件使的成為唯一數據源。

JSX是一個 JavaScript 的語法擴展,可以很好地描述 UI 應該呈現出它應有交互的本質形式。

React DOM 在渲染所有輸入內容之前，默認會進行轉義。它可以確保在你的應用中，永遠不會注入那些并非自己明確編寫的內容。所有的內容在渲染之前都被轉換成了字符串。

JSX 里的 class 變成了 className

深入了解：

JSX 僅僅只是 React.createElement(component, props, ...children) 函數的語法糖。

如下JSX代碼：

  Click Me

會編譯為：

React.createElement(
  MyButton,
  {color: "blue", shadowSize: 2},
  "Click Me"
)

元素是構成 React 應用的最小磚塊。

React 元素是創建開銷極小的普通對象。React DOM 會負責更新 DOM 來與 React 元素保持一致。

組件是由元素構成的。

false, null, undefined, true 是合法的子元素。但它們并不會被渲染。

以下的 JSX 表達式渲染結果相同：

{false}

{null}

{undefined}

{true}

組件名稱必須以大寫字母開頭(React 會將以小寫字母開頭的組件視為原生 DOM 標簽)

函數組件（以前稱之為無狀態組件，但Hook出來之后叫為函數組件）：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

class組件

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

當 React 元素為用戶自定義組件時，它會將 JSX 所接收的屬性（attributes）轉換為單個對象傳遞給組件，這個對象被稱之為 “props”。組件無論是使用函數聲明還是通過 class 聲明，都決不能修改自身的 props

// 這段代碼會在頁面上渲染 “Hello, Sara”
function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById("root")
);

//上段代碼渲染時發生了什么：
  1. 我們調用 ReactDOM.render() 函數，并傳入  作為參數。
  2. React 調用 Welcome 組件，并將 {name: "Sara"} 作為 props 傳入。
  3. Welcome 組件將 
Hello, Sara
 元素作為返回值。
  4. React DOM 將 DOM 高效地更新為 
Hello, Sara
。

有多種方式可以在 JSX 中指定 props。

JavaScript 表達式作為 Props

字符串字面量

props 默認值為true

使用this.setState()設置state的值

this.setState()可能是異步的

調用this.setState()的時候，React 會把你提供的對象合并到當前的 state。

react是單向數據流，任何的 state 總是所屬于特定的組件，而且從該 state 派生的任何數據或 UI 只能影響樹中“低于”它們的組件。

在 V16 版本中引入了 Fiber 機制。這個機制一定程度上的影響了部分生命周期的調用，并且也引入了新的 2 個 API 來解決問題。（Fiber 本質上是一個虛擬的堆棧幀，新的調度器會按照優先級自由調度這些幀，從而將之前的同步渲染改成了異步渲染，在不影響體驗的情況下去分段計算更新。在之前的版本中，如果你擁有一個很復雜的復合組件，然后改動了最上層組件的 state，那么調用棧可能會很長，調用棧過長，再加上中間進行了復雜的操作，就可能導致長時間阻塞主線程，帶來不好的用戶體驗。Fiber 就是為了解決該問題而生。）

class ExampleComponent extends React.Component {
  // 用于初始化 state
  constructor(props) {
    super(props)
    this.state = { hasError: false };
  }

  // 用于替換 `componentWillReceiveProps` ，該函數會在初始化和 `update` 時被調用
  // 因為該函數是靜態函數，所以取不到 `this`, 如果需要對比 `prevProps` 需要多帶帶在 `state` 中維護
  // 它應返回一個對象來更新 state
  static getDerivedStateFromProps(nextProps, prevState) {}

  // 判斷是否需要更新組件，多用于組件性能優化
  shouldComponentUpdate(nextProps, nextState) {}

  // 組件掛載后調用
  // 可以在該函數中進行請求或者訂閱
  componentDidMount() {}

  // 用于替換 componentWillUpdate ，該函數會在 update 后 DOM 更新前被調用
  // 用于讀取最新的 DOM 數據。
  getSnapshotBeforeUpdate() {}

  // 組件即將銷毀
  // 可以在此處移除訂閱，定時器等等
  componentWillUnmount() {}

  // 組件銷毀后調用
  componentDidUnMount() {}

  // 組件更新后調用
  componentDidUpdate() {}

  // 錯誤邊界 - 渲染備用 UI
  // 更新 state 使下一次渲染能夠顯示降級后的 UI
  // 注意錯誤邊界僅可以捕獲其子組件的錯誤，它無法捕獲其自身的錯誤
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // 錯誤邊界 - 打印錯誤信息
  // 你同樣可以將錯誤日志上報給服務器
  // 注意錯誤邊界僅可以捕獲其子組件的錯誤，它無法捕獲其自身的錯誤
  componentDidCatch(error, info) {
    console.log(error, info);
  }

  // 渲染組件函數
  render() {}

  // 以下函數不建議使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  // 接收到新的props時調用
  UNSAFE_componentWillReceiveProps(nextProps) {}
}

對于異步渲染，現在渲染有兩個階段：reconciliation 和 commit 。前者過程是可以打斷的，后者不能暫停，會一直更新界面直到完成。

Reconciliation 階段：

componentWillMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

Commit 階段：

componentDidMount

componentDidUpdate

componentWillUnmount

因為 reconciliation 階段是可以被打斷的，所以 reconciliation 階段會執行的生命周期函數就可能會出現調用多次的情況，從而引起 Bug。所以對于 reconciliation 階段調用的幾個函數，除了 shouldComponentUpdate 以外，其他都應該避免去使用。

React 事件的命名采用小駝峰式（camelCase），而不是純小寫。

使用 JSX 語法時你需要傳入一個函數作為事件處理函數，而不是一個字符串。

為JSX內時間綁定this的幾種方式：

constructor內處理：

constructor() {
  this.handleClick = this.handleClick.bind(this);
}

JSX內使用bind:

Delete Row

箭頭函數：

 this.handleClick(id)}>Delete Row

key 幫助 React 識別哪些元素改變了，比如被添加或刪除。因此你應當給數組中的每一個元素賦予一個確定的標識。
key 只是在兄弟節點之間必須唯一

使 React 的 state 成為“唯一數據源”。渲染表單的 React 組件還控制著用戶輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做受控組件。

表單數據將交由 DOM 節點來處理。使用非受控組件時如果想賦予組件一個初始值，但是不去控制后續的更新。 在這種情況下, 你可以指定一個 defaultValue 屬性，而不是 value。

始終是一個非受控組件

redux-adcanve