组件应在调用位置返回相同的值。并且当子组件使用状态在反应中更新时，主组件不应该重新渲染？

Question

我希望组件的Home函数值相同，并且当组件useState更新时，Home函数不应该呈现

import { useState, useEffect } from "react";
function Component() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log("rerender")
})
useEffect(() => {
let interval = setInterval(() => {
setCount(Math.floor(Math.random() * 1000))
}, 1000)
return () => clearInterval(interval)
}, [])
return count
}
function OtherStuff() {
console.log("OtherStuff")
return (<h1>Should Not Rerender OtherStuff</h1>)
}
function MoreStuff() {
console.log("MoreStuff")
return (<h1>Should Not Rerender MoreStuff</h1>)
}
export default function Home() {
return (
<>
<h1>Hello</h1>
<h1>
<Component />
</h1>
<OtherStuff />
<MoreStuff />
<h1>
<Component />
</h1>
</>
);
}

我已经调用组件函数两次，我想要相同的值应该渲染到两个组件。当Component {count}被setCount更新时，Main函数不应该渲染。此时，在Main函数中没有渲染组件是可以的。这是一个简单的问题。

谢谢。

Answer 1

组件的每个实例都有自己的状态。这意味着它们的状态不共享。如果你想在它们之间共享状态，一种方法是提升状态。

如果您不希望Home呈现，则不能将状态移动到Home。所以你可能需要另一个组件来保存状态。因为任何有reactuseState钩子的组件，都会在状态更新时被重新渲染。

你可以使用react context来实现。将Component的实例包装在一个上下文提供程序中，该上下文提供程序保存count状态并提供count和setCount。

首先你需要创建一个上下文:

const CountContext = createContext();

然后创建一个提供上下文并保存状态的组件:

const CountProvider = (props) => {
// `useCounter` uses `useState` inside.
const [count, setCount] = useCounter();
return (
<CountContext.Provider value={{ count, setCount }}>
{props.children}
</CountContext.Provider>
);
};

OP提供了一个使用useCounter自定义钩子的codesandbox。它将一个数字存储到count状态，并每1000ms将其更新为随机数。

然后把它包裹在你的组件上:

function Parent() {
return (
<div>
<CountProvider>
<Counter />
<Counter />
</CountProvider>
</div>
);
}

codesandbox

注意:

1. 如果你在CountProvider中使用childrenprop渲染另一个组件，它将不会在每次count状态更新时渲染，除非它使用上下文。
2. 但是如果你在CountProvider中渲染一个组件并在函数中渲染它，它将会渲染，除非你使用memo。