javascript 初始状态设置方法的比较

carvr3hs  于 2023-01-01  发布在  Java
关注(0)|答案(3)|浏览(138)

当在React中初始化状态时,在useState中定义函数而不是使用useEffect是不好的做法吗?或者使用useMemo是最好的做法吗?
我的理解是useState内部的变量将在组件的第一次渲染时设置,在使用函数设置初始状态时是否有其他注意事项?

功能

import React, { useState, useEffect } from "react";

export default function Token() {
  const a = 5
  const b = 5

  const findToken = (a,b) => {
    return a*b;
  };

  const [token, setToken] = useState(() => {
    return findToken(a,b);
  });

  return (
    <div>
      <h1>Token: {token}</h1>
    </div>
  );
}

使用效果

import React, { useState, useEffect } from "react";

export default function Token() {
  const a = 5
  const b = 5
  const [token, setToken] = useState();
   
  useEffect(() => {
    setToken(a*b);
  }, []);

  return (
    <div>
      <h1>Token: {token}</h1>
    </div>
  );
}

使用备忘录

import React, { useState, useEffect } from "react";

export default function Token() { 
  const a = 5
  const b = 5

  const findToken = (a,b) => {
    return a*b;
  };

  const [token, setToken] = useState(useMemo(() => findToken(a,b), [a,b]));

  return (
    <div>
      <h1>Token: {token}</h1>
    </div>
  );
}

brvekthn

brvekthn1#

如果值只被设置一次,并且需要执行的操作开销不大,那么最好避免使用state,只使用useMemo

const [token, setToken] = useState(() => {
    return findToken(a,b);
});

如果setToken没有在其他地方被调用,并且计算开销不大,则最好将其重构为

const token = useMemo(() => findToken(a, b), []);

如果可以根据应用中的逻辑多次设置该值,则需要状态。
如果计算该值的操作开销大到足以在呈现时引起明显的延迟,那么您 * 可能 * 决定使用state来弥补这一点,首先呈现一个空值,然后在将组件绘制到屏幕上之后使用useEffect来计算(并设置状态)开销大的值。
如果您在一个效果挂钩中设置状态(与useMemo相反),请记住,这将导致树中较低位置的组件重新呈现,这有时是不希望的。

6bc51xsx

6bc51xsx2#

下面我将尝试比较您列出的一些设置初始状态的方法。

useState,带有初始化函数

const [token, setToken] = useState(() => {
    return findToken(a,b);
});

findToken相对昂贵时,您可以使用这种方法,并且使用这种方法 * 可以保证findToken只执行一次 *。
如果初始状态是高开销计算的结果,则可以提供一个函数,该函数将仅在初始呈现时执行
因为如果你给useState传递了一个 expression 而不是function,那么这个表达式将在每次渲染时运行,只有它的值在第一次渲染后被忽略。

使用useEffect的方法

useEffect(() => {
    setToken(a*b);
  }, []);

就功能而言,这类似于上面的useState方法,但这是不必要的,会导致额外的重新渲染。
还有另一个区别,传递给useState的初始化函数应该是 pure,而useEffect没有这个要求,所以在useEffect的方法中,你有一个优势,你可以在状态中设置值,这是一个API调用的结果。

使用useMemo的方法

const [token, setToken] = useState(useMemo(() => findToken(a,b), [a,b]));

上述方法实际上没有意义,因为useMemo第一次运行时,其结果将存储在useState中,然后,useMemo生成的所有其他值实际上将被忽略-正如第一节中关于将 expressions 传递给useState所述。

j0pj023g

j0pj023g3#

支持和反对

useState内部传递函数还是使用useEffect

    • 让我们看看钩子的用法以及何时使用它们**

使用效果挂钩

useEffect钩子被设计用于执行副作用,例如获取数据或修改DOM,并且它没有针对设置初始状态进行优化。在这种情况下,使用useState钩子直接设置初始状态会更有效

使用备忘录钩

useMemo挂钩用于记忆函数的值,以便仅在其依赖项之一发生更改时重新计算该值。在这种情况下,findToken函数仅在组件首次呈现时计算一次,其值将被缓存以供将来呈现。这比使用useEffect挂钩设置初始状态更有效。

结论

最佳实践是直接使用useState钩子设置初始状态,除非您有特定的原因使用useEffectuseMemo hook

用法

要使用useState钩子只调用一次函数,可以将初始化函数传递给useState

const [token, setToken] = useState(() => findToken(a,b));

相关问题