Question

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

鉴于React团队的建议，不建议在render props函数顶部使用钩子吗？假定它取决于函数返回的值。

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

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

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

遵循此规则，可以确保每次渲染组件时，挂钩的调用顺序都相同

但是我应该改为执行以下操作吗？

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

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

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

Answer 1

挂钩跟踪当前渲染元素。而且render prop函数不是元素。因此，您将挂接到调用元素，而不挂接到prop函数。此渲染道具功能将被视为自定义钩子。如果RenderPropComponent有条件地调用render prop函数，则会出现意外行为。

Answer 2

这并没有违反钩子的规则 - https://unsplash.com/blog/calling-react-hooks-conditionally-dynamically-using-render-props/#waitdoesntthisbreaktherulesofhooks

在render prop函数中使用react钩子

2 个答案: