Реализация shouldComponentUpdate с перехватчиками React - визуализировать дочерний объект только один раз, но вносить изменения DOM при изменении реквизита

Question

У меня есть что-то, работающее с React.Component с использованием shouldComponentUpdate, и я хочу преобразовать его в React Hooks, но я не уверен, что это даже возможно.

У меня есть дочерний компонент, который отображает очень дорогой холст ChartingLibrary, поэтому я хочу визуализировать компонент «Реакция потомка» только один раз.

Содержимое холста диаграммы зависит от реквизитов, переданных дочернему элементу, и определенные API-интерфейсы в ChartingLibrary должны вызываться с реквизитами, передаваемыми в ребенок.

Поэтому, когда реквизиты, переданные дочернему элементу, меняются, мне нужно вызвать apis в библиотеке диаграмм, но я не хочу обновлять sh дочерний компонент.

Это работает с классом React следующим образом:

    const Parent = () => {
        <Child/>
    }

    export class Child extends React.Component {
        shouldComponentUpdate (nextProps, nextState) {
            ChartingLibrary.init()
            ChartingLibrary.doStuffWithProps(nextProps.data)
            return false
        }
    }

React.memo является проблематичным c:

Ближайший я могу добраться до React.Component версия с React.Memo, но у меня нет доступа к ChartingLibrary из функции isSame. React. Версия React.Component дает мне доступ к ChartingLibrary изнутри компонента, тогда как React.memo можно выполнять только снаружи компонента.

    const Parent = () => {
        <Child/>
    }

    const Child = (props) => {
        ChartingLibrary.init()
        ChartingLibrary.doStuffWithProps(props) 
    }
    const ChildMemo = React.memo(Child, function isSame (prevProps, props) {
        ChartingLibrary.doStuffWithProps(props)
        return true
    })

Есть ли лучший способ? Что я пытаюсь сделать с помощью крючков?

Answer 1

Вы делаете это правильно, я думаю. React.memo - это способ достижения того, что вы ищете.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

Как сказано в документации:

В отличие от метода shouldComponentUpdate () для компонентов класса, Функция areEqual возвращает true, если реквизиты равны, и false, если реквизиты не равны. Это обратное значение fromComponentUpdate.

Надеюсь, это поможет вам.