Как я могу предотвратить повторный рендеринг моего функционального компонента с помощью React memo или React hooks?
Когда hiddenLogo меняет значение, компонент перерисовывается. Я хочу, чтобы этот компонент повторно отображал никогда, даже если его свойства изменились. С компонентом класса я мог бы сделать это, реализовав sCU следующим образом:
shouldComponentUpdate() {
return false;
}
Но есть ли способ сделать это с помощью React hooks/React memo?
Вот как выглядит мой компонент:
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import ConnectedSpringLogo from '../../containers/ConnectedSpringLogo';
import { Wrapper, InnerWrapper } from './styles';
import TitleBar from '../../components/TitleBar';
const propTypes = {
showLogo: PropTypes.func.isRequired,
hideLogo: PropTypes.func.isRequired,
hiddenLogo: PropTypes.bool.isRequired
};
const Splash = ({ showLogo, hideLogo, hiddenLogo }) => {
useEffect(() => {
if (hiddenLogo) {
console.info('Logo has been hidden');
}
else {
showLogo();
setTimeout(() => {
hideLogo();
}, 5000);
}
}, [hiddenLogo]);
return (
<Wrapper>
<TitleBar />
<InnerWrapper>
<ConnectedSpringLogo size = "100" />
</InnerWrapper>
</Wrapper>
);
};
Splash.propTypes = propTypes;
export default Splash;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
React.памятка — это то же самое, что и React.PureComponent.
Вы можете использовать его, когда не хотите обновлять компонент, который, по вашему мнению, является статическим, то же самое, что и PureCompoment.
Для компонентов класса:
class MyComponents extends React.PureCompoment {}
Для функциональных компонентов:
const Mycomponents = React.memo(props => {
return <div> No updates on this component when rendering </div>;
});
Так что это просто создание компонента с React.memo
To verify that your component doesn't render you can just activate
HightlightUpdatesin reactextensionand check yourcomponents reactiononrendering
Переписать второй параметр memo в () => true;
Как сказал Г.азиз, React.memo работает аналогично чистому компоненту. Однако вы также можете настроить его поведение, передав ему функцию, которая определяет, что считается равным. По сути, это функция shouldComponentUpdate, за исключением того, что вы возвращаете true, если хотите, чтобы отображалась нет.
const areEqual = (prevProps, nextProps) => true;
const MyComponent = React.memo(props => {
return /*whatever jsx you like */
}, areEqual);
Потрясающий! Спасибо!
Как мы можем выполнить глубокое сравнение реквизита?
React.memo сравнивает только newProps и oldProps, как мы можем сравнить newState и oldState, чтобы решить, когда выполнять повторный рендеринг?
@QuocVanTang хук useState выполнит собственную проверку, чтобы убедиться, что значение изменилось, и пропустит рендеринг, если это не так. Кроме этого, вы не можете предотвратить повторную визуализацию при установке состояния в функциональном компоненте. В зависимости от того, что делает ваш компонент, вы можете использовать useMemo или useCallback, чтобы пропустить некоторые вычисления при рендеринге.
Спасибо за ответ, я полагаю, если у нас есть oldState {xyz: 1}, тогда мы устанавливаем ему newState как равное значение {xyz: 1} (новый ссылочный объект, но равный при глубоком сравнении). На данный момент он все еще перерисовывается, потому что реагирующие хуки делают мелкое сравнение, поэтому я хочу пропустить повторный рендеринг для этого случая.
Что касается React.memo, в документации говорится: «Этот метод существует только как оптимизация производительности. Не полагайтесь на него, чтобы «предотвратить» рендеринг, так как это может привести к ошибкам». (reactjs.org/docs/react-api.html#reactmemo). Кто-нибудь знает больше о том, какие ошибки могут возникнуть?
Я думаю, что это (stackoverflow.com/a/61547432/839847) довольно хорошее обсуждение потенциальных затрат на использование React.memo - хотя обсуждение касается затрат на производительность, а не потенциальных ошибок.
Мы можем использовать памятка для предотвращения рендеринга в функциональных компонентах только для целей оптимизации. Согласно документу React:
This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.
Согласно документации по реакции: - [https://reactjs.org/docs/react-api.html][1]
React. memo is a higher order component. If your component renders the same result given the same props, you can wrap it in a call to React. memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
Для практического понимания я наткнулся на эти два видео, они очень хороши, если вы также хотите прояснить концепции, лучше посмотреть, чтобы сэкономить ваше время.
Отказ от ответственности: - Это не мой канал на YouTube.
- https://thewikihow.com/video_qySZIzZvZOY [перехватчик useMemo]
- https://thewikihow.com/video_7TaBhrnPH78 [компонент на основе класса]
React.memo будет повторно отображать компонент при изменении его свойств. Мой вопрос заключается в том, как я могу сделать повторный рендеринг моего компонента никогда, даже если реквизиты меняются, и без с использованием класса.