在渲染道具功能中使用反应钩子

Question

取自钩子规则：

不要在循环、条件或嵌套函数中调用 Hook。相反，始终在 React 函数的顶层使用 Hooks

鉴于反应团队的这个建议，在渲染道具函数顶部使用钩子是否不可取？假设它取决于函数返回的值。

const MyComponent = () => (
    <RenderPropComponent>
        {value => {
            React.useEffect(() => {
                // Magic
            }, [value]);

            return <p>Hello</p>;
        }}
    </RenderPropComponent>
);

我不觉得这违反了他们的要求

通过遵循此规则，您可以确保每次组件呈现时都以相同的顺序调用 Hook

但是我应该做以下事情吗？

const MyComponent = ({ value }) => {
    React.useEffect(() => {
        // Magic
    }, [value]);

    return <p>Hello</p>;
};

const MyContainer = () => (
  <RenderPropComponent>
      {value => <MyComponent value={value} />}
  </RenderPropComponent>
);

Answer 1

钩子跟踪当前渲染元素。并且 render prop 函数不是一个元素。因此，您将挂钩到调用元素而不是您的 prop 函数。此渲染道具函数将被视为自定义挂钩。如果有条件地调用 render prop 函数，您将得到意想不到的行为RenderPropComponent。