redux進階、無狀態組件、UI組件和容器組件的拆分

UI組件和容器組件拆分

就是將父組件render裏面的任何模塊都可以拆分程ui組件。然後通過父子組件通信的方式進行數據交互
如果父組件的函數有出了this之外的參數，則要用剪頭函數進行傳值
例如下面的list,是一個子組件，delItem函數是父組件傳過來的，但是除此之外，還有一個index參數。

 <List
                bordered
                dataSource={this.props.list}
                renderItem={(item,index) => (<List.Item onClick={() => {this.props.delItem(index)}}>{item}</List.Item>)}
            />

無狀態組件

當一個組件只有render的時候，就可以把這個組件寫成無狀態組件,就像下面的代碼一樣，只有一個函數，接收props,取值的時候直接取值，不用this.就是無狀態組件。

無狀態組件性能比較高，它就是一個函數。而普通子組件，會有一些生命週期函數。

當一個組件只負責頁面的渲染，沒有任何邏輯的時候就可以將這個組件寫成一個性能較高的無狀態組件。UI組件一般都可以寫成無狀態組件

const TodoListUI= (props) => {
return(
    <div style={{marginTop:"10px",marginLeft:"10px"}}>
        <div>
            <Input
                value={props.inputValue}
                placeholder={'請輸入'}
                style={{width:"70%"}}
                onChange={props.handleInputChange}
            />
            <Button type="primary" onClick={props.handleBtn}>提交</Button>
        </div>
        <List
            bordered
            dataSource={props.list}
            renderItem={(item,index) => (<List.Item onClick={() => {props.delItem(index)}}>{item}</List.Item>)}
        />
    </div>
	)
}