React:冗余生命周期钩子

Question

嗨，我有多个具有相同生命周期钩子的react组件。有没有一个好的设计实践来处理这个问题？

一开始，我试着使用组合。为我的子组件创建包装器。然后，我尝试用componentWillMount为包装器创建一个生命周期钩子。

class Wrapper extends React.Component {
   componentWillMount() {
      if(this.props.status == "not logged in") browserHistory.push("/login")
   }
   render() {
      return {
         <div>{this.props.children}</div>
      }
   }
}

但是，我随后意识到，只有在最初呈现包装器时才会触发componentWillMount。因此，对子组件的任何更改都不会触发componentWillMount。一个解决方案可以是一个生命周期钩子，当子组件改变时触发，但我已经看过了，我不认为它存在。

另一种解决方案是使用继承并创建定义生命周期钩子的父类。

class Parent extends React.Component {
   componentWillMount() {
      if(this.props.status == "not logged in") browserHistory.push("/login")
   }
}

然后我可以用以下命令创建继承它的组件：

class Child extends Parent {
  ...
}

然而，我听说由于性能和冲突，React组件的继承不是一个好主意。

有什么想法吗？或者我可能需要使用冗余代码？只是在寻找一个优雅的解决方案。

谢谢

Answer 1

如果您想尝试使用新的React Hooks方法来实现这一点，下面的自定义钩子将实现您想要的功能

const routeLoggedOutUser = loginStatus => {
  useEffect(
    () => {
      if (loginStatus === "not logged in")
        browserHistory.push("/login");
    },
    [loginStatus]
  );
};

您只需调用相关函数组件中的自定义钩子，如下所示：

function Inner({ status }) {
  routeLoggedOutUser(status);
  return <div>A component with status {status}</div>;
}

基于此条件的路由有点可疑，但您可能希望重新考虑在应用程序中的确切位置接收此登录状态更新，以便重新路由逻辑只发生一次。

沙盒代码，仔细看一下right here。

Answer 2

React Hooks是一个新的API，旨在解决这个问题(以及其他问题)。它使得在组件之间重用有状态逻辑变得更容易。在您的例子中，您可以编写一个名为useLogoutStatus的自定义钩子。约定是以单词use开始钩子，这样钩子ESLint插件就可以知道它是一个钩子，并确保该钩子的使用遵循rules of hooks。

function useLogoutStatus(loginStatus) {
  useEffect(
    () => {
      if (loginStatus === 'not logged in') {
        browserHistory.push('/login');
      }
    },
    [loginStatus], // This tells React to only run `useEffect` when `loginStatus` has changed.
  );
};

在你的组件中，你可以这样做：

function Profile(props) {
  useLogoutStatus(props.status);

  return ...;
}

function Feed(props) {
  useLogoutStatus(props.status);

  return ...;
}