Использование реакционных хуков внутри функции визуализации - PullRequest
Новая
       5

Использование реакционных хуков внутри функции визуализации

2 голосов
/ 21 марта 2019

Взято из Правила крючков :

Не вызывать хуки внутри циклов, условий или вложенных функций. Вместо этого всегда используйте хуки на верхнем уровне вашей функции 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>
);

1 Ответ

2 голосов
/ 21 марта 2019

Хуки отслеживают текущий элемент рендеринга. И рендер опора не является элементом. Таким образом, вы подключитесь к вызывающему элементу, а не к своей функции поддержки. Эта функция рендеринга будет рассматриваться как пользовательский хук. Вы получите неожиданное поведение, если RenderPropComponent вызовет функцию рендера prop условно.

...