Javascript 如何创建从阵列中独立更新的组件列表

我有一个数组中的对象列表，我将其作为初始状态加载到reducer中。 当我研究该数组中的对象时（将级别增加1），整个渲染列表将更新，即使其余的保持不变。 有没有办法在Redux中只更新该列表中的一个组件

减速器

const researchObj = fromJS{
        researchList: [{
        id: 1,
        name: 'iron',
        level: 0
    }, {
        id: 2,
        name: 'defence',
        level: 0
    }]
})

export default function (state = researchObj, action) {
    switch (action.type) {
        case 'RESEARCH':
            return research(state, action.researchId);
    }
    return state;
}

function research(state, researchId) {

    const researchObjIndex = state.get('researchList').findIndex(
        (research) => research.get('id') === researchId
    );
    let researchedItem = state.get('researchList').get(researchObjIndex);
    researchedItem = researchedItem.update('level', level => level + 1);
    let newState = state.update('researchList', researchList => researchList.set(researchObjIndex, researchedItem));
    return newState;

}

export class ResearchList extends React.Component {
    render() {
        this.getResearchCost = (baseCost, costIncrease, level) => {
            return baseCost + (baseCost * costIncrease * level);
        }
        return <section className={styles.root}>
            {this.props.researchList.map(item =>
                <ResearchItem
                    key={item.get('id') }
                    id={item.get('id') }
                    name={item.get('name') }
                    level={item.get('level') }
                    baseProduction={item.get('baseProduction') }
                    productionIncrease={item.get('productionIncrease') }
                    upgradeCost={this.getResearchCost(item.get('baseCost'), item.get('costIncrease'), item.get('level')) }
                    doResearch={this.props.research}
                    />
            ) }
        </section>
    }

}
ResearchList.propTypes = {
    researchList: React.PropTypes.object.isRequired,
    research: React.PropTypes.func.isRequired

}
function mapStateToProps(state) {
    return {
        researchList: state.game.get('researchList')
    };
}
export const ResearchListContainer = connect(mapStateToProps, actions)(ResearchList);

研究列表容器

const researchObj = fromJS{
        researchList: [{
        id: 1,
        name: 'iron',
        level: 0
    }, {
        id: 2,
        name: 'defence',
        level: 0
    }]
})

export default function (state = researchObj, action) {
    switch (action.type) {
        case 'RESEARCH':
            return research(state, action.researchId);
    }
    return state;
}

function research(state, researchId) {

    const researchObjIndex = state.get('researchList').findIndex(
        (research) => research.get('id') === researchId
    );
    let researchedItem = state.get('researchList').get(researchObjIndex);
    researchedItem = researchedItem.update('level', level => level + 1);
    let newState = state.update('researchList', researchList => researchList.set(researchObjIndex, researchedItem));
    return newState;

}

export class ResearchList extends React.Component {
    render() {
        this.getResearchCost = (baseCost, costIncrease, level) => {
            return baseCost + (baseCost * costIncrease * level);
        }
        return <section className={styles.root}>
            {this.props.researchList.map(item =>
                <ResearchItem
                    key={item.get('id') }
                    id={item.get('id') }
                    name={item.get('name') }
                    level={item.get('level') }
                    baseProduction={item.get('baseProduction') }
                    productionIncrease={item.get('productionIncrease') }
                    upgradeCost={this.getResearchCost(item.get('baseCost'), item.get('costIncrease'), item.get('level')) }
                    doResearch={this.props.research}
                    />
            ) }
        </section>
    }

}
ResearchList.propTypes = {
    researchList: React.PropTypes.object.isRequired,
    research: React.PropTypes.func.isRequired

}
function mapStateToProps(state) {
    return {
        researchList: state.game.get('researchList')
    };
}
export const ResearchListContainer = connect(mapStateToProps, actions)(ResearchList);

