React и TypeScript: Практическое руководство. Быстрый старт. Ирина Кириченко
Чтение книги онлайн.

Читать онлайн книгу React и TypeScript: Практическое руководство. Быстрый старт - Ирина Кириченко страница 12

СКАЧАТЬ     <p> Основное содержание </p>

          </div>

      )

      }

      export default App

      В этом примере Header и Sidebar являются дочерними компонентами, вложенными в компонент App. Это позволяет легко организовывать структуру интерфейса и создавать компоненты, которые можно переиспользовать.

      5.4 Компонент высшего порядка

      Компонент высшего порядка (Higher Order Component, HOC) в React – это функция, которая принимает компонент и возвращает новый компонент с дополнительной функциональностью.

      Допустим, у вас есть компонент, но вам нужно добавить ему какие-то общие функции или свойства, которые могли бы понадобиться в разных частях приложения. Вместо того чтобы копировать и вставлять один и тот же код в разные места, вы можете использовать HOC. Эта функция «обернет» компонент, добавив к нему нужные функции или свойства.

      Другими словами, HOC позволяет повторно использовать код и легко расширять функциональность компонентов.

      Например, если у вас есть компонент для отображения информации о пользователе, а вы хотите добавить к нему функцию загрузки данных из сети, HOC может помочь сделать это без необходимости изменения самого компонента.

      Пример: у вас есть компонент UserComponent, который отображает имя пользователя:

      import React from ’react’

      const UserComponent = (props) => {

         return <div> Привет, {props.name}! </div>;

      }

      export default UserComponent

      Теперь вы хотите добавить к этому компоненту возможность загрузки данных о пользователе из сети. Для этого мы можем использовать HOC:

      import React, {Component} from ’react’;

      const withDataFetching = (WrappedComponent) => {

         return class extends Component {

            constructor (props) {

               super (props);

      this.state = {

                  data: null,

                  loading: true,

      }

      }

            async componentDidMount () {

               try {

                  const response = await fetch(this.props. url)

                  const data = await response. json ()

      this.setState ({data, loading: false})

      } catch (error) {

      console.error («Ошибка:», error)

      this.setState ({loading: false})

      }

      }

            render () {

               return (

                  <WrappedComponent

      {…this.props}

      data={this.state. data}

      loading={this.state. loading}

                  />

      )

      }

      }

      }

      export default withDataFetching

      Здесь мы должны создать HOC withDataFetching, который загружает данные из указанного URL и передает их в обернутый компонент. После этого мы можем использовать его с нашим UserComponent:

      import React from ’react’

      import withDataFetching from». /withDataFetching’

      const UserComponent = (props) => {

         return (

            <div>

               {props. loading? (

                  «Загрузка…»

      ): (

                  <div>

                     Привет, {props.data.name}!

                     <p> Email: {props. data. email} </p>

                  </div>

      )}

            </div>

      );

      }

      export default withDataFetching (UserComponent)

      Теперь UserComponent получает данные из сети благодаря HOC withDataFetching

      5.5 Заключение

      В этой главе мы изучили, как создавать компоненты в React и использовать их в приложениях. СКАЧАТЬ