你能用 React hooks 提前回来吗？

Question

React 文档明确指出calling hooks conditionally will not work。 From the original React hooks presentation，原因是因为 React 使用你调用 hooks 的顺序来注入正确的值。

我明白这一点，但现在我的问题是是否可以从带有钩子的函数组件中提前返回。

那么这样的事情是否允许？：

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 并且有时在第二次调用后返回，React 无法判断你是否在第二次调用 useState 后返回，或者你是否在第一次或第二次 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);

Answer 2

如前所述，您不能在组件内有条件地运行挂钩。但是您可以将可能被视为自定义钩子的渲染函数传递给其他组件，并且仍然可以访问当前范围。因此，不要拆分组件，而是使用这样的实用组件：

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

const HooksHost = ({ children }) => children();

function App() {
  const [state1, setState1] = React.useState(1);

  if (state1 === 3) {
    return <div>State 1 is 3</div>;
  }

  return (
    <HooksHost>
      {/* should be named to pass lint rule that checks if it starts from 'use' then it is custom hook */}
      {function useHooks() {
        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>
        );
      }}
    </HooksHost>
  );
}

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