首页 > web前端 > js教程 > 正文

javascript的React Hooks是什么_如何使用useState和useEffect?

夜晨
发布: 2025-12-21 21:43:02
原创
689人浏览过
React Hooks是React 16.8引入的函数,使函数组件支持状态(useState)和副作用(useEffect);useState用于声明和更新状态变量,可多次调用管理多个独立状态;useEffect用于处理数据获取、订阅等副作用,依赖数组控制执行时机,并支持清理函数。

javascript的react hooks是什么_如何使用usestate和useeffect?

React Hooks 是 React 16.8 引入的一组函数,让函数组件也能使用状态(state)和副作用(side effects),不用写 class 组件。

useState:管理组件的本地状态

它让你在函数组件里声明一个状态变量,并提供更新它的函数。

基本用法是解构出状态值和设置器函数:

const [count, setCount] = useState(0);

这里 count 是当前状态值,setCount 是修改它的函数,初始值是 0。

立即学习Java免费学习笔记(深入)”;

  • 每次调用 setCount(比如 setCount(count + 1)),组件会重新渲染,且 count 取得新值
  • 可以多次调用 useState 管理多个独立状态,比如同时有 nameage
  • 初始值可以是任意类型(数字、字符串、对象、数组),甚至可以是函数(用于惰性初始化):useState(() => computeInitialValue())

useEffect:处理副作用(如数据获取、订阅、手动 DOM 操作)

它替代了 class 组件中的 componentDidMountcomponentDidUpdatecomponentWillUnmount 的组合逻辑。

Stable Diffusion
Stable Diffusion

目前最强的开源AI绘画工具

Stable Diffusion 49
查看详情 Stable Diffusion

基本结构:

useEffect(() => {
  // 副作用逻辑,比如 fetch 数据或添加事件监听
  return () => {
    // 清理函数(可选),类似 componentWillUnmount
  };
}, [依赖数组]);
  • 不传第二个参数:每次渲染后都执行(含首次)——慎用,容易导致无限循环或性能问题
  • 传空数组 []:只在组件挂载和卸载时执行(类似 componentDidMount + componentWillUnmount)
  • 传非空数组(如 [count]):仅当数组中某个值变化时才重新执行
  • 清理函数会在下次 effect 运行前或组件卸载时执行,用来清除定时器、取消请求、移除监听等

一个小例子:计数器 + 页面标题同步

把 count 显示在界面上,同时让 document.title 随之更新:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `你点击了 ${count} 次`; // 副作用
  }, [count]); // 仅当 count 改变时更新 title

  return (
    

      

当前计数:{count}


      
    

  );
}

基本上就这些。Hooks 让逻辑更聚焦、复用更容易,但要注意依赖数组别漏写、别写错,否则容易出 bug。

以上就是javascript的React Hooks是什么_如何使用useState和useEffect?的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号