Как разработчики программного обеспечения, мы всегда ищем библиотеки и инструменты, повышающие производительность. С тех пор, как NodeJS раскрыл обратную сторону javascript. Фреймворки, библиотеки и модули были выпущены в последние годы. ReactJS — один из них. Давайте быстро рассмотрим, что такое ReactJS и его ключевые концепции.
Введение
ReactJS — это библиотека JavaScript, созданная группой инженеров Facebook и Instagram для создания пользовательских интерфейсов для веб-приложений и мобильных приложений. Читать документы
ReactJS часто упоминается в одном ряду с другими фреймворками Javascript, но «React vs Angular» не имеет смысла, потому что это не сопоставимые вещи напрямую. Angular — это полноценный фреймворк (включая слой представления), а React — нет. Вот почему React так сбивает с толку, он возникает в экосистеме полных фреймворков, но это всего лишь представление.
ReactJS предоставляет вам язык шаблонов и некоторые функции для рендеринга HTML. См. React as HTML внутри Javascript, который привел к JSX (Javascript XML), мы обсудим это позже.
ReactJS позволяет нам создавать многократно используемые компоненты пользовательского интерфейса, а также его очень легко тестировать. В настоящее время это одна из самых популярных библиотек JavaScript, которая часто лидирует в области производительности и внедрения новых шаблонов проектирования.
Давайте обсудим эту концепцию
- Компоненты.
- JSX.
- Реквизиты и состояние.
#1: Компоненты
Первое, что вам нужно знать о React, это то, что все дело в компонентах. Ваша кодовая база React — это просто одна большая куча больших компонентов, которая содержит более мелкие компоненты.
Но что такое компонент, спросите вы?
Компонент React — это отдельный объект, который не только выводит HTML, как это делает традиционный шаблон, но также включает весь код, необходимый для управления этим выводом.
Давайте напишем простой компонент реакции, используя ES6. Мы пишем класс, состоящий из метода рендеринга, который возвращает HTML.
class MyComponent extends React.Component { constructor() { // define application state } doSomething() { //write a function to perform an action } render() { return <p>Hello World!<p>; } }
# 2: Что такое JSX
Как видите, компонентный подход означает, что и код HTML, и код JavaScript находятся в одном и том же файле. Секретным оружием React для достижения этого нечестивого союза является язык JSX (где X означает XML).
Поначалу JSX может показаться неудобным, но к нему довольно быстро привыкаешь.
Да, я знаю. Нас всех учили четко разделять HTML и JavaScript. Но оказывается, что небольшое ослабление этих правил может на самом деле творить чудеса с производительностью вашего интерфейса.
Например, поскольку теперь в вашем распоряжении все возможности JavaScript, вот как вы можете отобразить текущее время, вставив фрагмент JavaScript в свой HTML-код, используя {...}
.
class MyComponent extends React.Component { constructor() { // define application state } doSomething() { //write a function to perform an action } render() { return <p>Time is {new Date().toTimeString().split(" ")[0];}<p>; } }
# 3: Как работают свойства и состояние
если вы когда-либо писали строку HTML, вы, вероятно, знакомы с атрибутами HTML, такими как тег <a>
href
. В React атрибуты называются props (сокращение от «свойства»). Реквизиты — это то, как компоненты общаются друг с другом.
class ParentComponent extends React.Component { constructor() { this.state = { userinput = '' } render() { return <ChildComponent message="Hello World"/>; } } class ChildComponent extends React.Component { render() { return <p>And then I said, “{this.props.message}”</p>; } }
Из-за этого поток данных React является однонаправленным: данные могут передаваться только от родительских компонентов к их дочерним, а не наоборот.
Однако иногда компоненту необходимо реагировать на данные, которые не поступают от родительского компонента (например, пользовательский ввод). И здесь на помощь приходит состояние.
Состояние не является неотъемлемым свойством компонента. Это просто временное хранилище для компонента.
В HTML элементы формы, такие как <input>
, <textarea>
и <select>
, обычно сохраняют свое собственное состояние и обновляют его на основе ввода пользователя. В React изменяемое состояние обычно хранится в свойстве состояния компонентов и обновляется только с помощью setState(),
На них ссылаются Контролируемые компоненты.
Давайте быстро пройдемся по приведенному ниже коду.
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange{this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } }
Метод рендеринга состоит из элемента формы, который имеет поле ввода, а также кнопку отправки ниже. Поле ввода имеет функцию onChange, которая принимает handleChange
, этот метод принимает event
в качестве параметра, который является обработчиком событий DOM, и получает результат от event.target.result
, setState()
— это один из методов API компонента, который используется для обновления значения состояния, при этом, когда пользователь вводит в поле ввода, значение будет обновлено в состоянии. Затем у нас есть еще один метод handleSubmit
, он подключается к функции onSubmit формы, т.е. вызывается при отправке формы. Вы можете запустить этот код на JSFiddle или CodePen.
Резюме
Итак, давайте подытожим то, что мы только что узнали:
Кодовая база React состоит из компонентов.
Эти компоненты написаны с использованием JSX.
Данные передаются от родителя к дочерним, за исключением случаев, когда речь идет о state
, который возникает внутри компонента.
Разница между реквизитом и состоянием
Управляемые компоненты
Вывод
Чтобы двигаться дальше, существует множество ресурсов, которые помогут вам развить свои навыки в качестве разработчика ReactJS, вот несколько из них, которые я предлагаю.
React для начинающих по курсу WesBos
Создание приложений с помощью React и Redux в ES6 от Cory House