小编Bro*_*net的帖子

还请帮我标题并更好地表达问题.

我在react/redux架构中遇到了一个问题,我找不到很多例子.

我的应用程序依赖于不变性,引用相等性和PureRenderMixin性能.但我发现很难用这种架构创建更通用和可重用的组件.

可以说我有这样的通用ListView:

const ListView = React.createClass({
    mixins: [PureRenderMixin],

    propTypes: {
        items: arrayOf(shape({
            icon: string.isRequired,
            title: string.isRequired,
            description: string.isRequired,
        })).isRequired,
    },

    render() {
        return (
            <ul>
                {this.props.items.map((item, idx) => (
                    <li key={idx}>
                        <img src={item.icon} />
                        <h3>{item.title}</h3>
                        <p>{item.description}</p>
                    </li>
                )}
            </ul>
        );
    },
});

然后我想使用列表视图来显示redux商店中的用户.他们有这种结构:

const usersList = [
    { name: 'John Appleseed', age: 18, avatar: 'generic-user.png' },
    { name: 'Kate Example', age: 32, avatar: 'kate.png' },
];

到目前为止,这在我的应用程序中是非常正常的.我通常把它渲染成:

<ListView items={usersList.map(user => ({
    title: user.name,
    icon: …