React 组件重新渲染，尽管所有道具都没有改变

Question

我使用 setInterval 每 15 秒获取 data。

useEffect(() => {
  const interval = setInterval(() => {
    onGetCarInfo();
  }, 15000);

  return () => {
    clearInterval(interval);
  };
}, []);

但是我有一个问题。我在 Home_screen 组件中使用它。但是其他组件每 15 秒重新渲染一次 ，即使 它们 没有使用响应数据 。（我用了React.memo但还是重新渲染）

const Tab = createBottomTabNavigator();

function MainTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name={Name.Name_monitoring} component={Home_screen} />
      <Tab.Screen name={Name.Name_journey} component={SupJourney} />
      <Tab.Screen name={Name.Name_images} component={MultipleCams} />
      <Tab.Screen name={Name.Name_report} component={Reports} />
    </Tab.Navigator>
  );
}

我已经检查并看到他们重新渲染，因为 store 重新渲染。但是为什么即使 props 没有改变，组件也会重新渲染？

那么我该如何解决这个问题呢？

Answer 1

这是我的错误。我使用相同的功能，不推送响应来存储和解决这个问题。

useEffect(() => {
  const fetchData = async () => {
    const username = await AsyncStorage.getItem('username');
    const tokenKey = await AsyncStorage.getItem('tokenKey');

    try {
      const params = {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${tokenKey}`,
        },
      };

      const response = await fetch(
        `${API_GET_TI_BASE}?loginName=${username}`,
        params,
      );
      const body = await response.json();

      setlocalData(body);
    } catch (error) {
      console.log('getCarInfo error: ', error);
    }
  };

  const interval = setInterval(() => {
    fetchData();
    // onGetCarInfo();
  }, 15000);

  return () => {
    clearInterval(interval);
  };
}, []);

React 组件重新渲染，尽管所有道具都没有改变

React component re-rendering although all props do not change

reactjs

react-native

redux

react-redux