React context api 仅渲染使用已更改值的组件答案

【问题标题】：React context api only render components that use values that have changedReact context api 仅渲染使用已更改值的组件
【发布时间】：2019-02-23 23:08:22
【问题描述】：

我弄乱了上下文 api，我正在通过树向下传递几个值，我们称它们为 val 和 val2。我有三个不同的组件，我们只称它们为 First、Second 和 Third。 Second 和 Third 将是 React 中 Context Api 的消费者。第二个将获得第一个 val，第三个将获得第二个 val2。现在，如果我有一个函数可以更改第二个组件使用的第一个 val，我将获得使用 val2 值的第三个组件的渲染。使用 redux，我不会得到这种不需要的渲染。我想知道是否有办法在反应中绕过这种渲染，或者 redux 是否仍然是获得这种性能的方法。以下是我所说的一些标记：

状态和全局上下文保存在包装第一个组件的包装器中，该包装器包装了第二个和第三个组件。

这是第二个组件：

import React, { useContext, useState } from 'react';
import {GlobalContext} from '../context/GlobalState'

const Second = () => {
  console.log("Second Rendered");
  const context = useContext(GlobalContext);
  const [inputVal, updateVal] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    context.updateVal(inputVal)
  }
  return (
    <>
      <p>{context.val}</p>
      <form onSubmit={handleSubmit}>
        <input onChange={(e) => updateVal(e.target.value)} name="val" value={inputVal} />
        <button type="submit">Update Val</button>
      </form>
    </>
  )
}

export default Second;

这是第三个组件：

import React, { useContext} from 'react';
import {GlobalContext} from '../context/GlobalState';

const Third = () => {
  console.log("Third Rendered")
  const context = useContext(GlobalContext);

  return (
    <p>{context.val2}</p>
  )
}

export default Third;

所以当我更新第二个组件的值时，即使这些值没有共享，第三个组件也会呈现。我明白它为什么会发生我只是好奇是否有办法阻止这种情况发生。就像我说的，我没有从 redux 获得这种行为，所以我想我想知道我是否应该坚持使用 redux 进行状态管理。

【问题讨论】：

标签： javascript reactjs react-context

【解决方案1】：

我了解您需要避免在您的 <Third /> 组件中重新渲染。在这种情况下，您可以将React.memo 与功能组件一起使用，它与纯组件的功能相同，但没有类。

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

【讨论】：

备忘录只有在道具改变时才有效。如果上下文值发生变化，我会尽量避免重新渲染。

【解决方案2】：

因此，您不能在 Component Third 上使用 memo（因为更改的不是 props，而是 Context），但您可以将 Third 分成两部分 - 一个使用 Context，另一个从一个道具 - 并记住那个内在的。外部组件将重新渲染，但它只是一个包装器，所以这没什么大不了的。

例如：

import React, { useContext} from 'react';
import {GlobalContext} from '../context/GlobalState';

const Third = () => {
  console.log("Third Rendered")
  const context = useContext(GlobalContext);

  return (
    <ThirdBody val={context.val2} />
  )
}

const ThirdBody = React.memo(({ val }) => <p>{val}</p>)

export default Third;

【讨论】：