1. 概述

脫離初級(jí)前端一段時(shí)間后會(huì)發(fā)現(xiàn)，寫樣式的時(shí)間越來越少，處理數(shù)據(jù)的時(shí)間越來越多。處理數(shù)據(jù)的過程也就是實(shí)現(xiàn)業(yè)務(wù)邏輯的過程，這在項(xiàng)目中無疑是最重要的。

所以學(xué)習(xí)前端框架，了解完基本語法后，接下來就要學(xué)習(xí)其如何進(jìn)行數(shù)據(jù)傳遞。

Angular 設(shè)計(jì)之初的一大亮點(diǎn)就是實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，使用 Vue 一段時(shí)間后發(fā)現(xiàn)，所謂數(shù)據(jù)的雙向綁定，組件內(nèi)部唯一的應(yīng)用場(chǎng)景就是 form 表單（input，textarea，select， radio），而這種場(chǎng)景下的數(shù)據(jù)雙向綁定，即便框架內(nèi)部沒有實(shí)現(xiàn)，自己實(shí)現(xiàn)起來也非常簡(jiǎn)單。明白這一點(diǎn)后感覺之前認(rèn)為 React 沒有實(shí)現(xiàn)數(shù)據(jù)雙向綁定很 low 的想法很幼稚。

對(duì)于 React 的數(shù)據(jù)傳遞，涉及兩方面的內(nèi)容：

組件內(nèi)部的數(shù)據(jù)傳遞，典型的應(yīng)用場(chǎng)景包括如何實(shí)現(xiàn) form 表單雙向數(shù)據(jù)綁定、如何綁定事件； 組件間的數(shù)據(jù)傳遞。 包括父組件往子組件傳遞數(shù)據(jù)、子組件往父組件傳遞數(shù)據(jù)以及兄弟組件之間傳遞數(shù)據(jù)。

本文先討論組件內(nèi)部的數(shù)據(jù)傳遞。

2. 組件內(nèi)部數(shù)據(jù)傳遞

React 組件內(nèi)部通信主要分為兩部分：數(shù)據(jù)展示與事件處理。

2.1 數(shù)據(jù)展示

組件內(nèi)部數(shù)據(jù)的展示和更新都是通過 state 來實(shí)現(xiàn)的，如果要使用 state 必須使用 ES6 的 class 定義組件。數(shù)據(jù)更新在雙向數(shù)據(jù)綁定部分探討，這部分僅討論展示初始化數(shù)據(jù)。

如果你熟悉 Vue，React 的 state 對(duì)象相當(dāng)于 Vue 的 data 對(duì)象

下面是一個(gè)純展示數(shù)據(jù)的示例：

class App extends Component { constructor(props) { super(props); // 初始化 state this.state = {  inputValue: "test", }; } render() { // 注意，在 react 中，DOM 元素是對(duì)象，所以使用‘()'包住  return (  <div className="App">  <p>{this.state.inputValue}</p>  </div> ); }}

在通過 class 定義的 React 組件中，除了生命周期鉤子函數(shù)， constructor() 和 render() 著兩個(gè)方法也是自動(dòng)執(zhí)行的，先執(zhí)行 constructor() ，執(zhí)行 constructor() 的同時(shí)也是再為 render() 渲染 DOM 做數(shù)據(jù)準(zhǔn)備。

實(shí)際上 constructor() 函數(shù)是組件生命周期中調(diào)用的第一個(gè)函數(shù)。

2.2 事件

2.2.1 與 DOM 中事件的異同

在 React 中處理事件和在 DOM 中處理事件類似，有兩點(diǎn)不同：

React 中通過駝峰命名法命名事件，而不是全是小寫字母； 在 JSX 中直接傳遞函數(shù)作為事件處理程序，而不是字符串。

第 2 點(diǎn)不同有坑，后面細(xì)說

舉個(gè)例子，HTML中的事件：

<button onclick="activateLasers()"> Activate Lasers</button>

React 中的事件：

// 因?yàn)?jsx 中'{}'里面代表函數(shù)表達(dá)式，// 所以傳遞給 onClick 的實(shí)際是函數(shù) activateLasers 的函數(shù)體部分，// 因此需要指定 this 指向，不然會(huì)報(bào)錯(cuò)<button onClick={activateLasers}> Activate Lasers</button>