React之UI元件 容器元件以及無狀態元件

1.ui元件：只負責頁面的渲染

2.容器元件：只負責業務邏輯和資料的處理

3.無狀態元件：把ui元件用函式表示（可以省去生命週期函式，優化**）

1.普通元件todolist.js（拆分成todolistui.js(ui元件)和todolist.js(容器元件)）

importreact 

,from'react'
;import'antd/dist/antd.css'
import
from'antd'
importstore 
from'./store/index'
;import
from'./store/actioncreator'
;classtodolist 
extendscomponent
render
()}>
value
=                        
placehoder
="todo list "
style=}
onchange
=                    
/>
type
= "primary"
onclick
=                    
>
提交style=}
bordered
datasource
=                    
renderitem= 
>
)}//這個這個參考antd官網
/>
)    }
handleinputchange
=(e)=>
;handlestorechange
=()=>
;handlebtnclick
=()=>
;handleitemdelet
=(index)=>
}export defaulttodolist
;

2：普通元件拆分成之一todolistui.js（ui元件）

importreact ,from'react'

;import'antd/dist/antd.css'
importfrom'antd'
classtodolistuiextendscomponent}>
value
=                        placehoder
="todo list "
style
=}                        onchange
=                    />
type
= "primary"
onclick
=                    >提交
style
=}                    bordered
datasource
=                    renderitem
=} >)}
//呼叫父元件帶引數的函式用箭頭函式
/>
)    }
}export defaulttodolistui;

3：普通元件拆分成之二todolist.js（容器元件）

importreact ,from'react'

;importstorefrom'./store/index'
;importfrom'./store/actioncreator'
;importtodolistuifrom'./todolistui'
;classtodolistextendscomponent
render()
list
=                handleinputchange
=                handlebtnclick
=                handleitemdelet
=            />
)    }
handleinputchange=(e)=>;
handlestorechange=()=>;
handlebtnclick=()=>;
handleitemdelet=(index)=>
}export defaulttodolist;

importreact ,from'react'

;import'antd/dist/antd.css'
importfrom'antd'
consttodolistui=(props)=>}>
value
=                    placehoder
="todo list "
style
=}                    onchange
=                />
type
= "primary"
onclick
=                >提交
style
=}                bordered
datasource
=                renderitem
=} >)}
//呼叫父元件帶引數的函式用箭頭函式
/>)};
export defaulttodolistui
;

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

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

UI元件 和 容器元件

像原來的 import react,from react import antd dist antd.css import from antd import store from store index.js import from store actioncreators class beauti...

UI元件和容器元件的拆分

1.首先，以前面的todolist為例 以下是原來的todolist中的render函式中的內容，我們可以將元件中關於ui渲染頁面的封裝到乙個檔案中 render 2.在src目錄下新建乙個檔名為todolistui.js。將剛剛的render中的內容複製到todolistui裡面。3 這裡需要進一...