你能早点用React钩子返回吗？

Question

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

我理解这一点，但现在我的问题是，是否可以通过钩子从函数组件中提前返回。

所以允许这样的事情：

import React from 'react';
import { useRouter, Redirect } from 'react-router';
import { useRedux } from 'react-redux';

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

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


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

从技术上讲，有条件地调用useRedux钩子，但是它们被调用时的顺序在渲染之间不会改变（即使可能会调用一个较少的钩子）。

如果不允许这样做，你可以解释为什么不允许这样做，并提供一般的替代方法，以便在带有钩子的函数组件中提前返回？

Answer 1

即使你坚持不能有条件地调用Hooks的条件，你也破坏了需要在函数顶部调用钩子的规则。所以不，你不能在钩子之间有任何组件逻辑。您可以在选择器中使用该逻辑并发布挂钩。

import React from 'react';
import { useRouter, Redirect } from 'react-router';
import { useRedux } from 'react-redux';

const stateSelector =(match) => {
    if (!match) {
      return null;
    }
    const { some, thing } = match.params;
    // do what you want and return from here;
}
export default function Component() {
  const { match } = useRouter({ path: '/:some/:thing' });
  const state = useRedux(stateSelector(match));

  if (!match) return <Redirect to="/" />;
  return <Blah {...state} />;
}