Javascript 在自定义钩子中创建一个数组是在每次状态更改时重新渲染值

基本要点是"" === ""总是正确的，而[] === []总是错误的.字符串虽然与对象类似，但在某种程度上被视为基本体，因为它们将与自身相等.另一方面，数组是特殊的Javascript对象，两个声明的对象永远不会严格相等.

试试看！

console.log('"" === ""', "" === ""); // true
console.log('[] === []', [] === []); // false

当您 for each 渲染周期指定let testVar = "";时，testVar始终等于上一次渲染的最后一个值，因此useMemo钩子将返回之前计算的、已记忆的值.

const useCustomHookTest = () => {
  let testVar = "";
  return useMemo(
    () => ({
      testVar
    }),
    [testVar] // "" === "" true, dependency didn't "change".
  );
};

与此形成对比的是，现在当您 for each 渲染周期指定let testVar = "";时，依赖项现在是always新的数组引用，因此不完全相等，useMemo挂钩将重新计算其记忆值.

const useCustomHookTest = () => {
  let testVar = []; // <-- new array each render
  return useMemo(
    () => ({
      testVar
    }),
    [testVar] // [] === [] false, new memoized value
  );
};

由于记忆值是105对象，因此useEffect钩子的依赖关系现在会看到一个新对象，即{ testVar: true } === { testVar: false }不是因为testVar属性发生了更改而为false，而是因为{} === {}也是false，原因与[] === []相同.这是一个新的对象引用.

除此之外，还不清楚您希望通过以下代码模式实现什么:

export default function App() {
  const [testStateVariable, setTestStateVariable] = useState(false);

  const useCustomHookTest = () => {
    let testVar = "";
    return useMemo(
      () => ({
        testVar
      }),
      [testVar]
    );
  };

  var { testVar } = useCustomHookTest();

  useEffect(() => {
    console.log("CHANGE OF testVar!");
  }, [testVar]);

  return (
    <View style={styles.container}>
      <Text>{testStateVariable.toString()}</Text>
      <Button
        title="Change a state to true"
        onPress={() => {
          setTestStateVariable(true);
        }}
      />
      <Button
        title="Change a state to false"
        onPress={() => {
          setTestStateVariable(false);
        }}
      />
    </View>
  );
}

每个渲染周期都会重新声明useCustomHookTest钩子，因此在父组件的每个渲染周期都会重新创建任何内部内容.

如果你的问题基本上是使用数组作为React-hook依赖项，那么不幸的是，没有任何好的解决方案.两种主要的解决方案要么实现深度平等性判断，要么简单地对数组进行JSON字符串化.

JSON.字符串示例:

const useCustomHookTest = () => {
  let testVar = [];
  return { testVar };
};

export default function App() {
  const [testStateVariable, setTestStateVariable] = useState(false);

  const { testVar } = useCustomHookTest();

  useEffect(() => {
    console.log("CHANGE OF testVar!");
  }, [JSON.stringify(testVar)]); // <-- JSON stringify dependency

  return (
    <View style={styles.container}>
      <Text>{testStateVariable.toString()}</Text>
      <Button
        title={`Change a state to ${(!testStateVariable).toString()}`}
        onPress={() => {
          setTestStateVariable((t) => !t);
        }}
      />
    </View>
  );
}