Введение в одну из самых важных концепций в React - функциональное программирование

От функционального программирования к React: как строить приложения React, используя программирование на функциональном языке.

✨ Оглавление

- 前言
- ✨ 什麼是 functional programming
- ✨ functional programming 的應用
- ✨ React 與 functional programming?
- ✨ functional programming 如何應用到 React 中✨
- ✨ 補充 - 適用場景
- 結論

✨ Предисловие

React разработан с использованием концепции функционального программирования, поэтому понимание функционального программирования важно для изучения фреймворка React.

В этой статье будут представлены основные концепции ФП и то, как они могут быть применены к React для создания многократно используемых, композитных и легко тестируемых приложений React. (Основное внимание в этом введении будет уделено примерам кода с использованием React)

✨ Что такое функциональное программирование 🥸

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

✨ Применение функционального программирования

Чистые функции

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

// 純函數
function add(a, b) {
  return a + b;
}

const result = add(1, 2); // 3

Инвариантность

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

// 不可變性
const arr1 = [1, 2, 3];
const arr2 = arr1.concat(4);

console.info(arr1); // [1, 2, 3]
console.info(arr2); // [1, 2, 3, 4]

Статус функции как гражданина первого класса

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

// 函數的一等公民地位
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

const calc = (fn, a, b) => fn(a, b);

const result1 = calc(add, 1, 2); // 3
const result2 = calc(multiply, 3, 4); // 12

Функции высшего порядка

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

// 高階函數
const double = x => x * 2;
const triple = x => x * 3;

const compose = (fn1, fn2) => x => fn1(fn2(x));

const result = compose(double, triple)(2); // 12

✨ React и функциональное программирование?

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

Как ✨ функциональное программирование применяется к React ✨

Чисто функциональные компоненты

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

(Смысл: вывод компонента зависит только от входных свойств и не изменяет никакого внешнего состояния.) 2.

import React from 'react';

function MyComponent(props) {
  const { name } = props;
  return <h1>Hello, {name}!</h1>;
}

2. Использование неизменяемости для управления состоянием

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

// 使用不可變性來管理狀態
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // 錯誤示例，會導致不可預期的行為
    setCount(prevCount => prevCount + 1); // 正確示例，使用不可變性
  };

  return <button onClick = {handleClick}>{count}</button>;
}

ReactDOM.render(<Counter />, document.getElementById('root'));

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

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

// 使用高階函數實現可重用性
function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.info(`[INFO] Rendering ${WrappedComponent.name} with props:`, props);
    return <WrappedComponent {...props} />;
  };
}

function Greeting(props) {
  return <div>Hello, {props.name}!</div>;
}

const GreetingWithLogger = withLogger(Greeting);

ReactDOM.render(<GreetingWithLogger name="John" />, document.getElementById('root'));

4. Инструменты программирования на функциональных языках

В React также доступно множество инструментов функционального программирования для работы с данными, таких как lodash, Ramda и т.д. (Вот пример использования функции map в lodash для манипулирования данными)

import React from 'react';
import { map } from 'lodash';

function MyComponent(props) {
  const { items } = props;

  const mappedItems = map(items, (item) => (
    <li key = {item.id}>{item.name}</li>
  ));

  return <ul>{mappedItems}</ul>;
}

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

✨ Дополнения - Применимые сценарии

Различные стили React подходят для разных сценариев, некоторые общие из них перечислены ниже:

Функциональное программирование подходит для: простых компонентов пользовательского интерфейса, страниц пользовательского интерфейса с простым состоянием, разработчиков, знакомых со стилем функционального программирования.

Функциональное программирование идеально подходит для разработки компонентов пользовательского интерфейса, поскольку компоненты пользовательского интерфейса обычно отвечают только за получение реквизитов и отображение пользовательского интерфейса, и им не нужно управлять сложным состоянием и жизненными циклами. Кроме того, стиль FP чист, прост и легок для понимания и поддержки, что делает естественным использование FP для разработки приложений React разработчиками, знакомыми с функциональным программированием. 2.

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

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

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

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

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

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

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

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

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