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

前言： 在複雜的元件中，我們最好把元件拆分為ui元件和容器元件以方便我們的管理和維護

import react,

from
'react'
class
test
extends
component
}render()
onmousemove=
onclick=
>
<
/li>))
}<
/ul>)}
showitem
(e)showindex
(index)
}export
default test

import react,

from
'react'
const
testui
=(props)
=>
export
default testui

import testui from

'./testui'
// 在render中引入
render()

// 在constructor中有值list

this
.state =
// 在子元件testui中通過自定義屬性傳過去
render()
/>
)}

import react,

from
'react'
const
testui
=(props)
=>
>
<
/li>))
}<
/ul>)}
export
default testui

constructor

(props)
this
.showitem =
this
.showitem.
bind
(this
)// 已經在此進行了this指向的改變
}showitem
(e)// 在子元件testui中通過自定義屬性傳過去
render()
showitem=
/>
)}

import react,

from
'react'
const
testui
=(props)
=>
onmousemove=
>
<
/li>))
}<
/ul>)}
export
default testui

constructor

(props)
this
.showindex =
this
.showindex.
bind
(this
)// 已經在此進行了this指向的改變
}showindex
(index)
// 在子元件testui中通過自定義屬性傳過去
render()
showindex=
/>
)}

import react,

from
'react'
const
testui
=(props)
=>
onclick=
}>
<
/li>))
}<
/ul>)}
export
default testui

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...

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

1.ui元件 只負責頁面的渲染 2.容器元件 只負責業務邏輯和資料的處理 3.無狀態元件 把ui元件用函式表示 可以省去生命週期函式，優化 二 具體 1.普通元件todolist.js 拆分成todolistui.js ui元件 和todolist.js 容器元件 importreact from ...

UI元件和容器元件的拆分

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