避免React中重复Setter调用导致的过度渲染-js教程-PHP中文网

避免React中重复Setter调用导致的过度渲染

心靈之曲

发布： 2025-09-25 15:31:26

原创

728人浏览过

避免react中重复setter调用导致的过度渲染

本文旨在解决React应用中，由于频繁使用相同的setter函数导致组件过度渲染的问题。通过深入理解React的渲染机制和利用React.memo进行性能优化，可以有效地避免不必要的组件更新，从而提升应用的整体性能和用户体验。文章将提供详细的代码示例和注意事项，帮助开发者更好地掌握这些优化技巧。

在React开发中，性能优化是一个至关重要的环节。其中，避免不必要的组件重新渲染是提高应用性能的关键策略之一。当多个组件共享同一个状态，并且通过相同的setter函数更新该状态时，可能会导致所有组件都重新渲染，即使它们实际上没有发生任何变化。本文将深入探讨这个问题，并提供有效的解决方案。

理解React渲染机制

React的渲染机制基于虚拟DOM。当组件的状态（state）或属性（props）发生变化时，React会创建一个新的虚拟DOM树，并将其与之前的虚拟DOM树进行比较，找出差异（diff）。然后，React会根据这些差异来更新实际的DOM，从而实现页面的更新。

然而，如果组件的状态或属性没有实际变化，但由于某些原因导致组件重新渲染，就会造成性能浪费。例如，如果一个父组件重新渲染，那么它的所有子组件默认情况下也会重新渲染，即使子组件的props并没有改变。

问题分析：相同的Setter导致过度渲染

考虑以下场景：一个包含多个可点击文本的组件，每个文本点击后都会触发相同的setter函数，用于显示一个模态框。

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function Main() {
  const [wordModalVisible, setWordModalVisible] = useState(false);

  const handleTextPress = () => {
    setWordModalVisible(true);
  };

  interface TextProps {
    onPress: () => void;
    children: React.ReactNode;
  }

  const MyText: React.FC<TextProps> = ({ onPress, children }) => {
    console.log('MyText render'); // 观察渲染情况
    return <Text onPress={onPress}>{children}</Text>;
  };


  return (
    <Text adjustsFontSizeToFit={true} style={styles.contentText}>
      <MyText onPress={handleTextPress}>Text 1</MyText>
      <MyText onPress={handleTextPress}>Text 2</MyText>
      <MyText onPress={handleTextPress}>Text 3</MyText>
      <MyText onPress={handleTextPress}>Text 4</MyText>
      <MyText onPress={handleTextPress}>Text 5</MyText>
    </Text>
  )
}

const styles = StyleSheet.create({
    contentText: {
        fontSize: 20,
    }
})

登录后复制

在这个例子中，每次点击任何一个<MyText>组件，setWordModalVisible(true)都会被调用，导致Main组件重新渲染，进而导致所有的<MyText>组件也重新渲染。即使<MyText>组件的onPress和children属性并没有发生变化，它们仍然会被重新渲染，这是一种不必要的性能消耗。

解决方案：使用 React.memo

React.memo是一个高阶组件，它可以缓存组件的渲染结果，并在props没有发生变化时，跳过重新渲染。通过将<MyText>组件包裹在React.memo中，可以避免不必要的重新渲染。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

import React, { useState, memo } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function Main() {
  const [wordModalVisible, setWordModalVisible] = useState(false);

  const handleTextPress = () => {
    setWordModalVisible(true);
  };

  interface TextProps {
    onPress: () => void;
    children: React.ReactNode;
  }

  const MyText: React.FC<TextProps> = memo(({ onPress, children }) => {
    console.log('MyText render'); // 观察渲染情况
    return <Text onPress={onPress}>{children}</Text>;
  });


  return (
    <Text adjustsFontSizeToFit={true} style={styles.contentText}>
      <MyText onPress={handleTextPress}>Text 1</MyText>
      <MyText onPress={handleTextPress}>Text 2</MyText>
      <MyText onPress={handleTextPress}>Text 3</MyText>
      <MyText onPress={handleTextPress}>Text 4</MyText>
      <MyText onPress={handleTextPress}>Text 5</MyText>
    </Text>
  )
}

const styles = StyleSheet.create({
    contentText: {
        fontSize: 20,
    }
})

登录后复制

在这个修改后的例子中，MyText 组件被 React.memo 包裹。现在，当 Main 组件因为 wordModalVisible 状态的改变而重新渲染时，MyText 组件只有在其 props（onPress 和 children）发生变化时才会重新渲染。由于 onPress 函数和 children 属性在每次渲染时都是相同的，因此 MyText 组件只会渲染一次，从而避免了不必要的重新渲染。

进一步优化：使用 useCallback

在某些情况下，即使使用了React.memo，组件仍然可能会重新渲染。这通常是因为传递给子组件的props是一个新的函数或对象。例如，如果handleTextPress函数是在Main组件内部定义的，那么每次Main组件重新渲染时，handleTextPress函数都会被重新创建，导致MyText组件的onPress prop发生变化，从而触发重新渲染。

为了解决这个问题，可以使用useCallback hook来缓存函数：

import React, { useState, memo, useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function Main() {
  const [wordModalVisible, setWordModalVisible] = useState(false);

  const handleTextPress = useCallback(() => {
    setWordModalVisible(true);
  }, []); // 依赖项为空数组，确保函数只创建一次

  interface TextProps {
    onPress: () => void;
    children: React.ReactNode;
  }

  const MyText: React.FC<TextProps> = memo(({ onPress, children }) => {
    console.log('MyText render'); // 观察渲染情况
    return <Text onPress={onPress}>{children}</Text>;
  });


  return (
    <Text adjustsFontSizeToFit={true} style={styles.contentText}>
      <MyText onPress={handleTextPress}>Text 1</MyText>
      <MyText onPress={handleTextPress}>Text 2</MyText>
      <MyText onPress={handleTextPress}>Text 3</MyText>
      <MyText onPress={handleTextPress}>Text 4</MyText>
      <MyText onPress={handleTextPress}>Text 5</MyText>
    </Text>
  )
}

const styles = StyleSheet.create({
    contentText: {
        fontSize: 20,
    }
})

登录后复制

通过使用useCallback，handleTextPress函数只会在组件第一次渲染时创建一次，后续的渲染都会使用同一个函数实例，从而确保MyText组件的onPress prop不会发生变化。

总结与注意事项

React.memo 配合 useCallback: React.memo 用于缓存组件的渲染结果，而 useCallback 用于缓存函数，两者结合使用可以有效地避免不必要的组件重新渲染。
仔细分析渲染原因: 使用React DevTools等工具，仔细分析组件重新渲染的原因，找出导致性能瓶颈的根源。
避免不必要的props更新: 尽量避免传递不必要的props给子组件，或者确保传递的props是不可变的。
谨慎使用 useMemo: useMemo 类似于 useCallback，但用于缓存计算结果。过度使用 useMemo 可能会增加代码的复杂性，反而降低性能。

通过理解React的渲染机制，并合理利用React.memo和useCallback等优化手段，可以有效地避免组件过度渲染，提升React应用的性能和用户体验。在实际开发中，需要根据具体情况选择合适的优化策略，并进行充分的测试和验证。

以上就是避免React中重复Setter调用导致的过度渲染的详细内容，更多请关注php中文网其它相关文章！