реагировать onChange на текстовое поле обновлять весь компонент при изменении состояния

Question

У меня был функциональный компонент, и я использовал ловушки реакции для управления состоянием.

Как только я добавляю onChange в textField (вход в пользовательский интерфейс материала), все компоненты повторно визуализируются, и когда я удаляю onChange в textField не выполняет повторную визуализацию

            <TextField
                    id='outlined-basic'
                    label='Outlined'
                    variant='outlined'
                    fullWidth
                    onChange={e => {
                        setChannelUrl(e.target.value);
                    }}
                />

Приведенное выше изображение является компонентом rerender, даже если я не пропускаю ни одного реквизита.

Как только я удаляю setChannelUrl(e.target.value);, все работает нормально функциональный компонент и функция стрелки

Answer 1

Stats компонент рендерит дуэт своему родительскому рендеру.

Родитель визуализируется, когда пользователи вводят текстовое поле, и onChange обновляет указанное значение с помощью setChannelUrl.

. Вы можете запомнить Stats с помощью React.memo, который предотвратит нежелательные отрисовки:

Если ваш функциональный компонент отдает одинаковый результат при одинаковых значениях, вы можете заключить его в вызов React.memo для повышения производительности в некоторых случаях, запомнив результат , Это означает, что React пропустит рендеринг компонента и повторно использует последний результат рендеринга.

const Stats = () => {
    // Won't log on parent render
    console.log('rendered');
    return <div></div>;
};

export default React.memo(Stats);