Выбор между компонентами класса и функциональными компонентами в React

Переиздано Платоном

Читают: 0

Выбор между компонентами класса и функциональными компонентами в React PlatoBlockchain Data Intelligence. Вертикальный поиск. Ай.

Основные отличия

В React компонент — это фрагмент кода, представляющий часть пользовательского интерфейса. В React есть два основных типа компонентов: компоненты класса и функциональные компоненты.

Компоненты класса определяются с помощью класса, который расширяет класс React.Component. Они более многофункциональны и имеют больше возможностей для обработки состояний и событий жизненного цикла. Вот как выглядит компонент класса:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

Функциональные компоненты — это просто функции JavaScript, которые возвращают элемент React. Они проще, чем компоненты класса, и их легче читать и писать. Вот тот же компонент, что и выше, но написанный как функциональный компонент:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Когда использовать что

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

читабельность: Компоненты класса могут упростить понимание кода, особенно если у вас много методов состояния или жизненного цикла. Код организован в виде методов, которые четко определены и их легко найти.
Повторное использование: Компоненты класса легче использовать повторно, поскольку их можно расширять для создания новых компонентов. Это может быть особенно полезно, если у вас есть много общих функций между компонентами.
организация: Компоненты класса могут упростить организацию кода, поскольку вы можете группировать связанные методы вместе в одном компоненте. Это может упростить поиск и поддержку кода.

Есть также несколько причин, по которым вы, возможно, захотите написать функциональные компоненты:

Когда вам не нужно использовать методы состояния или жизненного цикла: Если вам не нужно использовать методы состояния или жизненного цикла, то хорошим выбором будет функциональный компонент, поскольку его проще и легче читать и писать, чем компонент класса.
Когда вам нужен чистый компонент: функциональные компоненты — это «чистые» компоненты, что означает, что они зависят только от своих реквизитов и не имеют собственного состояния. Это может быть полезно, если вы хотите, чтобы компонент повторно отображался только при изменении его свойств.
Если вы хотите оптимизировать производительность: поскольку функциональные компоненты являются чистыми, их легче оптимизировать с помощью React, что может привести к повышению производительности.
Если вы хотите написать краткий, легко читаемый код: поскольку функциональные компоненты проще и имеют меньше движущихся частей, их легче читать и понимать, особенно если в вашем приложении много компонентов.

в общем, вы должны использовать функциональные компоненты, если у вас нет особой потребности, которая может быть удовлетворена только с помощью компонента класса.

useEffect и useState

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

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

Вот как бы вы реализовали использованиеЭффект и использование состояния внутри ваших функциональных компонентов

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Здесь у нас есть компонент, который отслеживает количество и отображает текущее количество для пользователя. Компонент использует использование состояния хук, чтобы добавить состояние к функциональному компоненту, и использованиеЭффект ловушка для выполнения действия (обновление заголовка документа) при изменении счетчика.

Основные выводы

Вот основные выводы, когда дело доходит до выбора между компонентами класса и функциональными компонентами в React:

Компоненты класса определяются с помощью класса, который расширяет класс React.Component и имеет больше возможностей для обработки состояний и событий жизненного цикла.
Функциональные компоненты — это просто функции JavaScript, которые возвращают элемент React, и их проще и легче читать и писать.
Вы должны использовать функциональные компоненты, если вам не нужно использовать функцию, доступную только в компонентах класса, например методы состояния или жизненного цикла.
Вы можете использовать хуки useState и useEffect для добавления состояния и выполнения побочных эффектов в функциональных компонентах.
В целом, выбор между компонентами класса и функциональными компонентами сводится к тому, что лучше всего подходит для ваших нужд и что делает ваш код наиболее простым для чтения и понимания.

Я надеюсь, что это краткое объяснение поможет вам. Если вы хотите получить наставничество или какое-либо руководство на вашем пути к изучению javascript, реакции или веб-разработки в целом, пожалуйста, не стесняйтесь обращаться ко мне для сеанса 1: 1.