是否有可能摆脱每次重新渲染的 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 返回的值）并返回该上下文的当前上下文值。当前上下文值由树中调用组件上方最近的 value prop 确定。

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

正如您从文档中看到的那样，useContext() 钩子只会在它提供的值在某些时候发生变化时导致重新渲染您的组件。 Ans 这可能是您的预期行为。为什么在上下文挂钩中需要陈旧数据？

当您的组件自行重新渲染时，不更改上下文，useContext() 行将简单地返回与之前渲染相同的值。

看来您使用useContext() 钩子的方式与它本来的用途一样。我看不出有什么问题。