如何编写一个可复用组件

将一个不可复用的组件改成清晰通用的可复用组件

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>
        )
    }
}
复制代码

使用无状态组件复写一下这个列表

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组件不会包含状态，所以可以将其改写为无状态的函数组件

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'
        />
    )
}
复制代码

TwoList

const TwoList = ({ list }) => (
    <List
        list={list}
        userNameKey='userName'
        choiceKey='choice'
    />
)
复制代码

现在已经完成了组件的创建，将一个单一需求的组件变得可复用，如果有新的需求，我们只需要改动一点代码就能完成所有地方的修改

---

相比冬天的砖，我还是喜欢秋天的砖，不那么冻手···

转载于:https://juejin.im/post/5c11b80c6fb9a049ba417093