时间戳

首页 > 解决方案 > React props 状态同步导致不必要的第一次重新渲染

reactjs - React props 状态同步导致不必要的第一次重新渲染

问题描述

我想创建一个完全由其状态控制的组件 Person。它还应该能够同步从其父组件传递到状态的道具更改（名字，姓氏）。我有以下代码。它做我想要的，将道具同步到状态并在状态更改后重新渲染。

然而，我注意到的一个问题是，在父道具更改触发的 DOM 更新后调用 useEffect。所以最初的重新渲染被浪费了，因为我只希望它在 useEffect 被调用并且状态改变之后重新渲染。

import React,{useState, useEffect} from 'react';

const Person = ({firstName, lastName}) =>  {
   const [name, setName] = useState(firstName + lastName)

   useEffect(() => {
       setName(firstName + lastName);
       console.log("state changed!");
   }, [firstName, lastName])

   console.log("re-render!");
   return <div>render {name}</div>;
}

export default Person;

我在这里创建了一个简单的演示https://codesandbox.io/s/sparkling-feather-t8n7m。如果单击重新渲染按钮，在控制台中您将看到以下输出。第一个re-render!是由我想避免的道具更改触发的。知道如何实现这一目标吗？我知道还有其他解决方案，例如使其完全不受控制，但我想知道此解决方案是否有任何解决方法

re-render!
state changed!
re-render!

标签： reactjsreact-reduxreact-hooks

解决方案

你需要在你的 useEffect 中添加一个条件。就像是 ：

const [didUpdate, setDidUpdate] = useState(false);

useEffect(() => {
  if(didUpdate){
    setName(firstName + lastName);
    console.log('state changed!');
  } else {
    setDidUpdate(true);
  }
}, [firstName, lastName]);

在这里它重现了 componentDidUpdate() 行为。

在第一次渲染时，组件被挂载，didUpdate 被初始化为 false，因此效果只会在下一次更新时将其设置为 true。

请注意，使用道具初始化的状态（useState）不会在道具更改时更新。

推荐阅读