如何編寫一個可複用組件

將一個不可複用的組件改爲清晰通用的可複用組件

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組件

這裏的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

相關文章
相關標籤/搜索