Мэтт Вайсфельд: Объектно-ориентированный подход

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

​Что такое useState()?

useState() - это хук, позволяющий функциональным компонентам иметь состояние. Раньше это было возможно только в классовых компонентах.

import React, { useState } from 'react'

const App = () => {
const [count, setCount] = React.useState(0)

const handleIncrease = () => {
setCount(count + 1)
}

const handleDecrease = () => {
setCount(count - 1)
}

return (
<div>
Значение счетчика: {count}
<hr />
<div>
<button type="button" onClick={handleIncrease}>
Увеличить
</button>
<button type="button" onClick={handleDecrease}>
Уменьшить
</button>
</div>
</div>
)
}
useState() принимает единственный аргумент - значение начального состояния. В примере таким значением является 0. Хук возвращает массив из двух элементов: count и setCount. Вы можете думать об этих элементах как о паре геттер/сеттер.
Геттер позволяет получать текущее значение состояния, а сеттер - устанавливать новое значение, т.е. обновлять состояние. На самом деле, эти элементы можно называть как угодно (поскольку мы имеем дело с деструктуризацией массива). Такой способ именования является распространенным соглашением и отражает суть возвращаемых useState() значений.

​Что такое useReducer()?

useReducer() - это хук, принимающий функцию-редуктор и начальное состояние приложение в качестве аргументов и возвращающий текущее состояние и диспетчер (dispatcher) для отправки (dispatch) операций.

Несмотря на то, что useState() - это базовый хук, а useReducer() - продвинутый, на самом деле useState() реализован с помощью useReducer(). Это означает, что useReducer() - это примитив, который может использоваться во всех случаях использования useState(). Редуктор - мощный инструмент, который может использоваться в самых разных сценариях:

Пример

 import React, { useReducer } from 'react'

 const initialState = 0
 const reducer = (state, action) => {
   switch (action) {
     case 'increment': return state + 1
     case 'decrement': return state - 1
     case 'reset': return 0
     default: return state
   }
 }

 const ReducerExample = () => {
   const [count, dispatch] = useReducer(reducer, initialState)

   return (
     <div>
       {count}
       <button onClick={() => dispatch('increment')}>+1</button>
       <button onClick={() => dispatch('decrement')}>-1</button>
       <button onClick={() => dispatch('reset')}>reset</button>
     </div>
   )
 }

 export default ReducerExample

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

Наибольшее и наименьшее

Вам дана строка, состоящая из цифр. Ваша задача - написать функцию, которая вернет наибольшее и наименьшее числа.

Примеры:
highAndLow("1 2 3 4 5");
// return "5 1"

highAndLow("1 2 -3 4 5");
// return "5 -3"

highAndLow("1 9 3 4 -5");
// return "9 -5"

Что такое useContext()?

React Context API позволяет легко получать данные на разных уровнях дерева компонентов без передачи данных через props.

import React from "react"
import ReactDOM from "react-dom"

// создаем контекст
const NumberContext = React.createContext()
// он возвращает объект с двумя значениями
// { Provider, Consumer }

function App() {
// используем провайдер для предоставления потомкам
// доступа к данным, содержащимся в контексте
return (
<NumberContext.Provider value={10}>
<div>
<Display />
</div>
</NumberContext.Provider>
)
}

function Display() {
const value = useContext(NumberContext)
return <div>Ответ: {value}.</div>
}

Посмотрите, как пишут код уровня Senior Frontend в Google или Uber

На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана.

Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront.

— примеры лучших решений во Frontend-разработке

— тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов

— статьи по JS, HTML, CSS за 2020

В каком проекте примените навыки, полученные после подписки на @seniorFront?

​Что вы понимаете под ссылками (refs)?

Refs предоставляют доступ к узлам DOM или элементам React, созданным с помощью метода render(). Рефы являются ссылками на DOM-элементы или классовые компоненты из родительского компонента.

Refs также предоставляют возможность связывания элементов дочернего компонента с родительским в форме передачи (перенаправления) ссылок (ref forwarding).

Пример

 class App extends React.Component {
     constructor(props) {
       super(props)
       // создаем ссылку на DOM-элемент
       this.textInput = React.createRef()
       this.state = {
         value: ''
       }
     }

   // обновляем состояние с помощью ссылки
   handleSubmit = e => {
     e.preventDefault()
     this.setState({ value: this.textInput.current.value})
   }

   render() {
     return (
       <div>
         <h1>React Ref - createRef</h1>
          {/* данное значение будет обновлено */}
         <h3>Значение: {this.state.value}</h3>
         <form onSubmit={this.handleSubmit}>
           {/* добавляем ссылку к <input> для обновления <h3> его значением */}
           <input type="text" ref={this.textInput} />
           <button>Отправить</button>
         </form>
       </div>
     )
   }
 }

Случаи использования ссылок
1. Установка фокуса, выделение текста или воспроизведение медиа
2. Запуск императивной анимации
3. Интеграция со сторонними библиотеками для работы с DOM

Что произойдет при вызове setState() в конструкторе?

При использовании setState() происходит присвоение значения объекту состояния и повторный рендеринг компонента и всех его потомков. При инициализации экземпляра с помощью конструктора, компонент еще не отрисован. Поэтому у нас нет необходимости в его перерисовке.

В конструкторе объекту состояния присваивается начальное значение с помощью this.state = {}. Для обновления состояния используется this.setState().

Пример
import React, { Component } from 'react'

class Food extends Component {
constructor(props) {
super(props)

this.state = {
fruits: ['яблоко', 'апельсин'],
count: 0
}
}
render() {
return (
<div className = "container">
<h2> Привет!!!</h2>
<p> У меня есть {this.state.count} фруктов</p>
</div>
)
}
}

Паттерны объектно-ориентированного проектирования

В предлагаемой книге описываются простые и изящные решения типичных задач, возникающих в объектно-ориентированном проектировании.

Двойная сортировка

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

Примеры:
dbSort(["Banana", "Orange", "Apple", "Mango", 0, 2, 2])
//[0,2,2,"Apple","Banana","Mango","Orange"]);

dbSort(["C", "W", "W", "W", 1, 2, 0])
//[0,1,2,"C","W","W","W"]);