Чистые компоненты в React
2 года назад·2 мин. на чтение
В этой статье рассмотрим чистые компоненты в функциональных компонентах ReactJS.
Чистый компонент в React — это компонент, который всегда рендерит одно и то же при одних и тех же значениях пропсов. Это серьезно улучшает производительность. React будет использовать результат последнего рендера, избегая повторного рендеринга.
Рассмотрим компонент
Теперь поработаем с
Чистые компоненты названы так по аналогии с чистыми функциями.
Если мы вызовем вышеуказанную функцию
React.memo
React.memo — это компонент высшего порядка (higher-order component, HOC). Когда компонент отображает тот же вывод при одних и тех же пропсах, вы можете обернуть свой функциональный компонент этой функциейReact.memo
. За счет этого улучшится производительность и оптимизируется рендеринг.
React.memo
работает только при изменении пропсов компонента. Это означает, что если вы используете состояние, используя хук useState
, то для каждого изменения состояния он будет ререндерить компонент. С React.memo
выполняется поверхностное сравнение пропсов.
CustomLabel
и Counter
, внутри которого используется CustomLabel
.
// CustomLabel.jsx import React from "react"; export const CustomLabel = ({ name }) => { return ( <> {console.log("CustomLabel component render")} <label> <b>{name}</b> </label> </> ); };
Компонент// Counter.jsx import React, { useState } from "react"; import CustomLabel from "./CustomLabel"; export const Counter = () => { const [counter, setCounter] = useState(0); return ( <div> <CustomLabel name="Simple Counter app" /> <p>Counter is: {counter}</p> <button onClick={() => setCounter(counter + 1)}>Click</button> </div> ); };
CustomLabel
принимает name
в качестве пропса и отображает его в теге label
. В компонент CustomLabel
мы добавили console.log()
, чтобы мы могли видеть, сколько раз компонент ререндерится. Всякий раз, когда вы нажимаете кнопку, чтобы увеличить счетчик, он повторно рендерит компонент CustomLabel
.
React.memo
. Обернем компонент CustomLabel
в React.memo
и снова будем нажимать счетчик. Увидим, что он отрендерил компонент CustomLabel
только один раз, потому что проп name
остается неизменным при каждом нажатии кнопки.
// CustomLabel.jsx import React, {memo} from "react"; export const CustomLabel = memo(({ name }) => { return ( <> {console.log("CustomLabel component render")} <label> <b>{name}</b> </label> </> ); });
Что такое чистые функции?
В Javascript функции, которые возвращают один и тот же вывод при одних и тех же входных данных, называются чистыми функциями. Таким образом, результат чистой функции зависит только от ее входных аргументов. Чистые функции также не вызывают никаких побочных эффектов. Рассмотрим чистую функциюadd
.
function Add(num1, num2){ return num1 + num2; }
add(2,2)
, она всегда будет возвращать 4. Если вызвать ее несколько раз с параметрами 2 и 2, она всегда будет возвращать 4. Благодаря тому что функция чистая можно оптимизировать и улучшить производительность приложения.
Еще подробнее о чистых функциях можно прочитать в статье Чистые функции. Функциональное программирование.Как обновить страницу в React
2 года назад·1 мин. на чтение
В этой статье рассмотрим как обновить страницу (сделать refresh страницы) и как обновить отдельный компонент в React.
Как обновить страницу
Чтобы обновить страницу (сделать refresh страницы), нам нужно использовать методwindow.location.reload()
в React.
По умолчанию этот метод перезагружает страницу из кэша, если мы передаем true
в качестве аргумента, он перезагружает всю страницу с сервера, а не с кэша.
Рассмотрим пример:
В приведенном выше коде мы обновляем страницу, нажимая на кнопку refresh.import React from "react"; function Home() { const refreshPage = ()=>{ window.location.reload(); } return ( <div> <h1>{Math.random()}</h1> <button onClick={refreshPage}>Refresh</button> </div> ); }
Обновление компонента
Если требуется обновить конкретный компонент, а не всю страницу, необходимо вызвать методthis.setState()
с пустым объектом для классовых компонентов.
Передав пустой объектimport React from "react"; class App extends React.Component { handleRefresh = () => { // вызов этого метода вызовет ререндер компонента this.setState({}); }; render() { return ( <div> <h1>{Math.random()}</h1> <button onClick={this.handleRefresh}>Refresh component</button> </div> ); } } export default App;
{}
в функцию изменения состояния, react будет думать, что что-то обновлено в состоянии, и компонент необходимо обновить (или повторно отобразить) с новым UI.
Обновление компонента с помощью хуков
В react hooks мы можем использоватьuseState()
для обновления компонента.
import {useState} from "react"; function Home() { const [value,setValue] = useState(); const refresh = ()=>{ // это вызовет ререндеринг компонента setValue({}); } return ( <div> <p>{Math.random()}</p> <button onClick={refresh}>Refresh component</button> </div> ); }