当我将对象作为道具传递时，纯组件就像普通组件一样工作？

Question

我有一个像这样的纯组件？

interface CheckBoxOptions {
  multiSelected?: boolean
  showOuterCheckBoxOnSelected?: boolean
}

interface Props {
  checkBoxKey?: any
  itemTitle?: string
  isCheckBoxSelected?: boolean
  checkBoxStyle?: any
  mainContainerStyle?: any
  checkBoxTitleStyle?: any
  checkBoxBackgroundColor?: any
  onPressCheckBox?: (id, isChecked, selectedArray , options?: CheckBoxOptions) => void
  itemKey?: any
  options?: CheckBoxOptions
}

在这个我需要这个选项界面，因为no可以增加

现在当我在我的 otherComponent 中使用这个 pureComponents 时

renderCheckBoxComponent = (checkBoxKey , checkBoxList ) => {
    const totalCheckBoxelements = checkBoxList && checkBoxList.length
    log('renderCheckBoxComponent', checkBoxList )
    const {onPressChackBox} = this.props
   return  checkBoxList && checkBoxList.map((item , index) => {
        return (
        <View style={[ styles.checkBoxContainer , { borderBottomWidth: (index === totalCheckBoxelements - 1) ? 1 : 0 }]}>
            <CheckBoxComponent
                    checkBoxKey={checkBoxKey}
                    itemKey={get(item , 'id')}
                    itemTitle={get(item , 'name', '')}
                    isCheckBoxSelected={get(item , 'isChecked' , '')}
                    onPressCheckBox={onPressChackBox}
                    checkBoxBackgroundColor={colors.DuckBlue}
                    options = {get(item, 'options')}


                />
        </View>
               )
        })
}

如果我不通过 prop 选项，那么它可以正常工作，只有在有一些变化时才会呈现。

但是，如果我在 props 中传递 options 道具，那么即使没有变化，它也会每次都渲染。每次渲染都会使性能变慢。有什么方法可以解决它或为什么会这样。

Answer 1

默认情况下Pure Component 只会对 props 中的复杂对象进行浅层比较，它们不会比较您传递的对象的内容，您必须以某种方式覆盖 shouldComponentUpdate 生命周期，以停止重新渲染。

在您的情况下，options = {get(item, 'options')} 似乎您在每次重新渲染父对象时都传递了新对象，如果您开始传递相同的对象，那么它也会产生问题，因为 PureComponent 永远不会发现对象键的差异

对于基于类的组件：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (
      nextProps.options !== this.props.options &&
      nextProps.options.multiSelected !== this.props.multiSelected &&
      nextProps.options.showOuterCheckBoxOnSelected !==
        this.props.showOuterCheckBoxOnSelected
    ) {
      return false;
    }
    return true;
  }

  render() {
    return <div>{"My Component " + this.props.value}</div>;
  }
}

对于功能组件，您需要像这样使用React.memo

const MyNewComponent = React.memo(
  (props) => {
    <MyComponent {...props} />;
  },
  (oldProps, newProps) => {
    if (
      oldProps.options !== newProps.options &&
      oldProps.options.multiSelected !== newProps.multiSelected &&
      oldProps.options.showOuterCheckBoxOnSelected !==
        newProps.showOuterCheckBoxOnSelected
    ) {
      return true;
    }
    return false;
  }
);