React.memo - tại sao hàm bình đẳng của tôi không được gọi?

Tôi có một thành phần cha mẹ biểu hiện một bộ sưu tập con dựa trên một mảng nhận được thông qua các đạo cụ.

import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Content } from 'components-lib';
import Child from '../Child';

const Parent = props => {
  const { items } = props;

  return (
    <Content layout='vflex' padding='s'>
      {items.map(parameter => (
        <Child parameter={parameter} key={shortid.generate()} />
      ))}
    </Content>
  );
};

Parent.propTypes = {
  items: PropTypes.array
};

export default Parent;

Mỗi khi một cái mới itemđược thêm vào, tất cả trẻ em được kết xuất lại và tôi đang cố gắng tránh điều đó, tôi không muốn những đứa trẻ khác được kết xuất lại, tôi chỉ muốn kết xuất cái cuối cùng được thêm vào.

Vì vậy, tôi đã thử React.memo cho đứa trẻ nơi mà tôi có thể sẽ so sánh bằng codetài sản hoặc thứ gì đó. Vấn đề là hàm bình đẳng không bao giờ được gọi.

import React from 'react';
import PropTypes from 'prop-types';
import { Content } from 'components-lib';

const areEqual = (prevProps, nextProps) => {
  console.log('passed here') // THIS IS NEVER LOGGED!!
}

const Child = props => {
  const { parameter } = props;
  return <Content>{parameter.code}</Content>;
};

Child.propTypes = {
  parameter: PropTypes.object
};

export default React.memo(Child, areEqual);

Bất cứ ý tưởng tại sao?

Nói tóm lại, lý do của hành vi này là do cách React hoạt động.

React mong đợi một khóa duy nhất cho mỗi thành phần để nó có thể theo dõi và biết đó là khóa nào. Bằng cách sử dụng shortid.generate()một giá trị mới của khóa được tạo, tham chiếu đến thành phần thay đổi và React nghĩ rằng đó là một thành phần hoàn toàn mới, cần phải đăng ký lại.

Trong trường hợp của bạn, trên bất kỳ thay đổi đạo cụ nào trong cha mẹ, React sẽ từ bỏ tất cả các con vì các phím sẽ khác nhau đối với tất cả các con so với kết xuất trước đó.

Vui lòng tham khảo câu trả lời tuyệt vời cho chủ đề này

Hi vọng điêu nay co ich!

Tôi không biết phần còn lại của thư viện của bạn nhưng tôi đã thực hiện một số thay đổi và mã của bạn và (hầu hết) dường như hoạt động. Vì vậy, có thể, nó có thể giúp bạn thu hẹp nguyên nhân.

https://codesandbox.io/s/cocky-sun-rid8o