React-Native性能提升优化点

渲染优化

减少多余render的渲染

类组件中使用shouldComponentUpdate
shouldComponentUpdate用于控制组件是否需要重新渲染，通过这个方法，可以优化组件的性能，避免不必要的渲染

• 返回值为 true：组件会重新渲染（这是默认行为）。
• 返回值为 false：组件不会重新渲染。

通过比较当前的props和state与下一个props和state，决定是否需要更新组件
例子中，只有当someValue发生变化时，组件才会重新渲染

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较当前和下一个 props/state
    return nextProps.someValue !== this.props.someValue;
  }

  render() {
    return <div>{this.props.someValue}</div>;
  }
}

函数组件使用React.memo来实现类似功能

注意：shouldComponentUpdate是强业务逻辑相关的，如果使用这个API，必须考虑和此组件相关的所有props和state，如果有遗漏，就有可能出现数据和视图不统一的情况，所以使用时需要非常小心React.memo
React.memo是React v16.6中引入的新功能，是一个专门针对React函数组件的高阶组件
默认情况下，它和PureComponent一样，都是进行浅比较，是个高阶组件，在原有的组件上套一层就可以了

import React from 'react';

const MyComponent = ({ someValue }) => {
  return <div>{someValue}</div>;
};

export default React.memo(MyComponent);
如果需要自定义比较逻辑，可以传入第二个参数
const MyComponent = ({ someValue }) => {
  return <div>{someValue}</div>;
};

const areEqual = (prevProps, nextProps) => {
  return prevProps.someValue === nextProps.someValue;
};

export default React.memo(MyComponent, areEqual);

合理使用PureComponent

PureComponent 是 React 中的一种类组件，类似于普通的 Component，但它自动实现了 shouldComponentUpdate 方法
特点：

• 浅比较：PureComponent 会对 props 和 state 进行浅层比较。如果没有变化，组件就不会重新渲染。
• 性能优化：适用于不需要深层比较的场景，可以减少不必要的渲染

import React, { PureComponent } from 'react';

class MyPureComponent extends PureComponent {
  render() {
    return <div>{this.props.someValue}</div>;
  }
}

注意事项：

• 浅比较：只进行浅层比较，因此如果 props 或 state 是复杂数据结构（如对象或数组），可能需要自定义比较逻辑。
• 适用场景：适用于简单数据类型或不可变数据结构的场景

使用React.Fragment避免多层嵌套或者使用Fragment短语法

render() {
  return (
    <React.Fragment>
    <ChildA />
    < ChildB />
    <ChildC />
    < /React.Fragment>
  );
}
render() {
  return (
    <>
    <ChildA />
    < ChildB />
    <ChildC />
    < />
  );
}

避免GPU过渡绘制

React native开发做视图优化时，应该优先优化安卓，从下面几点做优化：

• 减少背景色的重复设置：每个 View 都设置背景色的话，在 Android 上会造成非常严重的过度绘制；尽量在父级容器上设置背景色，而不是每个子View单独设置，通过合并背景色，减少需要绘制的层数
• 避免设置半透明颜色：半透明色区域 iOS Android 都会引起过度绘制
• 避免设置圆角：圆角部位 iOS Android 都会引起过度绘制
• 避免设置阴影：阴影区域 iOS Android 都会引起过度绘制

为什么要优先优化安卓？

• 设备多样性：安卓设备种类繁多，屏幕尺寸和硬件性能差异较大，优化安卓可以确保应用在各种设备中都能流畅运行
• 性能差异：安卓的原生渲染通常不如ios，特别是在低端设备上，安卓的性能瓶颈可能更加明显，因此需要更多优化
• 动画和过渡效果：在安卓上，动画和过渡效果的性能可能不如ios流畅
• 内存管理：安卓的内存管理和垃圾回收机制与ios不同，可能导致更多的性能问题，尤其是在处理大量图片或复杂视图时，通过优先优化安卓，可以确保在性能较差的情况下应用仍能良好运作

交互优化

优先执行用户可感知的操作：如页面场景切换

例如，页面转场这个场景，可以把页面逻辑放在 InteractionManager.runAfterInteractions 的回调中执行，这样可以优先保证转场动画的执行，然后才是我们的页面逻辑，很好的规避了转场卡顿问题
**InteractionManager.runAfterInteractions：**这是一个 React Native 提供的工具，用于在所有交互（如动画）完成后执行某些任务。这样可以确保动画的流畅性

import React, { useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { InteractionManager } from 'react-native';

const MyComponent = () => {
  const [loading, setLoading] = React.useState(true);
  const [data, setData] = React.useState(null);

  useEffect(() => {
    // 假设这里是页面转场动画的开始
    console.log('Page transition starts');

    // 在转场动画完成后执行数据获取
    const interactionPromise = InteractionManager.runAfterInteractions(() => {
      // 模拟数据获取
      fetchData().then(fetchedData => {
        setData(fetchedData);
        setLoading(false);
      });
    });

    return () => {
      // 清理
      interactionPromise.cancel();
    };
  }, []);

  const fetchData = async () => {
    // 模拟一个数据获取过程
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('Fetched Data');
      }, 2000);
    });
  };

  return (
    <View>
      {loading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        <Text>{data}</Text>
      )}
    </View>
  );
};

export default MyComponent;

初始化页面尽量渲染少量组件

当我们呈现一个页面给用户时，一定是要在最短时间内让用户感觉到页面已经展示完毕，可以优先显示固定的占位信息，配合loading或骨架图布局不确定的部分，与此同时我们才在背后默默的发起请求(碰到复杂页面，则可拆分多个异步请求)