用React的屬性和狀態操作數據

管理數據對任何應用來說都非常重要。在UI中切換數據流是很有挑戰性的。現在的web應用一般都具備複雜的UI結構。一個地方的數據變動都會直接或間接的影響到其他地方。對於這種問題，由Knockout.js和Angular.js實現的數據雙向綁定是非常流行的解決方法。

對於一些應用（尤其是具有簡單的數據流），雙向綁定是非常高校的。而對於更加複雜的應用，數據雙向綁定已被證明是非常抵消的。對於實際的UI設計來說，儼然成為一種障礙。React不能解決應用數據流的大量問題（雖然Flux可以），但是基於它的一個組件可以。

有了這個組件，React可以處理數據流問題以及顯示UI更新的結果。UI更新方面的問題是通過一種名為Reconciliation的模塊解決的。這個模塊涉及到一種虛擬DOM的新思路。在下篇文章中，我們會詳細講解Reconciliation。這篇文章我們主要關注數據流問題和React組件間使用的各種數據問題。

各種組件數據

React組件中數據是以屬性或者狀態的形式存儲的。

屬性相當於組件的輸入值。他們通常用在組件的渲染和狀態初始化的過程中。當組件實例化後，屬性就應該確認不變了。屬性值只有在實例化組件時才能被設置。這時，當組件再次在DOM中渲染時，React將會對新舊屬性值做比較，以此來確定哪些DOM需要更新。

現在看一個設置屬性值引起DOM更新的例子。

https://codepen.io/SitePoint/pen/XKqQqN

狀態數據的變化一般是通過綁定組件的事件方法實現的。通常，更新狀態會引起React組件的重新渲染。一個組件初始化之前，它的狀態必須首先初始化。已經初始化的值包含常量值和屬性值（上文提過的）。

對於像Angular.js之類的框架來說，屬性是單向綁定的數據，狀態是雙向綁定的數據。這不是一個完美的比喻方式。Angular.js 使用一種具備兩種使用方式的數據對象而React使用兩種類型的數據對象，彼此都有特定的使用方式。

屬性

我的以前React的文章（https://www.sitepoint.com/getting-started-react/）講過指定和獲取屬性的語法。這篇文章通過多種代碼範例講解了Javascript和JSX中的靜態屬性和動態屬性的使用方法。以這篇文章為基礎，讓我們看一些有趣的與屬性操作相關的細節。

當需要給組件添加一個CSS的class屬性時，我們必須用className代替class。React要求這個是因為ES2015將class作為定義對象的關鍵詞。為了避免衝突，React將className作為替代品。如果使用了class作為屬性名，React將會給出相關提示以此提醒開發者用className代替class。

注意觀察下方不正確的class屬性名，微軟Edge瀏覽器會給出有用的警告信息。

當把class改為classname，警告信息隨之消失。

當把class改為className，警告信息隨之消失。查看下面來自CodeOpen的完整範例。

https://codepen.io/SitePoint/pen/akGxGW

除了像className這樣的屬性名稱，React屬性還有其他有趣的地方。比如，動態組件屬性就是一個反模式。動態屬性能夠在組建實例化過程中被設置，但是組件實例化後動態屬性就不能變化了。這個過程包括組件的實例化和渲染。一個組件的動態值可以被稱為狀態，它是通過state屬性控制的而不是props屬性。

在下面的實例代碼中，通過createElement實例化一個名字為SomeComponent的組件，並給它添加了兩個屬性。

JavaScript:

JSX:

操作已經實例化的組件的props能夠產生很難追蹤的錯誤。當然，改變屬性也不能引起組件的更新，因為屬性已經與其組件不同步了。

因此，我們應該在組件的實例化過程中設置屬性。代碼如下：

JavaScript:

JSX:

然後，組件可以重新渲染，在這點上，React將執行核對過程，以確定新的屬性值如何影響DOM。然後，DOM隨著更改而更新。

有關DOM更新的例子，可以查看文章頂部第一個CodePen的例子。

狀態

狀態表示由組件更改的數據，通常通過與用戶的交互來實現。為了方便這種更改，事件處理程序被註冊為適當的DOM元素。當事件發生時，更新的值將從DOM檢索，並通知新狀態的組件。在組件可以利用狀態之前，狀態必須通過函數getinitialstate初始化。通常情況下，函數getinitialstate使用屬性或者其他方式傳過來的靜態值初始化狀態。

初始化狀態後，狀態值可以像渲染組件時的屬性值一樣使用。為了捕獲更新狀態的用戶交互，事件處理程序已經註冊。為了保持React組件的獨立性，事件處理函數對象可以作為屬性傳遞，或者直接在組件對象本身上定義。

https://codepen.io/SitePoint/pen/JKvVvy

React的好處之一是使用標準的HTML事件。標準的HTML事件包含的是標準的HTML事件對象。不需要學習特殊事件庫、事件處理程序或自定義事件對象。由於現代瀏覽器基本上兼容，所以不需要中間的跨瀏覽器庫，如jQuery。

為了處理狀態的變化，需要使用setstate函數在適當的狀態屬性下設置新值。調用此函數將使組件重新渲染。

如下圖所示在Visual Studio代碼編輯器，使用setstate函數是從_messagechange事件處理程序中調用。

總結

React組件提供了兩種處理數據的機制：屬性和狀態。在不可變屬性和可變狀態之間劃分數據更清楚地標識每種數據的作用，以及組件與它的關係。一般來說，屬性是首選的，因為它們簡化了數據流。狀態對於捕獲用戶交互和其他UI事件產生的數據更新非常有用。

屬性和狀態之間的關係促進了數據通過組件的流動。當實例化和渲染組件時，屬性可以用來初始化狀態，狀態值可以用來設置屬性。來自用戶交互的新值通過狀態捕獲，然後用於更新屬性。

應用程序中較大的數據流通過一個稱為Flux的模式完成。

END

本文由大前端學堂編譯出品，原文來自sitepoint，作者Eric Greene，若轉載請註明出處，轉發感激不盡。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！