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} />

因此，问题现在消失了，但是我们有两个组成部分。我认为应该在上部分<SomeComponent />中导入<WithContextDataComponent />，这有点难看。

我可以停止对useContext的不必要的重新渲染而无需拆分为两个部分吗？

Answer 1

来自React Hooks API参考：

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

useContext

const value = useContext(MyContext);

接受一个上下文对象（从React.createContext返回的值）并返回该上下文的当前上下文值。当前上下文值由树中调用组件上方最近的值prop决定。

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

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

当组件自行重新渲染而上下文没有更改时，useContext()行将简单地返回与上一次渲染相同的值。

似乎您正在使用useContext()钩子来使用它。我没有发现任何问题。

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

1 个答案: