Как реагируют хуки ссылочных значений, передаваемых в массив зависимостей? - PullRequest
Новая
       20

Как реагируют хуки ссылочных значений, передаваемых в массив зависимостей?

1 голос
/ 29 мая 2019

Скажите, у меня есть этот компонент со следующим хуком: 

function SomeComponent(props) {
useEffect(
    () => {
        //....code
        if (props.propOne === ....) { .... }
        // ...code
        if (props.propTwo === ....) { .... }
    }, 
    [props.propOne]
)

return <Something />

}

Приведенный выше крюк будет работать

  • один раз при первом выполнении кода компонента
  • каждый раз, когда значение props.propOne изменяется

Обратите внимание, однако, что обратный вызов ловушки также делает ссылку на pros.propTwo, фактически не передавая ее в массив зависимостей.

Хотя props.propTwo никогда не будет влиять на повторное выполнение хуков, что происходит со значением, на которое ссылается обратный вызов хука внутри своего тела?

например

  • Во время начального рендеринга компонента props.propOne === A и props.propTwo === B
  • Хук выполняется и ссылается на значения A и B
  • Во время последующего рендеринга props.propOne === C и props.propTwo === D
  • Хук перезапускается, так как props.propOne изменен. Он ссылается на значение C для props.propOne, но что он ссылается на значение props.propTwo? B или D?

Используются ли ссылочные значения хуков на основе замыкания, созданного при выполнении компонента, или React выполняет какое-то вуду, когда сохраняет только обновленное значение для значений, переданных в массив зависимостей?

Из документов:

Массив зависимостей не передается в качестве аргументов для обратного вызова. Концептуально, однако, это то, что они представляют: каждое значение, указанное в обратном вызове, также должно появляться в массиве зависимостей.

UPDATE:

Задав вопрос, я попал к этой статье Дана Абрамова:

https://overreacted.io/a-complete-guide-to-useeffect/

Предлагаю всем прочитать.

1 Ответ

1 голос
/ 29 мая 2019

React hooks сильно зависит от closures, чтобы использовать значения.Значения, на которые ссылаются в ловушке, будут значениями, которые присутствовали в закрытии useEffect при его последнем вызове.

Например, в вашем примере, если props.propOne изменено, и в последующих процедурах рендеринга.propTwo изменяется, значение props.propTwo внутри обратного вызова useEffect будет прежним, поскольку useEffect не выполняется при изменении props.propTwo.

Если, однако, вы обновляете props.propOne и props.propTwo вместе, тогда значение в useEffect хуке будет обновленным.

Учитывая ваш случай, когда props.propOne и props.propTwo изменяются вместе и запускают рендеринг, значение props.propTwo будетбыть D внутри useEffect обратный вызов

...