您可以使用React钩子早日返回吗？

Question

React文档明确指出，有条件地调用钩子是行不通的。从原始的React
hooks演示文稿来看
，原因是因为React使用您调用hook的顺序来注入正确的值。

我理解这一点，但是现在我的问题是，从带有钩子的函数组件中尽早返回是否可以？

那么允许这样的事情吗？

import React from 'react';
import { useRouteMatch, Redirect } from 'react-router';
import { useSelector } from 'react-redux';

export default function Component() {
  const { match } = useRouteMatch({ path: '/:some/:thing' });
  if (!match) return <Redirect to="/" />;

  const { some, thing } = match.params;
  const state = useSelector(stateSelector(some, thing));

  return <Blah {...state} />;
}

从技术上讲，该useSelector挂钩是有条件地调用的，但是在渲染之间它们的调用顺序不会改变（即使有可能会调用更少的挂钩）。

如果不允许这样做，您能否解释 为什么 不允许这样做，并提供通用的替代方法来尽早返回带有钩子的函数组件？

Answer 1

React不允许您在其他钩子之前先返回。如果一个组件执行的钩子少于以前的渲染，则将出现以下错误：

不变违规：渲染的钩子少于预期。这可能是由意外的提前归还声明引起的。

React无法分辨早期返回和条件挂钩调用之间的区别。例如，如果您有3个呼叫，useState而您有时在第二个useState呼叫之后返回，则React无法告知您是在第二个呼叫之后返回还是在第一个或第二个useState呼叫周围设置了条件，因此它无法可靠地知道它是否是两个返回正确的状态useState的呼叫
没有 发生。

这是一个示例，您可以用来查看此错误的实际发生（两次单击“增量状态1”按钮以获取错误）：

import React from "react";
import ReactDOM from "react-dom";

function App() {
  const [state1, setState1] = React.useState(1);
  if (state1 === 3) {
    return <div>State 1 is 3</div>;
  }
  const [state2, setState2] = React.useState(2);
  return (
    <div className="App">
      <div>State 1: {state1}</div>
      <div>State 2: {state2}</div>
      <button onClick={() => setState1(state1 + 1)}>Increment State 1</button>
      <button onClick={() => setState2(state2 + 1)}>Increment State 2</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我建议的另一种方法是将早期返回的部分分成自己的部分。提早返回后该部分所需的任何内容都将作为道具传递给新组件。

以我的示例为例，它可能如下所示：

import React from "react";
import ReactDOM from "react-dom";

const AfterEarlyReturn = ({ state1, setState1 }) => {
  const [state2, setState2] = React.useState(2);
  return (
    <div className="App">
      <div>State 1: {state1}</div>
      <div>State 2: {state2}</div>
      <button onClick={() => setState1(state1 + 1)}>Increment State 1</button>
      <button onClick={() => setState2(state2 + 1)}>Increment State 2</button>
    </div>
  );
};
function App() {
  const [state1, setState1] = React.useState(1);
  if (state1 === 3) {
    return <div>State 1 is 3</div>;
  }
  return <AfterEarlyReturn state1={state1} setState1={setState1} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);