chore: use react internel optimize code style (#21659)

components/checkbox/Checkbox.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
-import shallowEqual from 'shallowequal';
-import CheckboxGroup, { CheckboxGroupContext, GroupContext } from './Group';
+import CheckboxGroup, { GroupContext } from './Group';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
 
@@ -42,7 +41,7 @@ export interface CheckboxChangeEvent {
   nativeEvent: MouseEvent;
 }
 
-class Checkbox extends React.Component<CheckboxProps, {}> {
+class Checkbox extends React.PureComponent<CheckboxProps, {}> {
   static Group: typeof CheckboxGroup;
 
   static __ANT_CHECKBOX = true;
@@ -59,45 +58,26 @@ class Checkbox extends React.Component<CheckboxProps, {}> {
 
   componentDidMount() {
     const { value } = this.props;
-    const { checkboxGroup = {} } = this.context || {};
-    if (checkboxGroup.registerValue) {
-      checkboxGroup.registerValue(value);
-    }
+    this.context?.registerValue(value);
 
     warning(
-      'checked' in this.props || (this.context || {}).checkboxGroup || !('value' in this.props),
+      'checked' in this.props || this.context || !('value' in this.props),
       'Checkbox',
       '`value` is not validate prop, do you mean `checked`?',
     );
   }
 
-  shouldComponentUpdate(
-    nextProps: CheckboxProps,
-    nextState: {},
-    nextContext: CheckboxGroupContext,
-  ) {
-    return (
-      !shallowEqual(this.props, nextProps) ||
-      !shallowEqual(this.state, nextState) ||
-      !shallowEqual(this.context.checkboxGroup, nextContext.checkboxGroup)
-    );
-  }
-
   componentDidUpdate({ value: prevValue }: CheckboxProps) {
     const { value } = this.props;
-    const { checkboxGroup = {} } = this.context || {};
-    if (value !== prevValue && checkboxGroup.registerValue && checkboxGroup.cancelValue) {
-      checkboxGroup.cancelValue(prevValue);
-      checkboxGroup.registerValue(value);
+    if (value !== prevValue) {
+      this.context?.cancelValue(prevValue);
+      this.context?.registerValue(value);
     }
   }
 
   componentWillUnmount() {
     const { value } = this.props;
-    const { checkboxGroup = {} } = this.context || {};
-    if (checkboxGroup.cancelValue) {
-      checkboxGroup.cancelValue(value);
-    }
+    this.context?.cancelValue(value);
   }
 
   saveCheckbox = (node: any) => {
@@ -124,7 +104,7 @@ class Checkbox extends React.Component<CheckboxProps, {}> {
       onMouseLeave,
       ...restProps
     } = props;
-    const { checkboxGroup } = context;
+    const checkboxGroup = context;
     const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
     const checkboxProps: CheckboxProps = { ...restProps };
     if (checkboxGroup) {

components/checkbox/Group.tsx

@@ -36,16 +36,12 @@ export interface CheckboxGroupState {
 }
 
 export interface CheckboxGroupContext {
-  checkboxGroup: {
-    toggleOption: (option: CheckboxOptionType) => void;
-    value: any;
-    disabled: boolean;
-  };
+  toggleOption?: (option: CheckboxOptionType) => void;
+  value?: any;
+  disabled?: boolean;
 }
 
-export const GroupContext = React.createContext<{ checkboxGroup: any }>({
-  checkboxGroup: undefined,
-});
+export const GroupContext = React.createContext<CheckboxGroupContext | null>(null);
 
 class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGroupState> {
   static defaultProps = {
@@ -156,16 +152,14 @@ class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGrou
     }
 
     const context = {
-      checkboxGroup: {
-        toggleOption: this.toggleOption,
-        value: this.state.value,
-        disabled: this.props.disabled,
-        name: this.props.name,
+      toggleOption: this.toggleOption,
+      value: this.state.value,
+      disabled: this.props.disabled,
+      name: this.props.name,
 
-        // https://github.com/ant-design/ant-design/issues/16376
-        registerValue: this.registerValue,
-        cancelValue: this.cancelValue,
-      },
+      // https://github.com/ant-design/ant-design/issues/16376
+      registerValue: this.registerValue,
+      cancelValue: this.cancelValue,
     };
 
     const classString = classNames(groupPrefixCls, className);

components/checkbox/__tests__/group.test.js

@@ -149,6 +149,25 @@ describe('CheckboxGroup', () => {
     expect(onChange).toHaveBeenCalledWith([2]);
   });
 
+  it('checkbox should register value again after value changed', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Checkbox.Group defaultValue={[1]} onChange={onChange}>
+        <Checkbox key={1} value={1} />
+      </Checkbox.Group>,
+    );
+
+    wrapper.setProps({
+      children: [<Checkbox key={1} value={2} />],
+    });
+    expect(
+      wrapper
+        .find('.ant-checkbox-input')
+        .at(0)
+        .prop('checked'),
+    ).toBe(false);
+  });
+
   // https://github.com/ant-design/ant-design/issues/17297
   it('onChange should keep the order of the original values', () => {
     const onChange = jest.fn();

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import shallowEqual from 'shallowequal';
 import { FilterFilled } from '@ant-design/icons';
 import Menu from '../../../menu';
 import Checkbox from '../../../checkbox';
@@ -89,9 +88,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
 
   // ===================== Select Keys =====================
-  const [propFilteredKeys, setPropFilteredKeys] = React.useState(
-    filterState && filterState.filteredKeys,
-  );
+  const propFilteredKeys = filterState && filterState.filteredKeys;
   const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(propFilteredKeys || []);
 
   const onSelectKeys = ({ selectedKeys }: { selectedKeys: Key[] }) => {
@@ -99,13 +96,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   };
 
   React.useEffect(() => {
-    // Sync internal filtered keys when props key changed
-    const newFilteredKeys = filterState && filterState.filteredKeys;
-    if (!shallowEqual(propFilteredKeys, newFilteredKeys)) {
-      setPropFilteredKeys(newFilteredKeys);
-      onSelectKeys({ selectedKeys: newFilteredKeys || [] });
-    }
-  }, [filterState]);
+    onSelectKeys({ selectedKeys: propFilteredKeys || [] });
+  }, [propFilteredKeys]);
 
   // ====================== Open Keys ======================
   const [openKeys, setOpenKeys] = React.useState<string[]>([]);

package.json

@@ -134,7 +134,6 @@
     "rc-virtual-list": "~1.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "scroll-into-view-if-needed": "^2.2.20",
-    "shallowequal": "^1.1.0",
     "warning": "~4.0.3"
   },
   "devDependencies": {
@@ -155,7 +154,6 @@
     "@types/react": "^16.9.21",
     "@types/react-color": "^3.0.1",
     "@types/react-dom": "^16.9.5",
-    "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.19.0",
     "@typescript-eslint/parser": "^2.19.0",