Question

我有一个功能组件UserInfoInput和另一个功能组件UserInfo，其中包括许多UserInfoInput组件。这是我的代码：

const UserInfoInput = React.memo((props) => {
    useEffect(() => {
        console.log('changed ');
    })
    return (
        <View style={styles.container} >
            <View style={{ ...styles.iconContainer, backgroundColor: props.color }}>
                {props.name ? <Icon type={props.type} name={props.name} size={props.size} color='white' /> :
                    <Image source={props.image} style={props.imageStyle} />}
            </View>
             //input goes there
            <TextInput style={styles.input} placeholder={props.title} onChangeText={props.changeText} />

            {props.divider && <View style={{ ...RootStyle.divider, position: 'absolute', width: '85%', bottom: 0, right: 5 }}></View>}
        </View>
    )
});

和UserInfo组件：

 const [text, setText] = useState('');
  const [second, setSecond] = useState('');
  const update = text => setText(text);
  const updt = text1 => setSecond(text1);
  return (
    // <UserMenu />
    <View style={{ flex: 1 }}>
      <View style={styles.navigator}>
      </View>
      <View style={styles.inputList}>
        <UserInfoInput name="bookmark" color='#FF6C88' type='font-awesome' size={18} title={UserMenuTitle.bookmark} divider={true} changeText={update} />
        <UserInfoInput name="star" color='#8BD8FB' type='font-awesome' size={18} title={UserMenuTitle.achieve} divider={true} changeText={updt} />
        ...
      </View>
    </View>

无论何时输入这些输入之一，即使我已经将其包装在UserInfoInput函数中，这两个React.memo组件仍会重新呈现。我希望仅在准确输入UserInfoInput组件时才重新渲染它，而不希望从其他UserInfoInput组件中重新渲染，但我不知道该怎么做。谁能帮我解决这个问题？

Answer 1

根据反应官方文档：

默认情况下，它只会在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
  */
// prevProps.title===nextProps.title(add your condition return true if values are equal. It ensure it will not re-render again)
}

const UserInfoInput = React.memo((props) => {
    useEffect(() => {
        console.log('changed ');
    })
    return (
        <View style={styles.container} >
            <View style={{ ...styles.iconContainer, backgroundColor: props.color }}>
                {props.name ? <Icon type={props.type} name={props.name} size={props.size} color='white' /> :
                    <Image source={props.image} style={props.imageStyle} />}
            </View>
             //input goes there
            <TextInput style={styles.input} placeholder={props.title} onChangeText={props.changeText} />

            {props.divider && <View style={{ ...RootStyle.divider, position: 'absolute', width: '85%', bottom: 0, right: 5 }}></View>}
        </View>
    )
},areEqual);

React.useMemo不会阻止重新渲染

1 个答案: