reactjs - 最佳实践：只为渲染准备一次道具

Question

考虑 nextjs 应用程序中的以下简单页面：

type MyProps = {
    myData: string[]
}

export const getServerSideProps: GetServerSideProps<MyProps> = async ({ req, res }) => {
    return { props: {myData: calcData()} }
}

function MyComponent(props: MyProps) {
   return <div>{props.myData}</div>
}

在 props 中准备数据的最佳实践是什么？在我的情况下，我需要根据服务器端代码中不存在的标准（客户端浏览器中的当前语言，使用 next-i18next）对数据进行排序。我可以像这样使用状态

function MyComponent(props: MyProps) {
   const [sortedProps] = useState({myData: props.myData.sort(...)})

   return <div>{sortedProps.myData}</div>
}

但这对我来说听起来并不是“React 的意图”。也许useEffect(() => {...}, [])运行一次是更好的选择？如果是，我如何记住结果数据useEffect？useRef?

编辑：还是useMemo要走的路？

score 2 · Accepted Answer

您可以按如下方式使用惰性初始状态：-

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

参考：https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

reactjs - 最佳实践：只为渲染准备一次道具

1 回答 1

Related

Reference