React:在状态更改时停止重新呈现部分
React:在状态更改时停止重新呈现部分
提问于 2021-10-27 03:56:06
对于钩子的概念有点困惑，我有一个组件，其中有两个用useState定义的状态变量：
现在，每次一个变量发生更改时，它都会使JSX中的另一个变量部分重新呈现，因为我希望避免重新呈现该列表。我如何才能做到这一点？
因此，在下面的示例中，每当我单击该按钮时，它都会重新呈现列表。我怎么才能阻止这一切？
import "./styles.css";
import { Fragment, useCallback, useEffect, useState } from "react";
const App = () => {
const [repos, setRepos] = useState([]);
const [count, setCount] = useState(1);
useEffect(() => {
const fetchRepos = async () => {
const response = await fetch("https://api.github.com/repositories");
const repoDetails = await response.json();
console.log(repoDetails);
setRepos([...repoDetails]);
};
fetchRepos();
}, []);
const handleCount = () => {
setCount(count + 1);
};
return (
<Fragment>
<div className="App">
{repos.map((r) => {
console.log("render");
return <li key={r.id}>{r.name}</li>;
})}
</div>
<button onClick={handleCount}>Button {count}</button>
</Fragment>
);
};
export default App;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-27 05:35:49
将列表标签解耦到一个组件中，并对其进行记忆，这样每次属性相同时，React将跳过状态更改时的重新渲染。
React Memoization：https://dev.to/alexgurr/what-is-function-memoization-and-why-should-you-care-5a1l
Stack Overflow用户
发布于 2021-10-27 04:59:35
您可以将包含list项的div组件抽象为单独的组件，并使用React.memo对其进行包装。将repos状态作为道具传递给它。以便仅当repos更改时才会重新呈现。如果count发生变化，它将返回列表的记忆版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69732579
复制相关文章
相似问题
腾讯云开发者
