你将如何在 React 中使用 useEffect 实现 shouldComponentUpdate？

Question

我正在阅读 React 文档，它建议如果你有一些经常更改的道具，一个好的生命周期方法可以使用 shouldComponentUpdate。

我的问题是您如何将 useEffect 方法与如下功能组件一起使用？

这是我的功能组件：

function GenericIsUserLoggedInLink({ isLoggedIn, logOutUser, route, anchorText }) {

    const [setProps] = useState({isLoggedIn: isLoggedIn, route: route, anchorText:anchorText });
    console.log('setProps', setProps);

 useEffect((nextProps, nextState) => {
    if (setProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
      return true;
    }
    if (setProps.route !== nextProps.setProps.route) {
      return true;
    }
    if (setProps.anchorText !== nextProps.setProps.anchorText) {
      return true;
    }
    return false;
  });

 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  } else if (anchorText) {
   return <Link href={route}><a >{anchorText}</a></Link>
  }
 } else {
  if (route === "/login") {
     return  <Link href="/login"><a >Log in!</a></Link>
  }
  return null
 }
}

这是我的做法，但没有用！哈！有没有人可以提供见解？

更新我遵循了 Shubham 的处方——但是运行变成了这个？

所以我这样做了... 但感觉很hacky：我想这不是因为我在利用 lexical scoping

var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isLoggedIn, logOutUser, route, anchorText }) => {
 comparator = (prevProps, nextProps) => {
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
      return true;
    }
    if (prevProps.isLoggedIn !== nextProps.setProps.route) {
      return true;
    }
    if (prevProps.anchorText !== nextProps.setProps.anchorText) {
      return true;
    }
    return false;
}

   if (isLoggedIn) {
      if (anchorText === undefined) {
       return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
      } else if (anchorText) {
       return <Link href={route}><a >{anchorText}</a></Link>
      }
   } else {
      if (route === "/login") {
         return  <Link href="/login"><a >Log in!</a></Link>
      }
      return null
   }
}, comparator);

Answer 1

useEffect 不是替代 shouldComponentUpdate 功能组件的合适钩子。

相反，您需要使用 React.memo 以防止重新渲染。此外，您不需要维护状态来比较以前和当前的道具。

const comparator = (prevProps, nextProps) => {
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
      return true;
    }
    if (prevProps.route !== nextProps.setProps.route) {
      return true;
    }
    if (prevProps.anchorText !== nextProps.setProps.anchorText) {
      return true;
    }
    return false;
}

const GenericIsUserLoggedInLink = React.memo(({ isLoggedIn, logOutUser, route, anchorText }) => {

   if (isLoggedIn) {
      if (anchorText === undefined) {
       return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
      } else if (anchorText) {
       return <Link href={route}><a >{anchorText}</a></Link>
      }
   } else {
      if (route === "/login") {
         return  <Link href="/login"><a >Log in!</a></Link>
      }
      return null
   }
}, comparator);

你将如何在 React 中使用 useEffect 实现 shouldComponentUpdate？

How would you implement shouldComponentUpdate using useEffect in React?

state

reactjs

high-order-component

react-hooks

react-lifecycle-hooks