调查组件重新渲染问题

npm install @welldone-software/why-did-you-render@8.0.3 --save-dev

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],

  env: {
    development: {
      plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]],
    },
  },
}

/// <reference types="@welldone-software/why-did-you-render" />
import React from "react";

if (process.env.NODE_ENV === "development") {
  const whyDidYouRender = require("@welldone-software/why-did-you-render");
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

const MyCustomComponent = (props) => (
  <div>
    My Custom Component


);

MyCustomComponent.whyDidYouRender = true;

export default MyCustomComponent;

import './wdyr';
import { AppRegistry, LogBox } from 'react-native';
import  App  from './src/Home';
import { name as appName } from './app.json';

// 其他应用代码

AppRegistry.registerComponent(appName, () => App);

(NOBRIDGE) GROUP    SpatialNavigationVirtualizedList
(NOBRIDGE) LOG    {"SpatialNavigationVirtualizedList": [Function anonymous]} Re-rendered because of props changes:
(NOBRIDGE) GROUP      props.renderItem
(NOBRIDGE) LOG      different functions with the same name. (more info at http://bit.ly/wdyr02)
(NOBRIDGE) LOG      {"prev renderItem": [Function renderItem]} !== {"next renderItem": [Function renderItem]}
(NOBRIDGE) GROUP      Rendered by Grid
(NOBRIDGE) LOG      {"Grid": [Function Grid]} Re-rendered because of hook changes:
(NOBRIDGE) GROUP        [hook useState result]
(NOBRIDGE) LOG        different objects. (more info at http://bit.ly/wdyr3)
(NOBRIDGE) LOG        {"prev ": ""} !== {"next ": "不必要的状态更新！"}
(NOBRIDGE) GROUP    SpatialNavigationVirtualizedList
(NOBRIDGE) LOG    {"SpatialNavigationVirtualizedList": [Function anonymous]} Re-rendered because of props changes:
(NOBRIDGE) GROUP      props.renderItem
(NOBRIDGE) LOG      different functions with the same name. (more info at http://bit.ly/wdyr02)
(NOBRIDGE) LOG      {"prev renderItem": [Function renderItem]} !== {"next renderItem": [Function renderItem]}
(NOBRIDGE) GROUP      Rendered by Grid
(NOBRIDGE) LOG      {"Grid": [Function Grid]} Re-rendered because of hook changes:
(NOBRIDGE) GROUP        [hook useState result]
(NOBRIDGE) LOG        different objects. (more info at http://bit.ly/wdyr3)
(NOBRIDGE) LOG        {"prev ": ""} !== {"next ": "不必要的状态更新！"}
(NOBRIDGE) GROUP    SpatialNavigationVirtualizedList
(NOBRIDGE) LOG    {"SpatialNavigationVirtualizedList": [Function anonymous]} Re-rendered because of props changes:
(NOBRIDGE) GROUP      props.renderItem
(NOBRIDGE) LOG      different functions with the same name. (more info at http://bit.ly/wdyr02)
(NOBRIDGE) LOG      {"prev renderItem": [Function renderItem]} !== {"next renderItem": [Function renderItem]}
(NOBRIDGE) GROUP      Rendered by Grid
(NOBRIDGE) LOG      {"Grid": [Function Grid]} Re-rendered because of hook changes:
(NOBRIDGE) GROUP        [hook useState result]
(NOBRIDGE) LOG        different objects. (more info at http://bit.ly/wdyr3)
(NOBRIDGE) LOG        {"prev ": ""} !== {"next ": "不必要的状态更新！"}

  useEffect(() => {
    setHeaderTitle("非必要状态更新！");
  }, []);