Мобильная версияОдна из ключевых понятий, которые делают React, React Is чистота < /em>. Чистый компонент или крюк - это тот, который: < /p>
idempotent < /strong> - вы всегда получаете одинаковый результат каждый раз, когда запускаете его с Те же входы - реквизиты, состояние, контекст для входов компонентов; и аргументы для вводов крюка. Эта ключевая концепция из DEC DOCS < /p>
Компоненты всегда должны возвращать один и тот же выход по отношению к их входам
- реквизиты, состоянию и контексту. Это известно как идентичность.
Idempotency - это термин, популяризированный в функциональном программировании. Это относится
к идее, что вы всегда получаете одинаковый результат каждый раз, когда вы запускаете
этот кусок кода с одинаковыми входами. < /P>
Это означает, что весь код, который Запуск во время рендеринга также должен быть
idempotence, чтобы это правило сохранилось. Например, эта строка кода
не является идентифицирующей (и, следовательно, не является компонентом): < /p>
function Clock() {
const time = new Date(); //
Bad: always returns a different result!return {time.toLocaleString()}
}
< /code>
Это не означает, что вы не должны использовать неампотентные функции, такие как New
date () вообще-вы должны просто избегать их использования во время рендеринга. В
в этом случае мы можем синхронизировать последнюю дату этого компонента, используя
an -эффект: < /p>
import { useState, useEffect } from 'react';
function useTime() {
// 1. Keep track of the current date's state. `useState` receives an initializer function as its
// initial state. It only runs once when the hook is called, so only the current date at the
// time the hook is called is set first.
const [time, setTime] = useState(() => new Date());
useEffect(() =\> {
// 2. Update the current date every second using `setInterval`.
const id = setInterval(() => {
setTime(new Date()); //
Good: non-idempotent code no longer runs in render}, 1000);
// 3. Return a cleanup function so we don't leak the `setInterval` timer.
return () => clearInterval(id);
}, []);
return time;
}
export default function Clock() {
const time = useTime();
return {time.toLocaleString()};
}
< /code>
< /blockquote>
Из собственных слов React, разве крюк использования всегда возвращает одно и то же значение (время), учитывая, как крючок использования всегда передается одни и те же аргументы ( пустой набор аргументов)? Или принцип не сохраняется, когда неампотентный код обернут в использование?
Подробнее здесь: https://stackoverflow.com/questions/794 ... idempotent
