防止 React Native 组件在每次状态更改时重新渲染

Question

我有一个组件，应该根据用户是否在某个位置附近显示 A 或 B。我创建了一个自定义挂钩来检索附近用户的值。

我的问题是钩子不断返回新值

true

，即使

isNearby

的值没有改变。一旦设置为

true

，它应该保持

true

。就是这样。

import { useEffect, useState } from 'react';
import useDistanceTo from './useDistanceTo';
import { Coordinates } from '../screens/backend/Distance';

const useIsNearby = (locationCoordinate) => {
  const [coordinate, setCoordinate] = useState<Coordinates>(null)
  const [isNearby, setIsNearby] = useState<boolean>(false);
  const distance = useDistanceTo(coordinate);

  useEffect(() => {
    setCoordinate(locationCoordinate);
  }, [locationCoordinate.latitude])

  useEffect(() => {
    console.log(distance)
    if (
      (distance || distance === 0) &&
      distance !== -1 &&
      distance < 50
    ) {
      setIsNearby(true);
    }
  }, [distance]);

  return isNearby;
};

export default useIsNearby;

export default function Component({ locationCoordinate }) {
  const isNearby = useIsNearby(locationCoordinate);

  const logA = () => {
    console.log('test');
    return null;
  }

  return (
    <View style={styles.container}>
      { isNearby ?
        logA()
      :
        <Text>Show B</Text>
      }
    </View>
  )
}

只要距离发生变化，控制台就会不断输出

test

。我很确定我的一些反应基本原理是错误的。我缺少什么/我应该修复什么？

日志实际上是一个不断运行的进入动画，这是不应该的。我试图简化实际问题，并尝试了多种方法来包含 useRef。一切都没有成功。

我正在寻找一种解决方案，其中组件仅在 isNearby 的值实际发生变化时更新，因此 logA() 不会继续执行新的输出。

Answer 1

根据react文档，如果值与之前的值相同（由Object.is确定），setState将不会触发重新渲染。在这种情况下， true 是一个原语，不会导致重新渲染。

但是，您还有一个 useEffect 调用 setCooperative，这似乎每次都可能会发生变化。因此，即使 isNearby 没有改变，坐标也可能改变，这仍然会导致重新渲染。

您可能会忽略的 React 基础是，要计算其中任何一个，就必须进行渲染。一旦进入函数，您将始终通过 return 语句退出，并且 logA 将始终被调用（假设 isNearby 仍然为 true）。

在底层，大括号内的代码总是被调用，它只是用来告诉 jsx 解析器这是 Javascript 而不是纯文本。

此外，您还可以使用当前代码触发级联的多个渲染。