Прав ли я насчет этого кода HOC (компонента высшего порядка)? - PullRequest
Новая
       21

Прав ли я насчет этого кода HOC (компонента высшего порядка)?

0 голосов
/ 03 июня 2019

У меня два вопроса.

  1. Прежде всего, я собираюсь начать с объяснения этого алгоритма. После того, как на странице загрузки загружено , я реализую «загрузочный» визуал в магазине, и я принимаю это как пропустить через props.loading и все работает. Затем я перемещаю этот кусок логики в компонент высшего порядка (HOC). Это тоже работает.

    Но до того как я изменился, componentDidUpdate() работал при повторном рендеринге После того, как я переключился на HOC, componentDidUpdate() не работал, потому что он больше не рендерится и componentDidMount() работает. Потому что просто отображается (не обновляется. Просто отображается). Я прав?

  2. Я не понимаю эту часть const withLoad = WrappedComponent => props => { }; Почему я должен писать props здесь? Я не понимаю этот механизм. Дайте мне знать.

    Я думаю, что это функция нескольких стрелок Однако, если так, разве это не должно быть экспортировано как export default withLoading(hello)(props);? Но я использую export default withLoading(hello);. 

const withLoad = WrappedComponent => props =>
  props.load ? (
    <div>
      Loading...
    </div>
  ) : (
    <WrappedComponent {...props} />
  );

1 Ответ

0 голосов
/ 06 июня 2019

  1. componentDidUpdate вашего исходного компонента должен работать независимо от того, находится ли он в HOC или нет, проверьте, действительно ли изменяются реквизиты для запуска обновления. Если вы проверяете, вызывается ли componentDidUpdate HOC, то убедитесь, что HOC обновляется.

  2. Запись HOC в формате ES5 может помочь вам понять значение параметра props во внутренней функции, ваш withLoad HOC может быть записан как 

      function withLoad(WrappedComponent){
        console.log(WrappedComponent.displayName || WrappedComponent.name ); // App 
        return function(props){ // props of your HOC are consumed here
        if(props.load)
         return (<div>Loading...</div>)
        else
         return (<WrappedComponent {...props} />);
        }

, поэтому, когда вы используете HOC в качестве const LoadingApp = withLoad(App) и позже используете это как <LoadingApp load={true} />, вы можете видеть, что реквизиты LoadingApp используются во внутренней функции.

Посмотрите на React docs для HOC , это поможет разобраться.

...