如何在 useEffect Hook 中重新渲染组件

Posted 2023-03-17

【中文标题】如何在 useEffect Hook 中重新渲染组件

【英文标题】：How to rerender component in useEffect Hook

【发布时间】：2020-01-20 18:12:58

【问题描述】：

好的：

  useEffect(() => 
    
  , [props.lang]);

我应该在 useEffect 中做些什么来在每次改变 props.lang 时重新渲染组件？

【问题讨论】：

你能提供完整的源代码吗？ Explore 和 RenderExplore 有什么关系？

Explore 只是渲染 RenderExplore

您无需在useEffect 中执行任何操作即可重新渲染组件。如果props.lang 发生变化，那么您可以在渲染中将其用作 this 并且它将始终反映当前值。

【参考方案1】：

如 React 文档中所述，将您的 useEffect 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的混合体。

要表现得像componentDidMount，您需要像这样设置useEffect：

  useEffect(() => console.log('mounted'), []);

第一个参数是一个回调，它将基于第二个参数触发，第二个参数是一个值数组。如果第二个参数中的任何值发生变化，您在 useEffect 中定义的回调函数将被触发。

然而，在我展示的示例中，我将一个空数组作为我的第二个参数传递，并且永远不会更改，因此回调函数将在组件挂载时调用一次。

那种总结useEffect。如果你有一个参数而不是一个空值，就像你的情况一样：

 useEffect(() => 

  , [props.lang]);

这意味着每次props.lang 更改时，都会调用您的回调函数。 useEffect 不会真正重新渲染您的组件，除非您在该回调函数中管理一些可能触发重新渲染的状态。

更新：

如果您想触发重新渲染，您的渲染函数需要在useEffect 中具有您正在更新的状态。

例如，在这里，渲染函数首先显示英语作为默认语言，在我的使用效果中，我在 3 秒后更改了该语言，因此渲染被重新渲染并开始显示“西班牙语”。

function App() 
  const [lang, setLang] = useState("english");

  useEffect(() => 
    setTimeout(() => 
      setLang("spanish");
    , 3000);
  , []);

  return (
    <div className="App">
      <h1>Lang:</h1>
      <p>lang</p>
    </div>
  );

完整代码：

【讨论】：

我理解第二个参数的概念。在 props.lang 更改后我需要一个重新渲染组件。如何使用回调函数管理一些状态？

e.g 如何重新渲染火焰？

@PiotrŻak 检查我更新的答案，看看是否有帮助。

嘿 - 我传递给 RenderExplore props.lang。当用户调用操作时，它是 eng 或 pl，它是变化的。我需要一个重新渲染整个组件，因为我有动画层，并且在更改语言后需要重新渲染才能正常工作

如何在 useEffect 更改第二个参数后挂载和卸载组件？

【参考方案2】：

最简单的方法

添加一个虚拟状态，您可以切换为始终启动重新渲染。

const [rerender, setRerender] = useState(false);

useEffect(()=>

    ...
    setRerender(!rerender);
, []);

这将确保重新渲染，因为组件总是在状态更改时重新渲染。

您可以随时随地拨打setRerender(!rerender)启动重新渲染。

【讨论】：

答案不正确。只有在 JSX 中使用符号时才会触发渲染。

@Drew 哪个符号？

重新渲染...基本上是 rerender 在 JSX 块中

【参考方案3】：

const [state, set] = useState(0);

useEffect(() => 
  fn();
,[state])

function fn() 
  setTimeout((), 
    set(prev => prev + 1)
  , 3000)

上面的代码将每 3 秒重新渲染一次 fn 函数。