是否有可能摆脱每次重新渲染的useContext计算?

Question

我们可以防止不必要的 useEffect 计算，将空数组作为钩子中的第二个参数：

// that will be calculated every single re-rendering
useEffect(() => {...some procedures...})
// that will be calculated only after the first render
useEffect(() => {...some procedures...}, [])

但是，对于我们不能像上面那样做的useContext钩子，请提供第二个参数。 此外，我们不能通过useCallback，useMemo来包装useContext。 例如，我们有一个组件：

const someComponent = () => {
const contextValue = useContext(SomeContext);
const [inputValue, setInputValue] = useState('');
return (
<Fragment>
<input value={inputValue} onChange={onInputChange} />
<span>{contextValue}</span>
</Fragment>
)

问题是每个类型都会启动重新渲染，并且我们每次都会有不必要的 useContext 重新渲染。其中一个决定是制动组件在两个：

const WithContextDataComponent = () => {
const contextValue = useContext(SomeContext);
return <JustInputComponent contextValue={contextValue} />
const JustInputComponent = (props) => {
const [inputValue, setInputValue] = useState('');
return <input value={inputValue} onChange={onInputChange} />

所以，现在问题消失了，但是我们有两个组件。在上层组件中，我们应该导入<WithContextDataComponent />而不是<SomeComponent />，我认为这有点丑。

我可以在不拆分为两个组件的情况下停止对 useContext 进行不必要的重新渲染吗？

Answer 1

来自 React Hooks API 参考：

https://reactjs.org/docs/hooks-reference.html#usecontext

使用上下文

const value = useContext(MyContext);

接受上下文对象(从 React.createContext 返回的值)并返回该上下文的当前上下文值。当前上下文值由树中调用组件上方最近的值属性确定。

当组件上方最近的组件更新时，此挂钩将使用传递给该 MyContext 提供程序的最新上下文值触发重新渲染。

从文档中可以看到，useContext()钩子只有在它提供的值在某个时候发生变化时，才会导致组件的重新渲染。答：这可能是您的预期行为。为什么上下文挂钩中需要过时的数据？

当组件自行重新渲染时，上下文中没有更改，useContext()行将只返回与上一个渲染相同的值。

似乎您正在按照它想要的方式使用useContext()钩子。我看不出有什么问题。