react（三）：容器組件和傻瓜組件

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

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

 

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

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

　　2、根據當前的props和state，渲染出用戶的界面

先來看一個關於計數器的組件（具體調用的方法沒有寫）

const buttonStyle = { margin: '10px' }; class Counter extends Component { constructor(props) { super(props); } render() { const value = this.state.value; const {caption} = this.props; return ( <div>
        <button style={buttonStyle} onClick={this.***}>+</button>
        <button style={buttonStyle} onClick={this.***}>-</button>
        <span>{caption} count: {value}</span>
      </div>
 ); } } export default Counter;

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

 

 

function Counter (props) { render() { const {caption, onIncrement, onDecrement, value} = props; return ( <div>
        <button style={buttonStyle} onClick={onIncrement}>+</button>
        <button style={buttonStyle} onClick={onDecrement}>-</button>
        <span>{caption} count: {value}</span>
      </div>
 ); } } class CounterContainer extends Component { constructor(props) { super(props); } render() { return <Counter caption={this.props.caption} onIncrement={this.*****} onDecrement={this.*****} value={this.state.value} />
 } } export default CounterContainer;

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

 

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