当前位置: 首页 > 面试题库 >

如何只使用一次React useEffect调用加载函数

戎劲
2023-03-14
问题内容

该useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化,使其仅在所需属性更改时调用。

如果我想从中调用初始化函数componentDidMount而不在更改时再次调用该怎么办?假设我要加载一个实体,但是加载功能不需要组件中的任何数据。我们如何使用useEffect钩子做到这一点?

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

使用钩子可能看起来像这样:

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

问题答案:

如果只想useEffect在初始渲染后运行给定的函数,则可以给它一个空数组作为第二个参数。

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}


 类似资料:
  • useEffect React钩子将在每次更改时运行传入函数。可以对此进行优化,使其仅在所需的属性更改时才调用。 如果我想从中调用初始化函数而不在更改时再次调用它,该怎么办?假设我想加载一个实体,但加载函数不需要组件的任何数据。我们如何使用钩子来实现这一点呢? 有了钩子,这可能是这样的:

  • 问题内容: 该useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化,使其仅在所需属性更改时调用。 如果我想从中调用初始化函数而不在更改时再次调用该怎么办?假设我要加载一个实体,但是加载功能不需要组件中的任何数据。我们如何使用钩子做到这一点? 使用钩子可能看起来像这样: 问题答案: 如果只想在初始渲染后运行给定的函数,则可以给它一个空数组作为第二个参数。

  • 问题内容: 我从以下代码调用函数: 我的功能是 我怎么只能拨打一次ajax电话?所以当内容被加载并且页面不被拒绝时不加载ajax吗?我尝试做布尔变量,但什么也没做,我支持这是因为我调用了everytime函数。请给我一个想法。 谢谢 问题答案: 当您想对该事件做某事时。 确定何时已加载数据。 或在您想一次调用时使用。 参考

  • 问题内容: 我需要创建一个只能执行一次的函数,在第一次执行后,每次都不会执行。我从C++和Java知道可以完成此工作的静态变量,但我想知道是否有更优雅的方法来做到这一点? 问题答案: 如果用“将不执行”来表示“多次调用将不执行任何操作”,则可以创建一个闭包: 使用全局变量,其他代码可以重置“已执行”标志的值(无论您为它选择什么名称)。使用闭包时,其他代码都无法做到这一点,无论是偶然还是故意的。 正

  • 确保函数只被调用一次。 使用一个闭包,使用一个成为 called 的标志,并在第一次调用该函数时将其设置为 true ,以防止它被再次调用。 为了允许函数改变它的 this 上下文(比如在一个事件监听器中),必须使用function 关键字,并且提供的函数必须应用上下文。 允许使用 rest(剩余)/spread(展开) (...) 运算符为函数提供任意数量的参数。 const once = fn

  • 我有多个具有多个选择限制的无线电组,一个是by name属性,另一个是jQuery。对于每个无线电组,我在更改时将checked属性设置为false,这样每个组只能检查一个无线电。 HTML jQuery 这只适用于第一组,有什么建议吗? 编辑: 使用类选择器而不是ID: HTML jQuery