本文介绍了如何在 useEffect Hook 中重新渲染组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好的:

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

每次更改 props.lang 时,我应该在 useEffect 内部做什么来重新渲染组件?

解决方案:

我通过改变一些问题的想法来解决这个问题(我使用另一个函数来很好地处理语言变化.

解决方案

如 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("西班牙语");}, 3000);}, []);返回 (<div className="应用程序"><h1>朗:</h1><p>{lang}</p>

);}

完整代码:

Ok so:

  useEffect(() => {

  }, [props.lang]);

What should I do inside useEffect to rerender component every time with props.lang change?


Solution:

I solve this problem in changing some idea of problem (I use another function to work's well with language change.

解决方案

Think of your useEffect as a mix of componentDidMount, componentDidUpdate, and componentWillUnmount, as stated in the React documentation.

To behave like componentDidMount, you would need to set your useEffect like this:

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

The first argument is a callback that will be fired based on the second argument, which is an array of values. If any of the values in that second argument change, the callback function you defined inside your useEffect will be fired.

In the example I'm showing, however, I'm passing an empty array as my second argument, and that will never be changed, so the callback function will be called once when the component mounts.

That kind of summarizes useEffect. If instead of an empty value, you have an argument, like in your case:

 useEffect(() => {

  }, [props.lang]);

That means that every time "props.lang" changes, your callback function will be called. The useEffect will not rerender your component really, unless you're managing some state inside that callback function that could fire a re-render.

UPDATE:

If you want to fire a re-render, your render function needs to have a state that you are updating in your useEffect.

For example, in here, the render function starts by showing English as the default language and in my use effect I change that language after 3 seconds, so the render is re-rendered and starts showing "spanish".

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

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

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

Full code:

这篇关于如何在 useEffect Hook 中重新渲染组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 14:52