在渲染Prop功能中使用React钩子

Question

从钩子规则中获取：

不要在循环，条件或嵌套功能中调用钩子。，请务必在React功能的顶级使用钩子

鉴于React团队的这一建议，是否可以使用渲染道具功能的顶部使用钩子？假设它取决于函数返回的值。

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

挂钩跟踪当前渲染元素。渲染prop功能不是元素。因此，您将连接到呼叫元素，而不是您的道具功能。此渲染Prop功能将被视为自定义挂钩。如果RenderPropComponent调用渲染道具功能，您将获得意外行为。

Answer 2

这不会打破钩子的规则-https：//unsplash.com/blog/calling-reakct-hooks-hooks-cornitionally-dynaminally-render-render-render-render-render-render-render-props/#waitdoesntthisntthisthisnisthisbreaktherlesoftherulesofhookstheg