class OneList extends React.Component {
constructor(props) {
super(props)
this.state = {
list: [],
}
}
componentDidMount() {
// 從api中加載一個消息列表
fetch().then(list => {
this.setState({ list })
})
}
render() {
const { list = [] } = this.state;
return (
<ul>
{
list.map(item => (
<li key={item.id}>
<div>{item.userName}</div>
{item.choice && <div>{item.choice}</div>}
</li>
))
}
</ul>
)
}
}
複製代碼
使用無狀態組件複寫一下這個列表api
const TwoList = ({ list = [] }) => (
<ul>
{
list.map(item => (
<li key={item.id}>
<div>{item.userName}</div>
{item.choice && <div>{item.choice}</div>}
</li>
))
}
</ul>
)
複製代碼
上面的組件是徹底能夠知足正常工做須要的,可是遇到相同代碼,再去複製代碼每每不是最佳解決方案,可是可能會由於代碼量少而不去對組件進行抽象和須要展現的數據進行解耦數組
這裏的List組件不會包含狀態,因此能夠將其改寫爲無狀態的函數組件bash
const List = ({ list, userNameKey, choiceKey }) => (
// userName 用於指定須要顯示的屬性名,choice用於指定可選部分的屬性
<ul>
{
list.map(item => (
<Item
key={item.id}
userName={item[userNameKey]}
choice={item[choiceKey]}
/>
))
}
</ul>
)
const Item = ({ userName, choice }) => (
<li>
<div>{userName}</div>
{choice && <div>{choice}</div>}
</li>
)
複製代碼
如今咱們建立了兩個接口清晰的小型組件,優勢:容易維護與測試,fix bug 更方便函數
OneList測試
render() {
return (
<List
list={list}
userNameKey='userName'
choiceKey='choice'
/>
)
}
複製代碼
TwoListfetch
const TwoList = ({ list }) => (
<List
list={list}
userNameKey='userName'
choiceKey='choice'
/>
)
複製代碼
如今已經完成了組件的建立,將一個單一需求的組件變得可複用,若是有新的需求,咱們只須要改動一點代碼就能完成全部地方的修改ui
相比冬天的磚,我仍是喜歡秋天的磚,不那麼凍手···this