当我将对象作为道具传递时，纯组件是否像普通组件一样工作? [英] Pure Component works like normal component when i pass object as a prop?

问题描述

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

I have a pure Component like this?

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
}

在这里我需要这个选项接口，因为没有可以增加

In this i need this options interface since the no can increase

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

Now when i use this pureComponents in my otherComponent

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>
               )
        })
}

如果我不传递道具选项，那么它工作正常，它仅在有一些变化时呈现.

If i don't pass the prop options then it works fine, it renders only when there is some change.

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

But if i pass options prop in props then it renders everytime even if no change. Each render makes the performance slower . Is there is any way to fix it or why it is occuring so.

推荐答案

默认 PureComponent 只会浅比较 props 中的复杂对象，它们不会比较您传递的对象的内容，您必须以某种方式覆盖 shouldComponentUpdate 生命周期，以停止重新渲染.

By default Pure Component will only shallowly compare complex objects in the props, they do not compare the content of the object you are passing, you have to override the shouldComponentUpdate lifecycle somehow, in order to stop re-render.

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

In your case, options = {get(item, 'options')} it seems like you are passing the new object on every parent re-render, if you start passing the same object then also it will create a problem because PureComponent will never find the difference in object keys

对于基于类的组件:

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 像这样

For Functioional component you need to use the React.memo like this

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;
  }
);

这篇关于当我将对象作为道具传递时，纯组件是否像普通组件一样工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！