Создание динамических списков в React
месяц назад·1 мин. на чтение
В этой статье мы научимся создавать динамические списки элементов в React и обрабатывать их изменения.
Одна из самых важных возможностей React - это создание динамических списков, которые могут автоматически обновляться при изменении данных.
В этой статье мы рассмотрим, как создавать динамические списки в React с использованием функциональных компонентов. Функциональные компоненты - это новый подход к созданию компонентов в React, который позволяет писать более простой и понятный код.
Для начала нам понадобится создать новый функциональный компонент, который будет отображать список элементов. Давайте назовем его
Однако, чтобы наш список был действительно динамическим, нам нужно иметь возможность добавлять и удалять элементы. Давайте добавим эту функциональность в наш компонент.
ListComponent
:
В этом примере мы создали массивimport React from 'react'; const ListComponent = () => { const items = ['item 1', 'item 2', 'item 3']; return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); }; export default ListComponent;
items
, содержащий несколько элементов списка. Затем мы используем метод map
для преобразования каждого элемента в соответствующий элемент списка. Обратите внимание на использование атрибута key
- это важно для оптимизации производительности React.
Теперь мы можем использовать наш компонент ListComponent
в других компонентах:
Теперь, когда мы запустим наше приложение, мы увидим список элементов, которые мы определили в компонентеimport React from 'react'; import ListComponent from './ListComponent'; const App = () => { return ( <div> <h1>Мой динамический список</h1> <ListComponent /> </div> ); }; export default App;
ListComponent
.
В этом обновленном примере мы добавили два новых состояния:import React, { useState } from 'react'; const ListComponent = () => { const [items, setItems] = useState(['item 1', 'item 2', 'item 3']); const [newItem, setNewItem] = useState(''); const addItem = () => { setItems([...items, newItem]); setNewItem(''); }; const removeItem = (index) => { const updatedItems = items.filter((item, i) => i !== index); setItems(updatedItems); }; return ( <div> <ul> {items.map((item, index) => ( <li key={index}> {item} <button onClick={() => removeItem(index)}>Удалить</button> </li> ))} </ul> <input type="text" value={newItem} onChange={(e) => setNewItem(e.target.value)} /> <button onClick={addItem}>Добавить</button> </div> ); }; export default ListComponent;
newItem
и setNewItem
. newItem
- это значение нового элемента, который пользователь вводит в поле ввода, а setNewItem
- это функция для обновления значения newItem
.
Мы также добавили две новые функции: addItem
и removeItem
. Функция addItem
добавляет новый элемент в массив items
, используя синтаксис расширения массива [...items, newItem]
, а затем сбрасывает значение newItem
. Функция removeItem
использует метод filter
для удаления элемента из массива items
.
Теперь, когда мы запустим наше приложение, у нас будет возможность добавлять и удалять элементы из списка.
Это пример простого компонента списка в React с использованием функциональных компонентов. Вы можете дополнить его дополнительными функциями и стилями, чтобы сделать его более интерактивным и привлекательным для пользователей.
В заключение, создание динамических списков в React с помощью функциональных компонентов - это очень мощный инструмент для создания интерактивных пользовательских интерфейсов. Надеюсь, эта статья была полезной для вас, особенно если вы новичок в React. Удачи в изучении React!20 советов для улучшения качества кода в React проекте
2 года назад·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" />