reactjs - 如何确保组件内的常量仅在 React (Native) 中使用钩子(Hook)启动时计算一次？

Question

我目前正在创建一个 React Native 应用程序，但仍然不确定如何最好地处理我的用例的状态。

我用 react-native-svg在应用程序中创建一个相当复杂的图形，该图形存储在组件中，保持不变并在父组件中检索。然后这个父组件在 Canvas 上定期旋转和平移，但复杂图形的路径不会改变。因此，由于计算量很大，我只想在应用程序启动时计算该图形的 SVG 路径，而不是在我旋转或平移父组件时计算。目前，我的代码结构如下所示:

图组件

const Figure = (props) => {
    const [path, setPath] = useState({FUNCTION TO CALCULATE THE SVG PATH});

    return(
        <G>
            <Path d={path} />
        </G>
    )
}

父组件

const Parent = (props) => {
    return (
        <View>
            <Svg>
                <G transform={ROTATE AND TRANSFORM BASED ON INTERACTION}>
                    <Figure />
                </G>
            </Svg>
        </View>
    )
}

如您所见，我正在使用路径数据的状态。我现在的问题:

我是否在这里确保这条路径只在开始时计算一次？

有没有更优雅/更好的方法(例如，我现在根本没有使用 setter 函数，所以我觉得这不是最佳实践)

编辑:

计算路径的函数取决于我从父组件传递的一些 Prop 。

Answer 1

当您将值传递给 useState该值用于初始化状态。每次组件重新呈现时都不会设置它，因此在您的情况下 path仅在组件安装时设置。

即使 Prop 改变，path国家不会。

由于您的初始状态取决于 Prop ，因此您需要做的就是从 Prop 中拉出相关 Prop 并将其传递给计算初始 path 的函数。值(value):

const Figure = (props) => {
  // get relevant prop
  const { importantProp } = props;

  // path will never change, even when props change
  const [path] = useState(calculatePath(importantProp));

  return(
    <G>
      <Path d={path} />
    </G>
  )
}

但是， calculatePath即使 path值未重新初始化。如果 calculatePath是一项昂贵的操作，然后考虑使用 useMemo反而:

您可以确保 path仅当通过将特定 Prop 添加到依赖数组中更改特定 Prop 时才更新:

const Figure = (props) => {
  const { importantProp } = props;

  const path = useMemo(() => calculatePath(importantProp), [importantProp]);

  return(
    <G>
      <Path d={path} />
    </G>
  )
}

在这种情况下，你根本不需要状态。

添加 importantProp到 useMemo依赖数组意味着每次 importantProp更改，React 将重新计算您的 path多变的。

使用 useMemo将防止在每次渲染时评估昂贵的计算。

我创建了一个 CodeSandbox example您可以在控制台中看到仅在指定的 Prop important 时才重新计算路径变化。如果您更改任何其他 Prop ， path不会重新计算。