如何在状态更改时停止上下文使用者中列表项的重新呈现
如何在状态更改时停止上下文使用者中列表项的重新呈现
提问于 2019-08-16 12:38:44
我有一个react项目，我使用上下文api来管理应用程序的状态。
我有一个具有onClick事件的项列表，该事件在上下文中更新状态。
问题是，当状态更改时，所有项都会重新呈现，这会导致延迟。
我的问题是，如果没有点击，如何阻止其他项目重新呈现。
item.jsx
import React, { useContext } from "react";
import { MainContext } from "../../_context/PresentContext";
const Item = ({item}) => (
<MainContext.Consumer>
{({handleSelectItem}) => (
<div>
<button onClick={() => handleSelectItem(item)}>{item.name}</button>
</div>
)
}
</MainContext.Consumer>
)items.jsx
import React from "react";
import Item from "./Item";
const itemsList = [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'},
{id: 4, name: 'd'}
]
const Items = () => (
<div>
{itemsList.map(i => (
<Item item={item}/>
)
)}
</div>
)handleSelectItem函数只更新上下文状态上的selectedItem，然后在不同的组合中使用它
这只是一个简单的例子，说明了这个问题。真正的itemsList大约有200个项目。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-08-16 13:44:13
如果您的React.PureComponent都是可序列化的，则可以扩展Item component props，或者扩展React.Component并实现shouldComponentUpdate。
备选案文1。
import React, { Component } from "react";
import isEqual from 'lodash.isequal';
export class Item extends Component {
shouldComponentUpdate(nextProps){
return !isEqual(this.props.item, nextProps.item);
}
render() {
const { item } = this.props;
return (
<MainContext.Consumer>
{({ handleSelectItem }) => (
<div>
<button onClick={() => handleSelectItem(item)}>{item.name}</button>
</div>
)}
</MainContext.Consumer>
);
}
}选项2
export class Item extends PureComponent {
render() {
const { item } = this.props;
return (
<MainContext.Consumer>
{({ handleSelectItem }) => (
<div>
<button onClick={() => handleSelectItem(item)}>{item.name}</button>
</div>
)}
</MainContext.Consumer>
);
}
}Stack Overflow用户
发布于 2019-08-16 12:41:54
如何使用纯组分和在生命周期方法shouldComponentUpdate中进行决策？
如果您更喜欢使用钩子，这是一份正式文件如何使用钩子方法实现上述生命周期方法。
Stack Overflow用户
发布于 2019-08-16 14:03:41
- 使用React.memo / PureComponent / shouldComponentUpdate只在组件的状态/道具以不可变的方式更改时才重新呈现组件，而不是仅仅因为父组件重新呈现而重新呈现。
- 在映射的JSX元素中使用
key属性，这样可以在DOM元素之间进行映射，并且只有在键的值发生变化时才重新呈现它们，而不是每次呈现组件时都重新呈现整个列表。 - 箭头函数和对象文本每次被调用时都会返回一个新的引用，所以最好在呈现函数之外定义它们，并使用
useCallback或useMemo挂钩来回溯它们。这样他们就不会破坏你的PureComponent - 考虑使用react window https://github.com/bvaughn/react-window实现虚拟滚动，而不是为用户呈现可能隐藏的200项，而不必在DOM中减慢速度。
item.jsx
import React, {memo, useContext } from "react";
import { MainContext } from "../../_context/PresentContext";
const Item = memo(({item}) => (
const handleClick => useCallback(handleSelectItem(item), [item])
const renderConsumer = ({handleSelectItem}) => (
<div>
<button onClick={handleClick}>{item.name}</button>
</div>
)
<MainContext.Consumer>
{renderConsumer()}
</MainContext.Consumer>
))items.jsx
import React, {memo} from "react";
import Item from "./Item";
const Items = memo(() => (
<div>
{itemsList.map(i => (
<Item key={i} item={item}/>
)
)}
</div>
))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57524811
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号