Чистые функции. Функциональное программирование
2 года назад·3 мин. на чтение
В этой статье на простых и доступных примерах рассмотрим одну из концепций функционального программирования - Чистые функции.
Это серия статей о функциональном программировании:
- Парадигмы программирования
- Композиция
- Функторы
- Каррирование
- Чистые функции (рассматривается в этой статье)
- Функции первого класса
Что такое чистая функция?
Чистая функция — это функция, которая является детерминированной и не производит побочных эффектов.Характеристики чистой функции
️1. Чистые функции должны быть детерминированными
Детерминированная функция — это функция, которая при одном и том же входеx
всегда должна иметь один и тот же результат y
.
Примеры недетерминированных функций
Math.random
const getRandom = () => Math.random()
- Функции
Date
const getDate = () => Date.now()
getUsers
Функцияconst getUsers = await fetch('/users')
getUsers
недетерминирована, потому что пользователи могли обновиться, нет подключения к интернету, сервер может быть недоступен или что-то еще.
Комментарии к примерам
Эти примеры считаются недетерминированными, потому что для одних и тех же входных данных выходные данные будут отличаться. Детерминизм означает, что функция никогда не изменит результат при одних и тех же входных данных.️2. Чистые функции не должна иметь побочных эффектов
Побочным эффектом может быть:- Внешняя зависимость (доступ к внешним переменным, потокам ввода/вывода, чтение/запись файлов или выполнение HTTP-вызовов).
- Мутация (мутации локальных/внешних переменных или переданных аргументов по ссылке).
Примеры побочных эффектов
- Функция
isLessThanMin
Чистая функцияconst min = 60 const isLessThanMin = value => value < min
Побочный эффект заключается во внешней зависимости. Для исправления используется внедрение зависимости (dependency injection).const isLessThanMin = (min, value) => value > min
- Функция для вычисления квадратов чисел
Чистая функцияconst squares = (nums) => { for(let i = 0; i < nums.length; i++) { nums[i] **= 2; } }
Побочный эффект заключается в наличии императивного кода, который выполняет мутации в исходном массиве по ссылке. Для исправления используется функциональныйconst squares = (nums) => nums.map(num => num * num)
.map
, который создает новый массив.
- Функция
updateUserAge
Чистая функцияconst updateUserAge = (user, age) => { user.age = age }
Побочный эффект заключается в мутации объектаconst updateUserAge = (user, age) => ({ ...user, age })
user
по ссылке. Нужно избегать изменения объектов по ссылке, вместо этого следует вернуть новый объект с новыми/обновленными свойствами.
- Функция
getFirst2Elements
Чистая функцияconst getFirst2Elements = (arr) => arr.splice(0, 2)
Побочный эффект заключается в мутированииconst getFirst2Elements = (arr) => arr.slice(0, 2)
arr
, переданного по ссылке методом .splice
. Для исправления используется функциональный метод .slice
, который не изменяет сам массив.
Почему функции с побочными эффектами - плохо?
У функций с побочными эффектами есть несколько очевидных недостатков:- Это делает функции тесно связанными с окружающей средой
- Увеличивает когнитивную нагрузку на разработчика
- Вызывает неочевидные изменения состояния
- Увеличивает кривую обучения кодовой базы разработчика
- Невозможность параллелизации
- Высокая непредсказуемость
- + потеря преимуществ чистых функций
Почему чистые функции - хорошо?
Можно вывести две основные категории улучшений. Улучшение опыта разработки (developer experience) и улучшение производительности приложений.Улучшение опыта разработки
Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.- Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
- Поддерживаемость: улучшается понимание кода.
- Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
- Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.
Улучшение производительности
- Способность к кэшированию (мемоизация): детерминизм функций даст нам возможность предсказывать, каким будет вывод для определенного ввода, затем мы можем кэшировать функции на основе вводов.
- Возможность распараллеливания: поскольку функции теперь свободны от побочных эффектов и независимы, их можно легко распараллелить.
20 советов для улучшения качества кода в React проекте
год назад·5 мин. на чтение
React очень гибок и не строг к структуре компонентов. Именно поэтому мы несем ответственность за поддержание чистоты и поддерживаемости наших проектов.
В этой статье рассмотрим некоторые рекомендации по улучшению качества приложения на React. Эти правила широко приняты. Таким образом, обладание этими знаниями является обязательным.
20. Проп
Всегда включайте проп
1. Используйте короткую запись JSX
Попробуйте использовать сокращение JSX для передачи логических переменных. Допустим, вы хотите управлять видимостью заголовка компонента панели навигации.Плохо
return ( <Navbar showTitle={true} /> );
Хорошо
return( <Navbar showTitle /> )
2. Используйте тернарные операторы
Допустим, вы хотите отобразить сведения о пользователе в зависимости от роли.Плохо
const { role } = user; if(role === ADMIN) { return <AdminUser /> }else{ return <NormalUser /> }
Хорошо
const { role } = user; return role === ADMIN ? <AdminUser /> : <NormalUser />
3. Воспользуйтесь преимуществами объектных литералов
Объектные литералы могут помочь сделать наш код более читабельным. Допустим, вы хотите отобразить три типа пользователей в зависимости от их ролей. Вы не можете использовать тернарный оператор, так как количество опций превышает два.Плохо
const {role} = user switch(role){ case ADMIN: return <AdminUser /> case EMPLOYEE: return <EmployeeUser /> case USER: return <NormalUser /> }
Хорошо
Теперь код выглядит намного лучше.const {role} = user const components = { ADMIN: AdminUser, EMPLOYEE: EmployeeUser, USER: NormalUser }; const Component = components[role]; return <Componenent />;
4. Используйте фрагменты
Всегда используйтеFragment
вместо лишней обертки div
. Это сохраняет код чистым, а также полезно для производительности, поскольку в виртуальной модели DOM создается на один узел меньше.
Плохо
return ( <div> <Component1 /> <Component2 /> <Component3 /> </div> )
Хорошо
return ( <> <Component1 /> <Component2 /> <Component3 /> </> )
5. Не определяйте функцию внутри рендеринга
Не определяйте функцию внутри функции рендеринга. Постарайтесь свести логику рендеринга к абсолютному минимуму.Плохо
return ( <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // здесь определена функция This is a bad example </button> )
Хорошо
const submitData = () => dispatch(ACTION_TO_SEND_DATA) return ( <button onClick={submitData}> This is a good example </button> )
6. Используйте React memo
React.PureComponent
и Memo
могут значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.
Плохо
Хотя дочерний компонент должен отображаться только один раз, так как значениеimport React, { useState } from "react"; export const TestMemo = () => { const [userName, setUserName] = useState("faisal"); const [count, setCount] = useState(0); const increment = () => setCount((count) => count + 1); return ( <> <ChildrenComponent userName={userName} /> <button onClick={increment}> Increment </button> </> ); }; const ChildrenComponent =({ userName }) => { console.log("rendered", userName); return <div> {userName} </div>; };
count
не имеет ничего общего с ChildComponent
. Но он отображается рендерится каждый раз, когда вы нажимаете на кнопку.
Хорошо
Давайте отредактируемChildrenComponent
следующим образом:
Теперь, независимо от того, сколько раз вы нажмете на кнопку, она будет отображаться только тогда, когда это необходимо.import React, {useState} from "react"; const ChildrenComponent = React.memo(({userName}) => { console.log('rendered') return <div> {userName}</div> })
7. Поместите CSS в JavaScript
Избегайте сырого JavaScript при написании приложений React, потому что организовать CSS намного сложнее, чем организовать JS.Плохо
// CSS FILE .body { height: 10px; } //JSX return <div className='body'> </div>
Хорошо
const bodyStyle = { height: "10px" } return <div style={bodyStyle}> </div>
8. Используйте деструктурирование объектов
Используйте деструктурирование объектов в своих интересах. Допустим, вам нужно показать данные пользователя.Плохо
return ( <> <div> {user.name} </div> <div> {user.age} </div> <div> {user.profession} </div> </> )
Хорошо
const { name, age, profession } = user; return ( <> <div> {name} </div> <div> {age} </div> <div> {profession} </div> </> )
9. Строковые пропсы можно передавать без фигурных скобок
При передаче строковых пропсов дочернему компоненту.Плохо
return( <Navbar title={"My Special App"} /> )
Хорошо
return( <Navbar title="My Special App" /> )
10. Удалить JS-код из JSX
Вынесите JS-код из JSX, если это не служит какой-либо цели рендеринга или функциональности пользовательского интерфейса.Плохо
return ( <ul> {posts.map((post) => ( <li onClick={event => { console.log(event.target, 'clicked!'); // <- плохо }} key={post.id}>{post.title} </li> ))} </ul> );
Хорошо
const onClickHandler = (event) => { console.log(event.target, 'clicked!'); } return ( <ul> {posts.map((post) => ( <li onClick={onClickHandler} key={post.id}>{post.title}</li> ))} </ul> );
11. Используйте шаблонные литералы
Используйте шаблонные литералы для создания длинных строк. Избегайте использования конкатенации строк. Это будет выглядеть красиво и чисто.Плохо
const userDetails = user.name + "'s profession is" + user.proffession return ( <div> {userDetails} </div> )
Хорошо
const userDetails = `${user.name}'s profession is ${user.proffession}` return ( <div> {userDetails} </div> )
12. Порядок импортов
Всегда старайтесь импортировать сущности в определенном порядке. Это улучшает читаемость кода.Плохо
import React from 'react'; import ErrorImg from '../../assets/images/error.png'; import styled from 'styled-components/native'; import colors from '../../styles/colors'; import { PropTypes } from 'prop-types';
Хорошо
Эмпирическое правило состоит в том, чтобы сохранить порядок импорта следующим образом:- Встроенные зависимости
- Внешние зависимости
- Внутренние зависимости
import React from 'react'; import { PropTypes } from 'prop-types'; import styled from 'styled-components/native'; import ErrorImg from '../../assets/images/error.png'; import colors from '../../styles/colors';
13. Используйте неявный возврат
Используйте функцию JavaScript с неявным возвратом результата при написании красивого кода. Допустим, ваша функция выполняет простое вычисление и возвращает результат.Плохо
const add = (a, b) => { return a + b; }
Хорошо
const add = (a, b) => a + b;
14. Именование компонентов
Всегда используйте PascalCase для компонентов и camelCase для экземпляров.Плохо
import reservationCard from './ReservationCard'; const ReservationItem = <ReservationCard />;
Хорошо
import ReservationCard from './ReservationCard'; const reservationItem = <ReservationCard />;
15. Кавычки
Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.Плохо
<Foo bar='bar' /> <Foo style={{ left: "20px" }} />
Хорошо
<Foo bar="bar" /> <Foo style={{ left: '20px' }} />
16. Именование пропсов
Всегда используйте camelCase для имен объектов или PascalCase, если значение объекта является компонентом React.Плохо
<Component UserName="hello" phone_number={12345678} />
Хорошо
<MyComponent userName="hello" phoneNumber={12345678} Component={SomeComponent} />
17. JSX в круглых скобках
Если компонент занимает более одной строки, всегда заключайте его в круглые скобки.Плохо
return <MyComponent variant="long"> <MyChild /> </MyComponent>;
Хорошо
return ( <MyComponent variant="long"> <MyChild /> </MyComponent> );
18. Самозакрывающиеся теги
Если компонент не имеет дочерних элементов, используйте самозакрывающиеся теги. Это улучшает читаемость.Плохо
<SomeComponent variant="stuff"></SomeComponent>
Хорошо
<SomeComponent variant="stuff" />
19. Нижнее подчеркивание в названии метода
Не используйте символы подчеркивания ни в одном внутреннем методе React.Плохо
const _onClickHandler = () => { // код }
Хорошо
const onClickHandler = () => { // код }
20. Проп alt
Всегда включайте проп alt
в теги <img >
. И не используйте picture
или image
в проп alt
, потому что программы чтения с экрана уже объявляют элементы img
изображениями.
Плохо
<img src="hello.jpg" /> <img src="hello.jpg" alt="Picture of me rowing a boat" />
Хорошо
<img src="hello.jpg" alt="Me waving hello" />