Реагировать: как предотвратить повторный рендеринг дочерних компонентов в `map`?

Question

Я попытался свести проблему к как можно более простому примеру:

У нас есть список дочерних компонентов, каждый из которых называется NumChoice, каждый из которых представляет собой число. NumChoice завернут в React.memo. В родительском компоненте у нас есть массив логических значений,choices, каждый соответствует одному из дочерних компонентов NumChoice. Сначала все элементыchoices являются false. Чтобы отобразить дочерние компоненты, мы перебираемchoices, и для каждого варианта сгенерируйте соответствующий дочерний компонент NumChoice. Определим функциюchooseDivisibles в родительском компоненте, используя useCallback который вызывается из каждого дочернего компонента NumChoice. chooseDivisibles принимает индекс NumChoice кто его вызвал и меняет соответствующий элемент choices к true. КаждыйNumChoice имеет "красный" цвет фона, если соответствующий элемент в choices является trueв противном случае цвет фона - "белый".

Полный код доступен по адресу:https://codesandbox.io/s/react-rerender-l4e3c?fontsize=14&hidenavigation=1&theme=dark

Оберточная бумага NumChoice в React.memo а также chooseDivisibles в useCallback, мы ожидали только повторной визуализации NumChoice компоненты, соответствующий элемент которых choices изменения, но React повторно отображает их все. chooseDivisibles завернут в useCallback, который не перечисляет никаких зависимостей, кроме setChoices. Также,NumChoice завернут в React.memo и он должен выполнять повторную визуализацию только в том случае, если указанные реквизиты меняются, но они не меняются, и изменение choices не должно влиять на повторную отрисовку NumChoice. Если исключить проверку равенстваchooseDivisibles в предыдущем и следующем реквизитах он работает так, как ожидалось, но я утверждаю, что сравнение предыдущего и следующего chooseDivisibles не должно влиять на повторную визуализацию NumChoice потому что он завернут в useCallbackи не зависит от choices. Как мы можем предотвратить повторную визуализациюNumChoice компоненты, чьи props не меняются?

Answer 1

Я вижу это в NumChoice.js мы также утверждаем prevProps.chooseDivisibles === nextProps.chooseDivisibles, что всегда false, поскольку chooseDivisibles={event => chooseDivisibles(idx)} генерирует новую функцию каждый раз

Если вы удалите prevProps.chooseDivisibles === nextProps.chooseDivisibles, он будет повторно отображать только затронутые!