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

Question

来自Rules of Hooks：

不要在循环，条件或嵌套函数中调用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

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