export class ResearchList扩展React.Component{
render（）{
this.getResearchCost=（基本成本、成本增加、级别）=>{
返回基本成本+（基本成本*成本增加*级别）；
}
返回
{this.props.researchList.map（项=>
) }
}
}
ResearchList.propTypes={
研究列表：React.PropTypes.object.isRequired，
研究：需要React.PropTypes.func
}
函数MapStateTops（状态）{
返回{
researchList:state.game.get（'researchList'）
};
}
export const ResearchListContainer=connect（mapstatetrops，actions）（ResearchList）；

研究项目组件

export default class ResearchItem extends React.Component {

    render() {
        return <div className={styles.root}>
            <div className={styles.stats_container}>
                <span className={styles.stats_item}>Current Level: {this.props.level}</span>
                <span className={styles.stats_item}>Current Production: {(this.props.level * this.props.productionIncrease) + this.props.baseProduction}</span>
            </div>
            <div className={styles.research_btn_container}>
                <button className={styles.research_btn} onClick={() => this.props.doResearch(this.props.id) } >{this.props.name} ({this.props.upgradeCost}) </button>
            </div>
        </div>
    }
}

导出默认类ResearchItem扩展React.Component{
render（）{
返回
当前级别：{this.props.Level}
当前生产：{（this.props.level*this.props.productionIncrease）+this.props.baseProduction}
this.props.doResearch（this.props.id）}>{this.props.name}（{this.props.upgradeCost}）
}
}

根据存储更改有选择地更新组件的唯一方法是将

MapStateTops

设置到存储的适当部分。在您的情况下，您有一个容器需要访问的数组，因此您不能进一步限制存储更新。相反，我建议将

shouldComponentUpdate

添加到您的

研究项目

组件中。在那里，您可以检查

newProps

与

this.props

的对比，并进行相等性检查。如果您关心的属性发生更改，请让它更新，否则不要更新

应更新组件上的规范

：

采取

nextProps，nextState

。它需要一个返回布尔值，因此您可以说

return nextProps.level !== this.props.level;

---

这意味着只有在级别不同时才会更新。使用您认为合适的任何条件。

根据存储更改有选择地更新组件的唯一方法是将

MapStateTops

设置为存储的适当部分。在您的情况下，您有一个容器需要访问的数组，因此您不能进一步限制存储更新。相反，我建议将

shouldComponentUpdate

添加到您的

研究项目

组件中。在那里，您可以检查

newProps

与

this.props

的对比，并进行相等性检查。如果您关心的属性发生更改，请让它更新，否则不要更新

应更新组件上的规范

：

采取

nextProps，nextState

。它需要一个返回布尔值，因此您可以说

return nextProps.level !== this.props.level;

---

这意味着只有在级别不同时才会更新。使用你认为合适的任何条件。

你能澄清一下“更新”是什么意思吗？如果你的意思是渲染，为什么会那么糟糕？如果我有一个很长的列表，在这种情况下，我不想更新整个列表，如果我研究一个。使用update，我指的是React-chrome开发工具在我激活它时显示的更新，以及渲染函数的调用（我在其中添加了一个console.log）。不确定你指的是开发工具的哪个更新，但要知道，如果没有显示更改，React足够智能，可以提高效率，因此我不会花费太多时间尝试停止重新渲染。我指的是“跟踪React更新”。发现开发工具存在问题，您能否澄清“更新”的含义？如果你的意思是渲染，为什么会那么糟糕？如果我有一个很长的列表，在这种情况下，我不想更新整个列表，如果我研究一个。使用update，我指的是React-chrome开发工具在我激活它时显示的更新，以及渲染函数的调用（我在其中添加了一个console.log）。不确定你指的是开发工具的哪个更新，但要知道，如果没有显示更改，React足够智能，可以提高效率，因此我不会花费太多时间尝试停止重新渲染。我指的是“跟踪React更新”。发现了开发工具的问题如何停止更新。（很抱歉，我不熟悉React和Redux）。如何停止更新。（对不起，我是新的反应和重复）。