Загрузка...
Загрузка...
React.StrictMode — это инструмент для выявления потенциальных проблем в приложении. Он активирует дополнительные проверки и предупреждения только в режиме разработки.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Production:
StrictMode не влияет на production-сборку. Все проверки работают только в development.
StrictMode помогает:
StrictMode намеренно вызывает функции дважды, чтобы помочь найти побочные эффекты:
function Counter() {
const [count, setCount] = useState(0);
console.log('Render'); // В StrictMode выведется дважды!
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
Вызываются дважды:
useState, useMemo, useReducerrender, shouldComponentUpdate, getDerivedStateFromPropslet globalCounter = 0;
function Component() {
// Побочный эффект вне useEffect!
globalCounter++; // В StrictMode увеличится дважды
return <div>Counter: {globalCounter}</div>;
}
let globalCounter = 0;
function Component() {
useEffect(() => {
// Побочные эффекты в useEffect
globalCounter++;
return () => {
globalCounter--; // Cleanup
};
}, []);
return <div>Counter: {globalCounter}</div>;
}
StrictMode предупредит об использовании устаревших методов жизненного цикла:
class MyComponent extends React.Component {
componentWillMount() {
// Предупреждение: устаревший метод
}
componentWillReceiveProps(nextProps) {
// Предупреждение: устаревший метод
}
componentWillUpdate(nextProps, nextState) {
// Предупреждение: устаревший метод
}
render() {
return <div>Hello</div>;
}
}
class MyComponent extends React.Component {
static getDerivedStateFromProps(props, state) {
// Вместо componentWillReceiveProps и componentWillUpdate
return null;
}
componentDidMount() {
// Вместо componentWillMount
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// Для получения информации перед обновлением DOM
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// Работа с snapshot
}
render() {
return <div>Hello</div>;
}
}
class Parent extends React.Component {
static childContextTypes = {
color: PropTypes.string
};
getChildContext() {
return { color: 'purple' };
}
render() {
return <Child />;
}
}
const ThemeContext = React.createContext('light');
function Parent() {
return (
<ThemeContext.Provider value="dark">
<Child />
</ThemeContext.Provider>
);
}
function Child() {
const theme = useContext(ThemeContext);
return <div>Theme: {theme}</div>;
}
Можно применять StrictMode только к определённым компонентам:
function App() {
return (
<div>
<Header />
<React.StrictMode>
<Sidebar />
<Content />
</React.StrictMode>
<Footer />
</div>
);
}
Header и Footer не будут проверяться, только Sidebar и Content.
В React 18 StrictMode моделирует размонтирование и повторное монтирование компонентов:
function Component() {
useEffect(() => {
console.log('Mount');
return () => {
console.log('Unmount');
};
}, []);
return <div>Hello</div>;
}
В StrictMode выведет:
Mount
Unmount
Mount
Это помогает убедиться, что компонент правильно очищает ресурсы при размонтировании.
function Component() {
console.log('Render'); // Выводится дважды в StrictMode
return <div>Hello</div>;
}
Помните, что двойной вызов только в development. В production будет один вызов.
React DevTools автоматически убирает дубликаты логов от StrictMode:
// Установите React DevTools расширение
// Дубликаты логов будут скрыты автоматически
function Component() {
if (process.env.NODE_ENV === 'development') {
// Логи только в development, но всё равно дважды
console.log('Render');
}
return <div>Hello</div>;
}
StrictMode помогает писать качественный код. Но есть случаи:
Если библиотека вызывает предупреждения, которые вы не можете исправить:
function App() {
return (
<div>
<React.StrictMode>
<MyApp />
</React.StrictMode>
{/* Сторонняя библиотека без StrictMode */}
<ThirdPartyComponent />
</div>
);
}
Если двойные логи мешают отладке, временно отключите:
// Временно для отладки
// <React.StrictMode>
<App />
// </React.StrictMode>
Не забудьте вернуть StrictMode после отладки!
Добавляйте StrictMode при создании проекта:
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Не игнорируйте предупреждения StrictMode. Они указывают на реальные проблемы.
Убедитесь, что тесты запускаются с StrictMode:
// setupTests.js
import { render } from '@testing-library/react';
function renderWithStrictMode(ui) {
return render(
<React.StrictMode>
{ui}
</React.StrictMode>
);
}
Нет, в production StrictMode полностью отключается. Все проверки работают только в development.
Это намеренное поведение StrictMode для выявления побочных эффектов. В production код будет выполнен один раз.
Рекомендуется оборачивать всё приложение, но можно применять выборочно к проблемным частям.
React.StrictMode:
На собеседовании:
Важно уметь: