受控組件

什么是受控組件？

其值由React控制的輸入表單元素稱為“受控組件”。

受控組件有兩個特點：1. 設(shè)置value值，value由state控制，2. value值一般在onChange事件中通過setState進(jìn)行修改

什么時候使用受控組件？

需要對組件的value值進(jìn)行修改時，使用受控組件。比如：頁面中有一個按鈕，每點擊一次按鈕受控組件的值加1.

非受控組件

什么是非受控組件？

表單數(shù)據(jù)由 DOM 處理的組件非受控組件。

非受控組件有兩個特點：1. 不設(shè)置value值，2. 通過ref獲取dom節(jié)點然后再取value值

<input type="text" placeholder="請輸入姓名" name='username' ref={(input) => this.usernameElem = input}/>

取值方法：this.usernameElem.value

什么時候使用非受控組件？

任何時候都不需要改變組件的value值，這時候可以使用非受控組件。

Vue 中的受控與非受控組件

熟悉 React 的開發(fā)者應(yīng)該對“受控組件”的概念并不陌生，實際上對于任何組件化開發(fā)框架而言，都可以實現(xiàn)所謂的受控與非受控，Vue 當(dāng)然也不例外。并且理解受控與非受控對應(yīng)的需求場景，可以讓我們在設(shè)計一些基礎(chǔ)組件時思路更加清晰，暴露出來的組件 API 也更加合理、統(tǒng)一。

需求

許多 UI 組件都是有狀態(tài)（stateful）的，而這個狀態(tài)是由組件外部控制還是組件內(nèi)部維護(hù)，也就對應(yīng)了受控與非受控兩種模式。

例如 Tabs 組件是很常見的一種 UI 組件，它的核心狀態(tài)就是記錄當(dāng)前 active 的 Tab，并且允許用戶切換。

很多時候我們只希望 Tabs 可以正確的展示 active 的內(nèi)容、并在用戶操作時正常切換，不需要進(jìn)行任何干預(yù)，那么就希望 只需要傳入所有的 Tab 內(nèi)容，不需要再做額外的配置。

但有的時候我們又希望對 Tabs 的狀態(tài)有很強的控制能力，例如多個關(guān)聯(lián)的 Tabs，子級 Tabs 的內(nèi)容需要根據(jù)父級 Tabs 的 active Tab 動態(tài)切換，這時候就會希望 Tabs 組件可以暴露足夠充分的 API，來實現(xiàn)業(yè)務(wù)的需求。

因此我們可以用一種通用的模式，來讓任意組件的任意狀態(tài)同時兼容受控與非受控兩種模式，讓不同需求場景下都可以使用最合理的 API。

簡化示例

我們用一個簡單的 Tabs 實現(xiàn)來演示這種通用的組件 API 設(shè)計模式，簡化的部分包括：

可以打開 online DEMO 配合閱讀

API 設(shè)計

對于 Vue 組件而言，API 設(shè)計主要指的是內(nèi)部的 data, computed, methods 以及對外的 props, events。在這個示例中，我們會用 activeIdx 作為核心狀態(tài)，所有的 API 也都會圍繞這個狀態(tài)命名。