Таблицы в react
Постановка задачи
Представьте: у вас есть таблица с данными, которые можно редактировать. Как мы это оформим?
В начале создадим наш проект через бойлерплейт утилиту npx create-react-app
В компоненте app.js получим список космических кораблей и положим их в хранилище redux (позднее будет понятно, почему именно туда):
// app.jsx
const App = () => {
const dispatch = useDispatch();
useEffect(() => {
const getNews = async () => {
const {data} = await axios({
method: `get`,
url: `http://swapi.dev/api/vehicles`
})
dispatch(setStarships(data.results))
}
getNews();
}, [])
return (
);
}Построим простую таблицу:
// table.jsx
const Table = () => {
const starships = useSelector(({ starships }) => starships.starships);
return (
starships
?
Строка таблицы:
// table-row.jsx
const TableRow = ({starship}) => {
const {
cargo_capacity,
cost_in_credits,
max_atmosphering_speed,
name
} = starship
return (
Ячейка:
// table-cell.jsx
const TableCell = ({ item }) => {
const [state, setState] = useState(item);
return (
setState(target.value)}
type="text" />
)
}Чтобы при изменении стейта перерисовывалась только одна, ячейка мы кладём значение из пропсов в стейт компонента и меняем только его. При изменении значения в ячейке, происходит перерисовка одной ячейки. (Для хорошей видимости flash updates, я убрал outline у input в состоянии :focus, не делайте так!)
Готово! Вы великолепны!
Github исходник
Массовое обновление
Но что делать, если надо обновить значения стейта нескольких ячеек одновременно? Примерно как в google sheets и чтобы ещё выделять ячейки можно было? Воспользуемся библиотекой https://mobius1.github.io/Selectable/index.html
npm i selectable.js
В компоненте Table создадим экземпляр selectable
// table.jsx
const Table = ({ starships }) => {
const escKeyDownHandler = useCallback((evt) => {
if (evt.key === `Escape` || evt.key === `Esc`) {
evt.preventDefault();
window.select.clear();
}
}, [])
useEffect(() => {
window.select = new Selectable({
appendTo: `.table`,
autoRefresh: false,
lasso: {
border: '1px solid blue',
backgroundColor: 'rgba(52, 152, 219, 0.1)',
},
ignore: [
`input`
],
})
}, []);
useEffect(() => {
document.addEventListener(`keydown`, (evt) => escKeyDownHandler(evt));
return document.removeEventListener(`keydown`, escKeyDownHandler);
}, [escKeyDownHandler]);
return (
...
)
};Добавим в ignore input, чтобы при фокусе в нём, библиотека не реагировала на него. Также сразу создадим обработчик события на esc чтобы при клике на эту клавишу выделение сбрасывалось.
Теперь, печатая в одной ячейке, нам нужно изменить значения во всех выделенных ячейках. Но как это сделать? В React однонаправленный поток данных и мы не можем из одного ребёнка поменять значение другого. Функцию изменения стейта придётся класть в родителя или воспользоваться апдейтом через redux, что мы и сделаем.
Вариант первый. Самый быстрый и неоптимальный
Для начала изменим передачу пропсов в компонент TableCell
Было:
Стало:
Это нам понадобилось, чтобы получить в компоненте имя ячейки и url как универсальный идентификатор строчки
Меняем компонент TableCell:
// table-cell.jsx
const TableCell = ({ item, url }) => {
...
const updateHandler = ({ target }) => {
const { value } = target;
const selectedFields = document.querySelectorAll(`.ui-selected`);
if (selectedFields.length) {
selectedFields.forEach(({ dataset }) => {
const { name, id } = dataset
dispatch(updateStarship({ value, fieldName: name, url: id }))
})
} else {
dispatch(updateStarship({ value, fieldName: name, url }))
}
}
return (
...
...
Библиотка Selectable вешает на выбранную ячейку класс ui-selected. До этого мы присвоили класс ui-selectable каждому DOM элементу, который может быть выбран. Добавим data- атрибуты id и name для идентификации ячейки.
Теперь напишем функцию обновления стейта:
// table-cell.jsx
const TableCell = ({ item, url }) => {
...
const updateHandler = ({ target }) => {
const { value } = target;
const selectedFields = document.querySelectorAll(`.ui-selected`);
if (selectedFields.length) {
selectedFields.forEach(({ dataset }) => {
const { name, id } = dataset
dispatch(updateStarship({ value, fieldName: name, url: id }))
})
} else {
dispatch(updateStarship({ value, fieldName: name, url }))
}
}
return (
...
...
Теперь в файле starships-reducer.js напишем функцию updateStarship:
// starships-reducer.js
import { createSlice } from '@reduxjs/toolkit';
export const starshipsSlice = createSlice({
...
reducers: {
...
updateStarship: (state, action) => {
const { value, fieldName, url } = action.payload
const updatingItem = state.starships.find(starship => starship.url === url);
const updatingIndex = state.starships.findIndex(starship => starship.url === url);
if (updatingIndex < 0) {
throw new Error(`no such index`);
}
updatingItem[fieldName] = value;
state.starships = [
...state.starships.slice(0, updatingIndex),
updatingItem,
...state.starships.slice(updatingIndex + 1),
]
}
}
...Теперь апдейт выглядит так:
Готово. Вы великолепны!
Github исходник
Но почти… Теперь при обновлении одной ячейки у вас будет перерисовываться вся таблица. И, если в таблице такого размера это не критично — в большой таблице вас ждут большие проблемы. Мне по работе пришлось делать массовый апдейт в таблице 23×200, т.е. в DOM присутствовало одномоментно 4600 ячеек. Представьте, какие фризы это вызывало. И нельзя было воспользоваться библиотекой вроде react-window, так как она хранит в DOM одновременно только несколько строк. А нам нужно обновлять одновременно вплоть до двухсот строк, не говоря уже о количестве ячеек.
Вариант второй: хитрый
Я очень долго думал как решить эту задачу без потери перформанса и на ум мне пришёл вариант, который выводит нас за рамки реакта. Это не просто императивный подход, это обходит само понятие апдейта стейта.
Для этого нам надо переписать функцию апдейта в TableCell
// table-cell.jsx
const TableCell = ({ url, item }) => {
...
const updateHandler = ({ target }) => {
const { value } = target;
const selectedFields = document.querySelectorAll(`.ui-selected`);
if (selectedFields.length) {
selectedFields.forEach((item) => {
const input = item.children[0];
input.value = value;
})
}
setState(value)
}
return (
...
)
}Как видите — здесь мы напрямую меняем значение остальных ячеек через input.value значения в ячейках меняются, но стейт внутри не обновляется. Происходит перерисовка только одной ячейки:
Вот что происходит со стейтом ячеек:
Этот способ нарушает философию библиотеки React, но какое-то время он был единственным, который я смог придумать.
Github исходник
Вариант третий: каноничный
Мозг — удивительная штука. Можно очень долго биться над решением какой-то задачи и на ум ничего не приходит, ты словно в стену упираешься, решение не приходит. Но стоит отвлечься, пойти на прогулку, заняться другими вещами — мозг в фоновом режиме продолжает биться над решением задачи. И когда происходит «Эврика» — он выплёвывает практически готовое решение в сознание. Такое со мной происходило множество раз, то же самое случилось и в этот. Сейчас я продемонстрирую своё финальное решение.
Для начала переработаем redux-store:
// starships-reducer.js
export const starshipsSlice = createSlice({
name: 'starships',
initialState: {
...
// создаём новые списки
cargo_capacity: [],
cost_in_credits: [],
max_atmosphering_speed: [],
name: [],
},
reducers: {
...
// кладём значения в эти списки
setItemsList: (state, action) => {
const {listName, list} = action.payload
state[listName] = list
},
},
})
Затем в компоненте App при получении данных с сервера записываем значения в эти списки:
// app.jsx
const App = () => {
...
useEffect(() => {
if (!starships) {
const getNews = async () => {
const { data } = await axios({
method: `get`,
url: `http://swapi.dev/api/vehicles`
})
const { results } = data
dispatch(setStarships(results));
// пустые массивы
let cargo_capacity = [];
let cost_in_credits = [];
let max_atmosphering_speed = [];
let name = [];
// пробегаемся по массиву кораблей и записываем значения
// важно: к каждому элементу массива добавляем url как идентификатор
for (const starship of results) {
cargo_capacity.push({
url: starship.url,
value: starship.cargo_capacity
})
cost_in_credits.push({
url: starship.url,
value: starship.cost_in_credits
})
max_atmosphering_speed.push({
url: starship.url,
value: starship.max_atmosphering_speed
})
name.push({
url: starship.url,
value: starship.name
})
};
// записываем значения в стор
dispatch(setItemsList({ listName: `cargo_capacity`, list: cargo_capacity }))
dispatch(setItemsList({ listName: `cost_in_credits`, list: cost_in_credits }))
dispatch(setItemsList({ listName: `max_atmosphering_speed`, list: max_atmosphering_speed }))
dispatch(setItemsList({ listName: `name`, list: name }))
}
getNews();
}
}, [starships])
return (
...
);
}
export default App;
Теперь передаём эти значения в компонент TableCell. В пропсы компонента передаём index для получения нужного элемента в селекторе.
// table-cell.jsx
const TableCell = ({ url, item, index }) => {
const dispatch = useDispatch();
// теперь нам нужно только название списка
const [name] = Object.keys(item)
// используем хитрый селектор. извлекаем только тот элемент,
// который нам нужен в этом компоненте
const itemValue = useSelector(({ starships }) => starships[name][index]);
const updateHandler = ({ target }) => {
const { value } = target;
const selectedFields = document.querySelectorAll(`.ui-selected`);
if (selectedFields.length) {
selectedFields.forEach(({ dataset }) => {
const { id, name } = dataset;
// во всех выделенных ячейках меняем стейт, передаём туда
// значение, название списка и url как индентификатор
dispatch(updateItem({ value, listName: name, url: id }));
})
} else {
dispatch(updateItem({ value, listName: name, url }));
}
}
return (
)
}В редьюсере напишем функцию обновления нужного элемента в списке:
// starships-reducer.js
export const starshipsSlice = createSlice({
name: 'starships',
initialState: {
...
},
reducers: {
...
updateItem: (state, action) => {
// достаём значение, название списка и url
const { value, listName, url } = action.payload
const updatingItem = state[listName]
.find(listItem => listItem.url === url);
const updatingIndex = state[listName]
.findIndex(listItem => listItem.url === url);
if (updatingIndex < 0) {
throw new Error(`no such index`);
}
updatingItem.value = value;
state[listName] = [
...state[listName].slice(0, updatingIndex),
updatingItem,
...state[listName].slice(updatingIndex + 1),
]
},
},
})
Как теперь выглядит обновление значений в ячейках таблицы:
Последний штрих: если нам нужно чтобы при любом выделении менялись значения только в конкретном столбце, даже если выделены значения в других столбцах — пишем простую проверку в компоненте TableCell:
// table-cell.jsx
const TableCell = ({ url, item, index }) => {
...
const updateHandler = ({ target }) => {
...
if (selectedFields.length) {
selectedFields.forEach(({ dataset }) => {
const { id, name: listName } = dataset;
// пишем проверку на соответствие названия списка выделенной
// ячейки списку ячейки, в которой мы пишем значение
if (listName === name) {
dispatch(updateItem({ value, listName, url: id }));
}
})
} else {
dispatch(updateItem({ value, listName: name, url }));
}
}
return (
...
)
}Теперь это выглядит так:
Готово! Теперь вы действительно великолепны!
Github исходник
Заключение
Это моя первая статья на Хабре и вообще первая по теме фронтенда. Я работаю в индустрии 7 месяцев, долго искал решение в интернете, но не нашёл, решил поделиться с сообществом результатом своей работы, может быть кому-то пригодится. Жду конструктивной критики и предложений. Если будет интересно — сообщите об этом в комментариях, и я опубликую вторую часть статьи, где я расскажу, как собираю данные из этой таблицы для отправки на сервер только тех строк, в которых были сделаны изменения.
