我正在测试React.useEffect,并注意到一个我无法解释的有趣行为. 当我运行下面的代码并单击该按钮几次时,我看到以下输出缺少count=1的useEffect控制台

import React from 'react';

export function App(props) {

  const [count, setCount] = React.useState(0)
  console.log('ran app')

  React.useEffect(() => {
    console.log("ran effect", count)
  }, [count < 2])

  return (
    <div className='App'>
      <button onClick={() => setCount(count + 1)}>click</button>
      <h3>{count}</h3>
    </div>
  );
}
ran app
ran effect
0
ran app // this is where I expect to see ran effect for count = 1 but I don't
ran app
ran effect
2
ran app
ran app

但是,如果我从依赖项中删除表达式count<2,我也会看到count = 1ran useeffect.

推荐答案

通常,每次渲染后都会应用效果.但是,React允许您通过将带有值的数组作为可选的第二个参数进行传递来进行定制.在你的情况下,这是[count < 2]美元.传递这样的值时,当该值更改时,效果将应用only.

在您的情况下,只有当最初为True的布尔值count < 2在Count为2时更改为False时,效果才会运行.

请看useEffect在这里https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects的官方文档

Reactjs相关问答推荐

Next.js-图像组件加载问题

TypeError:b不是React.js中的函数错误

React Context未正确更新

在动态React组件中删除事件侦听器

使用Next.js和Next-intl重写区域设置

错误:无法获取 RSC 负载.返回浏览器导航

React-router动态路径

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

ReactJS 中的图像加载顺序

解决在React测试库中的act()警告

Zod 验证模式根据另一个数组字段使字段成为必需字段

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

Redux Toolkit 配置,是否适用于全栈应用程序?

@react-three/postprocessing 没有匹配的从 three.module.js 导出以导入WebGLMultisampleRenderTarget

React:如何设置光标 Select

在复选框中react 检索选中的值

谁能根据经验提供有关 useEffect 挂钩的更多信息

如何使用 useEffect 和 if 语句 React

在react 路由dom版本6中的组件内添加路由

Select MenuItem 时 Material-ui 不更改样式