零基础学RN之巧用useMemo优化组件性能

Android

2023-11-07 05:01:12

提升React Native性能：深入剖析useMemo Hook

前言

在React Native应用程序中，组件性能至关重要。当应用程序不断壮大，组件数量增加时，不合理的渲染会严重影响用户体验。为了应对这一挑战，useMemo Hook提供了一种简单而有效的方法来优化组件性能。

useMemo原理

useMemo Hook接受两个参数：一个回调函数和一个依赖项数组。回调函数返回一个值，而useMemo会记住该值，并仅在依赖项发生变化时才重新计算。这使我们能够避免不必要的重新渲染，从而提高性能。

useMemo用法

1. 声明依赖项数组

依赖项数组是一个数组，列出影响回调函数结果的变量。只有当依赖项发生改变时，回调函数才会重新执行。

2. 创建回调函数

回调函数是一个纯函数，接受依赖项数组中的变量作为参数并返回一个值。useMemo Hook将记住此值。

3. 使用useMemo Hook

const memoizedValue = useMemo(() => {
  // 计算复杂逻辑或执行耗时操作
  return result;
}, [dependencies]);

在组件中，useMemo的返回值可像普通变量一样使用。只有在依赖项发生更改时，才会重新计算。

useMemo优势

使用useMemo Hook的主要优势包括：

优化性能： 避免不必要的重新渲染，从而提高应用程序性能。
减少内存消耗： 通过记住计算结果，useMemo可以减少在组件重新渲染时创建新对象所消耗的内存。
简化代码： 提供了一种简洁且易于阅读的方式来管理复杂状态和计算。

useMemo实战示例

考虑一个带有搜索框的列表组件，搜索框输入的变化应该触发列表根据输入值进行过滤。

优化前代码：

const MyList = (props) => {
  const [searchValue, setSearchValue] = useState('');
  const filteredData = props.data.filter((item) => item.name.includes(searchValue));
  return (
    <View>
      <TextInput onChangeText={setSearchValue} />
      <FlatList data={filteredData} />
    </View>
  );
};

使用useMemo进行优化后的代码：

const MyList = (props) => {
  const [searchValue, setSearchValue] = useState('');
  const filteredData = useMemo(() => {
    return props.data.filter((item) => item.name.includes(searchValue));
  }, [searchValue]);
  return (
    <View>
      <TextInput onChangeText={setSearchValue} />
      <FlatList data={filteredData} />
    </View>
  );
};