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

JSX是一個(gè) JavaScript 的語法擴(kuò)展,可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。

React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會(huì)進(jìn)行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠(yuǎn)不會(huì)注入那些并非自己明確編寫的內(nèi)容。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串。

JSX 里的 class 變成了 className

深入了解：

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

如下JSX代碼：

  Click Me

會(huì)編譯為：

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

元素是構(gòu)成 React 應(yīng)用的最小磚塊。

React 元素是創(chuàng)建開銷極小的普通對(duì)象。React DOM 會(huì)負(fù)責(zé)更新 DOM 來與 React 元素保持一致。

組件是由元素構(gòu)成的。

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

以下的 JSX 表達(dá)式渲染結(jié)果相同：

{false}

{null}

{undefined}

{true}

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

函數(shù)組件（以前稱之為無狀態(tài)組件，但Hook出來之后叫為函數(shù)組件）：

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

class組件

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

當(dāng) React 元素為用戶自定義組件時(shí)，它會(huì)將 JSX 所接收的屬性（attributes）轉(zhuǎn)換為單個(gè)對(duì)象傳遞給組件，這個(gè)對(duì)象被稱之為 “props”。組件無論是使用函數(shù)聲明還是通過 class 聲明，都決不能修改自身的 props

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

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

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

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

JavaScript 表達(dá)式作為 Props

字符串字面量

props 默認(rèn)值為true

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

this.setState()可能是異步的

調(diào)用this.setState()的時(shí)候，React 會(huì)把你提供的對(duì)象合并到當(dāng)前的 state。

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

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

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

  // 用于替換 `componentWillReceiveProps` ，該函數(shù)會(huì)在初始化和 `update` 時(shí)被調(diào)用
  // 因?yàn)樵摵瘮?shù)是靜態(tài)函數(shù)，所以取不到 `this`, 如果需要對(duì)比 `prevProps` 需要多帶帶在 `state` 中維護(hù)
  // 它應(yīng)返回一個(gè)對(duì)象來更新 state
  static getDerivedStateFromProps(nextProps, prevState) {}

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

  // 組件掛載后調(diào)用
  // 可以在該函數(shù)中進(jìn)行請(qǐng)求或者訂閱
  componentDidMount() {}

  // 用于替換 componentWillUpdate ，該函數(shù)會(huì)在 update 后 DOM 更新前被調(diào)用
  // 用于讀取最新的 DOM 數(shù)據(jù)。
  getSnapshotBeforeUpdate() {}

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

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

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

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

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

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

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

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

Reconciliation 階段：

componentWillMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

Commit 階段：

componentDidMount

componentDidUpdate

componentWillUnmount

因?yàn)?reconciliation 階段是可以被打斷的，所以 reconciliation 階段會(huì)執(zhí)行的生命周期函數(shù)就可能會(huì)出現(xiàn)調(diào)用多次的情況，從而引起 Bug。所以對(duì)于 reconciliation 階段調(diào)用的幾個(gè)函數(shù)，除了 shouldComponentUpdate 以外，其他都應(yīng)該避免去使用。

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

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

為JSX內(nèi)時(shí)間綁定this的幾種方式：

constructor內(nèi)處理：

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

JSX內(nèi)使用bind:

Delete Row

箭頭函數(shù)：

 this.handleClick(id)}>Delete Row

key 幫助 React 識(shí)別哪些元素改變了，比如被添加或刪除。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)。
key 只是在兄弟節(jié)點(diǎn)之間必須唯一

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

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

始終是一個(gè)非受控組件

redux-adcanve