react（三） 容器元件和傻瓜元件

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

《深入淺出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;

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

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

更多專業前端知識，請上

【猿2048】www.mk2048.com

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狀態提公升的核心就是去狀態共享。我們可以通過下面的乙個功能來進行說明。我們要實現的乙個功能就是當你在乙個輸入框中輸入華氏溫度，你就可以在另外乙個輸入框中，得到攝氏度 當你在攝氏度的輸入框中輸入攝氏度時，你就可以得到華氏溫度...