react狀態提公升和容器元件

2021-09-23 14:29:53 字數 663 閱讀 1100

react狀態提公升和容器元件

react狀態提公升

通俗的說,對於react狀態提公升的核心就是去狀態共享。我們可以通過下面的乙個功能來進行說明。

我們要實現的乙個功能就是當你在乙個輸入框中輸入華氏溫度,你就可以在另外乙個輸入框中,得到攝氏度;當你在攝氏度的輸入框中輸入攝氏度時,你就可以得到華氏溫度。這兩個框中的資料要保持同步的實現,在這個時候如果採用乙個狀態來控制這兩個資料同時去改變是最理想的狀態了,那麼這個時候我們很自然而然的就會用到react的狀態提公升,就是狀態共享。

上面的**部分就是狀態共享的的**例項,在這裡我們在state中設定了乙個變數,兩個輸入框中的值,都是通過這個變數來反應的。

2.容器元件

在元件中我們又可以這樣去分類,容器元件和ui元件。這兩者的區別在於,容器元件中,有很多來處理整個資料的邏輯,通常情況下我們都採用的是有狀態元件來表示。還有一種ui元件,其僅用於來展示整個頁面的布局,沒有任何的邏輯過程。

另外對於其效能問題來說,ui元件的執行速度會比容器元件執行速度快很多,所以我們應該盡可能去寫ui元件,因為這樣會提高整個專案的效能。

React狀態提公升

react狀態提公升 react中的狀態提公升概括來說,就是將多個元件需要共享的狀態提公升到它們最近的父元件上.在父元件上改變這個狀態然後通過props分發給子元件.class one extends react.component render class two extends react.co...

React 狀態提公升

假設我們有這樣乙個需求,提供兩個輸入框 分別屬於兩個元件 保證輸入框裡面的內容同步 下面我們先來封裝乙個輸入框元件 input class input extends react.component this.handlechange this.handlechange.bind this hand...

React 狀態提公升2 6

react中的狀態提公升概括來說,就是將多個元件需要共享的狀態提公升到它們最近的父元件上.在父元件上改變這個狀態然後通過props分發給子元件.列入官網的溫度計算的demo 先寫入乙個溫度輸入元件 class temperatureinput extends react.component hand...