react(三) 容器元件和傻瓜元件

2022-04-25 05:47:41 字數 1190 閱讀 4162

讓乙個元件只專注於一件事,如果發現讓乙個元件做的事情太多,就可以把這個元件拆分成多個元件讓每乙個元件只專注於一件事

《深入淺出react和redux》 ---程墨

乙個react元件最基本的基本上就是完成兩大功能

1、讀取store的狀態,用於初始化元件的兩大狀態,監聽store的狀態變化

2、根據當前的props和state,渲染出使用者的介面

先來看乙個關於計數器的元件(具體呼叫的方法沒有寫)

const buttonstyle =;

class counter extends component

render() = this

.props;

return

(

this.***}>+

this.***}>-

count:

); }

}export

default counter;

我們把它拆成父子元件關係的兩個元件,處於外層的叫做容器元件,負責和redux store打交道,處於內層的只負責渲染頁面的元件叫做展示元件,也就是我們經常叫的傻瓜元件,這時候,傻瓜元件就不需要有狀態了,實際上讓傻瓜元件無狀態也就是我們拆分的目的

因為沒有狀態,所以不需要用物件來表示,甚至連類也不需要了,可以直接縮略為乙個函式,同時。這裡也不能使用this.props,而是通過函式的props引數來獲得

心得: 在實際中並沒有這樣實際運用過,但是這種實現體現了計算機程式設計中的大智慧型,其中使用元件考慮是否嚴謹,檔案架構上是否合理,是在敲擊鍵盤前首先要考慮的問題。

react(三) 容器元件和傻瓜元件

讓乙個元件只專注於一件事,如果發現讓乙個元件做的事情太多,就可以把這個元件拆分成多個元件讓每乙個元件只專注於一件事 深入淺出react和redux 程墨 乙個react元件最基本的基本上就是完成兩大功能 1 讀取store的狀態,用於初始化元件的兩大狀態,監聽store的狀態變化 2 根據當前的pr...

React 拆解元件成UI元件和容器元件

前言 在複雜的元件中,我們最好把元件拆分為ui元件和容器元件以方便我們的管理和維護 import react,from react class test extends component render onmousemove onclick li ul showitem e showindex i...

react狀態提公升和容器元件

react狀態提公升和容器元件 react狀態提公升 通俗的說,對於react狀態提公升的核心就是去狀態共享。我們可以通過下面的乙個功能來進行說明。我們要實現的乙個功能就是當你在乙個輸入框中輸入華氏溫度,你就可以在另外乙個輸入框中,得到攝氏度 當你在攝氏度的輸入框中輸入攝氏度時,你就可以得到華氏溫度...