React — это интерфейсная библиотека, которая позволяет вам создавать повторно используемые и динамические фрагменты кода, которые уменьшают общую кодовую базу и повышают вашу эффективность и абстракцию. Эти динамические наборы кода называются компонентами, и они являются одной из основных причин, почему React стал таким производительным и почему его использование стало таким распространенным.
Поскольку компоненты так важны для React, давайте рассмотрим различные способы создания компонентов и рассмотрим некоторые варианты использования, когда каждое использование превосходно.
Написание компонентов: основы
Компоненты — это способ создания многократно используемых фрагментов кода. Например, форма, карточка, шапка. Ценность заключается в создании компонента один раз, а затем вызове его в нескольких местах вашего приложения. Чтобы это было эффективно, ваши компоненты должны быть динамичными и следовать некоторым соглашениям.
Давайте рассмотрим их сейчас.
Компоненты пишутся с большой буквы
Это соглашение справедливо для именования компонентов, их вызова и именования файлов компонентов.
// component files are capitalized
NewComponent.js
// components are capitalized when written
function SomeComponent(){
return <h4>Some heading</h4>
}
// components are capitalized when invoked
function ParentComponent(){
<ChildComponent />
}
Все компоненты должны возвращать один элемент
Например, если у вас есть компонент, который возвращает заголовок с тегом h4 и тегом p, они не могут быть возвращены отдельно, как показано ниже. Это не сработает.
// this component will return an error since we are attempting to return two elements, an <h4> and a <p> element.
Function SomeComponent() {
return <h4>Heading goes here</h4>
<p>Some text here</p>
}
Однако это сработает, если вы вернете их внутри div или какого-либо другого отдельного элемента, как показано ниже:
// this returns no errors because the component returns only one element, a <div>.
Function SomeComponent() {
return <div>
<h4>Heading goes here</h4>
<p>Some text here</p>
</div>
}
Реквизиты передают данные
Реквизит — это то, как данные передаются в React. Если вам нужно передать что-то от родителя к дочернему компоненту, вы можете передать это как свойство следующим образом.
// data is passed down to a child component as a prop. Here we are passing down the 'fullName' variable.
const fullName = firstName + ‘ ’ + lastName
<MyComponent name={fullName} />
Свойству присваивается имя, а затем ему присваивается значение. В этом случае мы называем его name и присваиваем ему значение ранее объявленной переменной fullName.
Чтобы получить доступ к реквизиту в дочерней функции, вам нужно передать реквизиты в качестве аргумента и вызвать их следующим образом:
// props are passed in as an argument to the Component, then are accessed in curly braces inside the component by the name that we gave the prop. We named this prop 'name' in the previous example, so that's how we'll access it here.
Function MyComponent(props) {
return <h1>My name is {props.name}</h1>
}
Следует помнить одну ключевую вещь: реквизит не меняется. Если данные, которые вы передаете, должны измениться, то это не должно быть реквизитом. Он должен храниться в состоянии.
Состояние обрабатывает данные, которые меняются со временем
Если у вас есть данные, которые со временем будут меняться, их следует хранить в состоянии. Состояние может быть передано в реквизите и может быть изменено. Есть несколько способов справиться с этим, которые не рассматриваются в этой статье, но вы можете узнать больше здесь.
https://reactjs.org/docs/state-and-lifecycle.html
Компоненты должны быть импортированы и экспортированы
Когда вы объявляете компонент, вы должны экспортировать его, чтобы его можно было использовать в другом месте вашего приложения. Вы можете сделать это в нижней части файла компонента следующим образом:
// export your component at the bottom of your component file, below the component declaration export default ComponentName
Чтобы затем использовать этот компонент в другом месте вашего приложения, его необходимо импортировать в верхнюю часть файла, в котором вы будете его использовать.
// At the top of a parent component, import any components you will use in this file. Keep with the capitalized naming convention. import Child from ‘./containers/Child’
Теперь, когда у нас есть основы, как нам писать компоненты? Ну, есть два пути. Либо как функциональный компонент, либо как компонент класса. Давайте рассмотрим оба.
Функциональные компоненты
Функциональные компоненты написаны так же, как вы объявляете функцию в Javascript. Их можно записать в виде стандартной функции:
function MyFirstComponent() {
return <div>
This is my first component!
</div>
}
export default MyFirstComponent
Или как стрелочная функция:
const SecondComponent = () => {
return <h2>
This is my second component!
</h2>
}
export default SecondComponent
Это быстрый и лаконичный способ написания компонентов в React. Помимо уменьшения раздувания кода, они также предлагают небольшое преимущество в производительности по сравнению с классовыми компонентами, поскольку они не импортируют больше данных (например, встроенных вспомогательных функций), чем им на самом деле нужно.
До недавнего времени функциональным компонентам не хватало некоторых очень мощных функций React, таких как методы состояния и жизненного цикла. Из-за этого они были ограничены в том, как их можно было использовать. Однако для тех, кто использует React 16.8 или более позднюю версию, это не проблема, поскольку функциональные компоненты теперь могут использовать состояние и другие методы жизненного цикла.
Для этого функциональные компоненты используют хуки для доступа к состоянию и событиям жизненного цикла, о которых вы можете узнать больше здесь.
Компоненты класса
Компоненты класса должны показаться вам очень знакомыми, если вы когда-либо писали класс на Javascript. Они наследуются от класса React.Component и объявляются следующим образом:
// notice how you need to import React from your react dependency to write this class component. You also need to render() and return a your component.
import React from 'react'
class NewComponent extends React.Component {
render(){
return <div>
I'm a class component!
</div>
}
}
export default NewComponent
Исторически сложилось так, что одним из основных преимуществ использования компонентов класса был их доступ к методам состояния и жизненного цикла, поскольку они по своей сути имеют доступ к обоим.
Методы жизненного цикла предлагают возможность вызывать функции на разных этапах жизненного цикла приложения, например, при монтировании или обновлении компонента.
Подробную информацию о методах жизненного цикла можно найти здесь
Как упоминалось ранее, функциональные компоненты в современных приложениях React теперь имеют доступ к методам и состоянию жизненного цикла, поэтому компоненты класса не имеют неотъемлемого преимущества по сравнению с функциональными компонентами.
На практике вы столкнетесь с обоими методами написания компонентов, и вам придется познакомиться с написанием и работой с обоими методами в течение вашей карьеры в React.
Вы предпочитаете функциональные или классовые компоненты при написании приложений React? Если это так, дайте мне знать ниже.