Что такое mutations и actions в vuex?
Который является официальной библиотекой для управления состоянием в приложениях Vue.js,
Mutations (Мутации)
Это единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.
Actions (Действия)
Действия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода
Взаимодействие между Mutations и Actions:
Mutations
Синхронно изменяют состояние.
Actions
Могут быть асинхронными и обычно вызывают мутации для изменения состояния.
Пример взаимодействия
Компонент
👉 @frontendInterview
Который является официальной библиотекой для управления состоянием в приложениях Vue.js,
mutations
(мутации) и actions
(действия) играют ключевые роли в управлении состоянием. Они помогают обеспечивать предсказуемость изменения состояния и организовывают логику приложения.Mutations (Мутации)
Это единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
incrementBy(state, payload) {
state.count += payload.amount;
}
}
});
Actions (Действия)
Действия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода
dispatch
и могут возвращать промисы, что полезно для обработки цепочек асинхронных операций.import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
incrementByAsync({ commit }, payload) {
setTimeout(() => {
commit('incrementBy', payload);
}, 1000);
}
}
});
Взаимодействие между Mutations и Actions:
Mutations
Синхронно изменяют состояние.
Actions
Могут быть асинхронными и обычно вызывают мутации для изменения состояния.
Пример взаимодействия
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, message) {
state.message = message;
}
},
actions: {
fetchMessage({ commit }) {
setTimeout(() => {
const message = 'Hello from async action!';
commit('setMessage', message);
}, 2000);
}
}
});
Компонент
<template>
<div>
<p>{{ message }}</p>
<button @click="loadMessage">Load Message</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapActions(['fetchMessage']),
loadMessage() {
this.fetchMessage();
}
}
};
</script>
👉 @frontendInterview
❤1
Web Design in easy steps, 7th Edition (2023)
Эта книга раскрывает ключевые принципы хорошего веб-дизайна, который представляет собой искусство и науку создания эффективных и привлекательных веб-сайтов. Книга познакомит вас с ключевыми технологиями веб-дизайна и принципами проектирования, лежащими в основе успешных сайтов.
👉 @frontendInterview
Эта книга раскрывает ключевые принципы хорошего веб-дизайна, который представляет собой искусство и науку создания эффективных и привлекательных веб-сайтов. Книга познакомит вас с ключевыми технологиями веб-дизайна и принципами проектирования, лежащими в основе успешных сайтов.
👉 @frontendInterview
❤1
Break camelCase
Завершите решение так, чтобы функция разбивала camelCase пробелом.
Пример:
👉 @frontendInterview
Завершите решение так, чтобы функция разбивала camelCase пробелом.
Пример:
"camelCasing" => "camel Casing"
"identifier" => "identifier"
"" => ""
👉 @frontendInterview
Please open Telegram to view this post
VIEW IN TELEGRAM
Какие есть способы оптимизации рендеринга в react?
Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (
Производительность
Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.
Экономия ресурсов
Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым.
Лучший UX
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.
Мемоизация компонентов
React предоставляет утилиту
Использование `useMemo` и `useCallback`
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.
Пример
Разделение кода и ленивый рендеринг
Использование
Проверка зависимости в `useEffect`
Избегайте запуска побочных эффектов, если зависимости не изменились.
Избегайте анонимных функций и объектов в `props`
Передача новых объектов и функций через
Лучше так
Разделение больших компонентов
Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.
Использование ключей при рендере списков
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.
👉 @frontendInterview
Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (
state
) или свойства (props
) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать.Производительность
Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.
Экономия ресурсов
Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым.
Лучший UX
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.
Мемоизация компонентов
React предоставляет утилиту
React.iss.onemo
, чтобы предотвращать ререндеринг компонента, если его props
не изменились.import React from 'react';
const MyComponent = React.iss.onemo(({ count }) => {
console.log('Рендер компонента');
return <div>Счётчик: {count}</div>;
});
// Использование
export default function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<MyComponent count={count} />
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
}
Использование `useMemo` и `useCallback`
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.
import React, { useMemo } from 'react';
function ExpensiveCalculationComponent({ number }) {
const calculatedValue = useMemo(() => {
console.log('Выполняются сложные вычисления...');
return number ** 2;
}, [number]); // Пересчитывается только если `number` изменился
return <div>Результат: {calculatedValue}</div>;
}
Пример
useCallback
import React, { useCallback, useState } from 'react';
const Child = React.iss.onemo(({ onClick }) => {
console.log('Рендер дочернего компонента');
return <button onClick={onClick}>Кликни меня</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('Кнопка нажата');
}, []); // Создаётся одна и та же функция между рендерами
return (
<div>
<Child onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
</div>
);
}
Разделение кода и ленивый рендеринг
Использование
React.lazy
и Suspense
позволяет загружать компоненты только тогда, когда они необходимы.import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Загрузка...</div>}>
<LazyComponent />
</Suspense>
);
}
Проверка зависимости в `useEffect`
Избегайте запуска побочных эффектов, если зависимости не изменились.
React.useEffect(() => {
console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);
Избегайте анонимных функций и объектов в `props`
Передача новых объектов и функций через
props
вызывает лишние рендеры.<ChildComponent data={{ key: 'value' }} />
Лучше так
const data = { key: 'value' };
<ChildComponent data={data} />;
Разделение больших компонентов
Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.
Использование ключей при рендере списков
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}
👉 @frontendInterview
👍4❤1