React native-仅重新呈现父组件的一部分（性能问题）

Question

我具有以下层次结构：

Home
 ⎿ setSnackText (use state hook) 
 ⎿ MyQuestionsList
    ⎿ MySingleQuestion(setSnackText) (onClick -> props.setSnackText(this.text)
 ⎿ MySnackBar

我希望小吃栏的可见性/文本对于每个子元素都是可访问的，并且通过将setSnackText函数传递给带有道具的每个子元素来使其正常工作

但是问题是，在每次调用setSnackText（hook）时，包括列表在内的整个组件（Home）现在都必须重新呈现，这会导致性能问题。

这是我的代码：

首页：

const ViewSingleSheet = (props) => {
const [questionNote, setQuestionNote] = useState(null);
return (
            <Block flex stretch style={styles.home}>
                <Block style={styles.sheetDetails}>
                    <Block>

                    </Block>
                </Block>
                <Block style={styles.questionContainer}>
                    <FlatList data={questions}
                        initialNumToRender={200}
                        renderItem={({ item }) => {
                            return <SingleQuestion setQuestionNote={setQuestionNote} question={item}></SingleQuestion>
                        }}
                        keyExtractor={item => item.id}
                    />
                </Block>
            </Block>
        );

}

单个问题：

const SingleQuestion = (props) => {
return (<TouchableWithoutFeedback onPress={() => props.setQuestionNote('some notes....')}>
                <FontAwesome5 name={"info-circle"} size={19}></FontAwesome5>
            </TouchableWithoutFeedback>);
}

任何解决方法？

Answer 1

如果某些子组件将收到相同的道具，则不需要重新渲染，您可以将它们包装在React.memo中，例如：

Home
 ⎿ setSnackText (use state hook) 
 ⎿ MyList
    ⎿ React.memo(MyItem(setSnackText)) (onClick -> props.setSnackText(this.text)
 ⎿ React.memo(MySnackBar)

但是，重新渲染很少会引起明显的性能问题； React只执行组件并检查它们返回的元素是否与之​​前的渲染不同。如果元素匹配，则不会更改DOM，这是昂贵的部分。大多数时候，您无需担心微优化。