react 事件 (笔记)

最新推荐文章于 2025-09-11 00:47:48 发布
原创 最新推荐文章于 2025-09-11 00:47:48 发布 · 3.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #react事件 #事件 #react input #react 焦点事件

本文介绍了React中事件处理的基本方法及如何通过事件更新组件的状态。涵盖了事件绑定、事件对象的使用、状态更新函数this.setState()的应用等核心概念，并通过多个实例展示了具体的实现方式。

1.事件处理函数的使用

组件：

  • React 自有方法
  • 用户定义方法
事件处理函数可以接受event参数；
如之前用过的：
[html]  view plain  copy
  1. //监听内容的变化并且记录在状态中  
  2. handleChange: function(event){  
  3.     this.setState({inputText: event.target.value});  
  4. },  
  5. //添加提交按钮并打印结果  
  6. handleSubmit: function () {  
  7.     console.log("reply To" + this.props.selectName + "\n"  
  8.              + "\n" + this.state.inputText);  
  9. },  

编写完事件后需要绑定事件处理函数
如：
[html]  view plain  copy
  1. onChange={this.handleChange}  
[html]  view plain  copy
  1. <pre class="html" name="code">onChange={this.handleChange}  
 


 事件；

 


 1》触摸类事件：只会在移动设备中产生，对手的移动位置进行检测并做出响应

 

  • onTouchCancel:
  • onTouchEnd
  • onTouchMove
  • onTouchStart
 

2》键盘类事件：
 

  • onKeyDown
  • onKeyUp
  • onKeyPress
 


 3》剪切类事件

 

  • onCopy
  • onCut
  • onPaste
 


 4》 表单类事件

 

  • onChange
  • onInput
  • onSubmit
 


 5》 焦点类事件

 

  • onFocus ： 获得焦点
  • onBlur ： 失去焦点
 


 6》UI元素： 元素或页面的滚动事件

 

  • onScroll
 


 7》滚动事件：监听滚动位置，方向

 

  • onWheel
 


 8》鼠标类事件：

 

  • onClick
  • onContextMenu ：右键，上下文菜单
  • onDoubleClickc
  • onMouseEnter
  • onMouseDown
  • onMouseLeave
  • onMouseMove
  • onMouseOut
  • onMouseOver
  • onMouseUp
 


 9》鼠标拖拽事件： 上传内容

 

  • onDrop
  • onDrag
  • onDragEnd
  • onDragEnter
  • onDragExit
  • onDragLeave
  • onDragOver
  • onDragStart
 


 实例1：

 

 
 
 
  
 
   
 
    [html] 
    view plain
     copy 
    
 
    
 
    
   
 
  
 
  
  1.  <!DOCTYPE html>  
  2.  <html>  
  3.  <head lang="en">  
  4.      <meta charset="UTF-8">  
  5.      <title></title>  
  6.      <script src="build/react.js"></script>  
  7.      <script src="build/JSXTransformer.js"></script>  
  8.  </head>  
  9.  <body>  
  10.      <script type="text/jsx">  
  11.          var style = {  
  12.              color : "red",  
  13.              border: "1px #000 solid"  
  14.          };  
  15.          var HelloWorld = React.createClass({  
  16.              handleChange: function (event) {  
  17.                  console.log(event.target.value);  
  18.              },  
  19.              render: function () {  
  20.                  return <div>  
  21.                      <input onChange={this.handleChange} />  
  22.                  </div>;  
  23.              },  
  24.          });  
  25.          React.render(<div style={style}>  
  26.                  <HelloWorld></HelloWorld>  
  27.              </div>, document.body);  
  28.      </script>  
  29.  </body>  
  30.  </html>  
 
 
 
 
 

 


 
 

 


 
 

 


 
 

 


 2 事件对象：

 

 
 
 
  
 
   
 
    [html] 
    view plain
     copy 
    
 
    
 
    
   
 
  
 
  
  1.  event.target.value  
 
 
 

 


 
 

 


 target：事件对象的属性， 事件应得DOM元素

 


 
 

 


 事件对象的属性：

 


 1》通用属性

 

  • boolean  bubbles : 事件是否可以冒泡
  • boolean cancelable : 事件是否可以取消
  • DOMEventTarget currentTarget :
  • boolean defaultPrevented : 事件是否禁止默认行为
  • number eventPhase : 事件所处的阶段
  • boolean isTrusted : 事件是否可信，可信事件即用户自定义触发的事件，不可信事件即用js代码触发的事件
  • DOMEvent nativeEvent  使用原生的浏览器发出的事件对象
  • void preventDefault() : 禁止默认行为
  • void stopPropagation() ： 禁止冒泡
  • DOMEventTarget target:
  • number timeStamp
  • string type
 


 2》不同事件对象特有的属性

 


 
 

 


 i  剪切事件：

 

  • DOMDataTransfer clipboardDate : 得到剪切数据
 


 ii 键盘事件：

 

  • boolean altKey ; 是否按下alt键
  • Number charCode ；按键的编码; 字符编码
  • boolean ctrlKey ；是否按下ctrl键
  • function getModifierState(key) ; 是否按下辅助按键ctrl,shift
  • String key
  • Number keyCode; 按键编码；非字符
  • String locale ; 本地化的字符串
  • Number location ；位置
  • boolean metaKey; win键
  • boolean repeat ；按键是否重复
  • boolean shiftKey； 是否按下shift
  • Number which ; 通用化的charCode和keyCode
 


 iii 焦点

 

  • DOMEventTarget relatedTarget :  相关的角度
 


 iv 鼠标事件

 

  • boolean altKey；
  • Number button；
  • Number buttons；
  • Number clientX;
  • Number clientY; 当前鼠标所处的坐标, 顶点是浏览器窗口的左上角
  • boolean ctrlKey
  • function getModifierState(key);
  • boolean metaKey;
  • Number pageX
  • Number pageY; 顶点时html页面的左上角
  • DOMEventTarget relatedTarget ;
  • Number screenX；
  • Number scrrenY; p 
  • boolean shiftKey;
 


 
 

 


 
 

 


 v 触摸事件：

 

  • boolean altKey
  • DOMTouchList changedTouchs
  • boolean ctrlKey
  • function getModifierState(Key)
  • boolean metaKey
  • boolean shiftKey
  • DOMTouchList targetTouches
  • DOMTouchList touches
     
 


 
 

 


 vi UI元素

 

  • Number detail ： 滚动的距离
  • DOMAbstractView view ： 视图
 

vii 滚动：
 

  • Number deltaMode: 单位
  • Number deltaX
  • Number deltaY
  • Number deltaZ 在坐标轴上对应的位置
 


 实例1

 

 
 
 
  
 
   [html] 
   view plain
    copy 
   
 
   
 
   
  
 
 
 
 
  1.  <!DOCTYPE html>  
  2.  <html>  
  3.  <head lang="en">  
  4.      <meta charset="UTF-8">  
  5.      <title></title>  
  6.      <script src="build/react.js"></script>  
  7.      <script src="build/JSXTransformer.js"></script>  
  8.  </head>  
  9.  <body>  
  10.      <script type="text/jsx">  
  11.          var HelloWorld = React.createClass({  
  12.              getInitialState: function () {  
  13.                  return{  
  14.                      backgroundColor:'#FFFFFF'  
  15.                  }  
  16.              },  
  17.              handleWheel: function (event) {  
  18.                  var newColor=(parseInt(this.state.backgroundColor.substr(1),16) +  
  19.                          event.deltaY * 997).toString(16);  
  20.                  newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();  
  21.                  this.setState({  
  22.                      backgroundColor: newColor  
  23.                  });  
  24.              },  
  25.              render: function () {  
  26.                  console.log(this.state);  
  27.                  return <div onWheel={this.handleWheel} style={this.state}>  
  28.                      <p>Hello World</p>  
  29.                  </div>;  
  30.              },  
  31.          });  
  32.          React.render(  
  33.                  <HelloWorld></HelloWorld>  
  34.                  , document.body);  
  35.      </script>  
  36.  </body>  
  37.  </html>  
 

 

 

 


 实例2

 

 
 
 
  
 
   
 
    [html] 
    view plain
     copy 
    
 
    
 
    
   
 
  
 
  
  1.  <!DOCTYPE html>  
  2.  <html>  
  3.  <head lang="en">  
  4.      <meta charset="UTF-8">  
  5.      <title></title>  
  6.      <script src="build/react.js"></script>  
  7.      <script src="build/JSXTransformer.js"></script>  
  8.  </head>  
  9.  <body>  
  10.      <script type="text/jsx">  
  11.          var HelloWorld = React.createClass({  
  12.              getInitialState: function () {  
  13.                  return {  
  14.                      password: ''  
  15.                  }  
  16.              },  
  17.              handleKeyPress: function (event) {  
  18.                  this.setState({  
  19.                      password: this.state.password + event.which  
  20.                  });  
  21.                  console.log(this.state)  
  22.              },  
  23.              handleChange: function (event) {  
  24.                  event.target.value = '';  
  25.              },  
  26.              render: function () {  
  27.                  return <div>  
  28.                      <input onKeyPress={this.handleKeyPress} onChange={this.handleChange}/>  
  29.                      <p style={{'display':this.state.password.indexOf('495051')>=0 ? 'inline'  
  30.                          :'none'  
  31.                      }}>You got it</p>  
  32.                  </div>  
  33.              },  
  34.          });  
  35.          React.render(  
  36.                  <HelloWorld></HelloWorld>  
  37.                  , document.body);  
  38.      </script>  
  39.  </body>  
  40.  </html>  
 
 
 
 
 
 
 

 


 
 

 


 3  事件和状态关联

 


 this.setState()

 


 
 

 


 实例1：

 

 
 
 
  
 
   
 
    [html] 
    view plain
     copy 
    
 
    
 
    
   
 
  
 
  
  1.  <!DOCTYPE html>  
  2.  <html>  
  3.  <head lang="en">  
  4.      <meta charset="UTF-8">  
  5.      <title></title>  
  6.      <script src="build/react.js"></script>  
  7.      <script src="build/JSXTransformer.js"></script>  
  8.  </head>  
  9.  <body>  
  10.      <script type="text/jsx">  
  11.          var HelloWorld = React.createClass({  
  12.              getInitialState: function () {  
  13.                  return {  
  14.                      x:0,  
  15.                      y:0  
  16.                  }  
  17.              },  
  18.              handleMouseMove: function (event) {  
  19.                  this.setState({  
  20.                      x:event.clientX,  
  21.                      y:event.clientY  
  22.                  })  
  23.              },  
  24.              render: function () {  
  25.                  return <div onMouseMove={this.handleMouseMove} style={{  
  26.                      height:'1000px',  
  27.                      width:'700px',  
  28.                      backgroundColor: 'gray'  
  29.                  }}>  
  30.                      {this.state.x + ', ' + this.state.y}  
  31.                  </div>  
  32.              },  
  33.          });  
  34.          React.render(  
  35.                  <HelloWorld></HelloWorld>  
  36.                  , document.body);  
  37.      </script>  
  38.  </body>  
  39.  </html>  
 
 
 


                

        

    


  



    



                



	

		

			

				
					
React事件发射器/ pubsub-React开发

				
			

			

				

					05-27
				

			

		

		

			
				
很棒的手套库的React包装器react-mitt React事件发射器/ pubsub很棒的手套库的React包装器实时演示https://codesandbox.io/s/react-mitt-demo-n11ii安装$ npm install react-mitt用法将您的应用程序包装在MittProvider组件中，为后代提供对useMitt钩子的访问权限，以从“ react-mitt”函数App（）中返回事件pubsub import {MittProvider} {
}}示例一旦包装了应用程序



			
		

	



                

            
              



	

		

			

				
					
React学习笔记之事件处理（二）

				
			

			

				

					12-09
				

			

		

		

			
				
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...

			
		

	



              


  
              

                


	

		

			

				
					
React学习笔记（5）--事件

					
热门推荐

				
			

			

				

					thystar的专栏
				

				

					08-29
					
					1万+
					
				

			

		

		

			
				
1.事件处理函数的使用
组件：

React 自有方法用户定义方法
事件处理函数可以接受event参数；
如之前用过的：
        //监听内容的变化并且记录在状态中
        handleChange: function(event){
            this.setState({inputText: event.target.value});
        

			
		

	





	

		

			

				
					
react基础--事件的写法

				
			

			

				

					riguangzhixia的博客
				

				

					01-14
					
					231
					
				

			

		

		

			
				
谈react事件写法前，先梳理一下关于react的学习的思路。

和其他框架一样，react的学习依次要解决几个问题：

1.框架如何运行；

2.页面样式、事件、数据的写法；

3.组件----组建中数据、事件的写法，组件间的通讯（数据传递）；

4.路由----页面的跳转

5.数据请求----ajax

6.数据的管理----全局的状态切换、数据的缓存

掌握事件写法的重要性不言而喻，以下梳...

			
		

	



		

			
		



	

		

			

				
					
告别繁琐！Svelte与React输入事件处理的革命性差异

					
最新发布

				
			

			

				

					gitblog_00583的博客
				

				

					09-11
					
					408
					
				

			

		

		

			
				
你是否还在为React中input事件处理的繁琐而头疼？是否厌倦了写一堆useState和onChange样板代码？本文将彻底解析Svelte与React在输入事件处理上的核心差异，让你一文掌握两种框架的设计哲学与实战技巧。读完本文，你将能够：
- 理解Svelte双向绑定的底层原理
- 掌握React受控组件的优化策略
- 学会根据场景选择最适合的框架方案

## 数据流向：从单向到双向的范式转...

			
		

	





	

		

			

				
					
React中事件的写法总结

				
			

			

				

					chen801090的博客
				

				

					04-24
					
					425
					
				

			

		

		

			
				
首先我们先查看官方规则或者官方文档的介绍，React的事件处理和DOM元素很相似，但是语法上是有不同的：

1、react事件采用驼峰命名法，而不是纯小写。

驼峰命名法(camelCase)：命名的全部全称， 首个单词全部小写后面每个单词的首字母大写。



eg: getElementById onClick



2、使用JSX语法的时候需要传入一个函数作为事件处理函数， 而不是一个字符...

			
		

	





	

		

			

				
					
react总结之事件的写法

				
			

			

				

					my_love_download的博客
				

				

					06-26
					
					353
					
				

			

		

		

			
				
开发中的时候,总是会写各种各样的事件,来实现去后台数据交互,页面之间的交互等!在react中事件的写法有很多种,当然这些写法的最终目的是一样的,只是在代码层面所展示的有些区别!下面总结一下,我所知道的事件的各种写法!(这里明确一点,react中事件都是使用的驼峰命名的规则)
第一种写法
第一种写法是使用箭头函数
import React, { Component } from 'react'
import ReactDom from 'react-dom'
 class TestClick extends 

			
		

	





	

		

			

				
					
react 学习笔记

				
			

			

				

					11-16
				

			

		

		

			
				
学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。  一、React 组件生命周期  React 组件生命周期是指组件从创建到销毁的整个过程。生命周期...

			
		

	





	

		

			

				
					
React笔记

				
			

			

				

					02-24
				

			

		

		

			
				
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start  在开发模式下运行应用程序。 打开在浏览器中查看。  如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm ...

			
		

	





	

		

			

				
					
react.js.md  react学习笔记

				
			

			

				

					03-21
				

			

		

		

			
				
react.js.md react学习笔记

			
		

	





	

		

			

				
					
React的事件大全

				
			

			

				

					weixin_33877092的博客
				

				

					05-24
					
					698
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
react的事件大全

				
			

			

				

					Wang_MengHan的博客
				

				

					07-15
					
					2976
					
				

			

		

		

			
				
有以下几种事件类型    React的事件
中断类事件
定时触发的事件
复制类事件
组件类事件
键盘类事件
表单类事件
焦点类事件
鼠标类事件
选择器类事件
触摸类事件
插件类事件
轮事件
多媒体类事件
图片类事件
动画类事件
转换类事件
中断类事件-stoppropagation和preventdefault用于中断事件的传递

preventdefault 用于组织默认事件的执行，但是绑定在上面的其他事件可以正常执行
例如,

<a src="http://www.baidu.com" onCli

			
		

	





	

		

			

				
					
React常用事件

				
			

			

				

					diaowojian9497的博客
				

				

					10-30
					
					200
					
				

			

		

		

			
				
一、shouldComponentUpdate()  是否需要更新当前ReactNode
二、componentWillMount 相当于formcreate事件，插件第一次被创建时执行
三、componentWillUnmount 相当于destroy事件，当组件被卸载时执行
四、componentDidMount 相当于formshow事件
五、getDefaultPr...

			
		

	





	

		

			

				
					
react

				
			

			

				

					qq_46222031的博客
				

				

					06-07
					
					628
					
				

			

		

		

			
				
1. 事件机制在document处监听了所有事件。减少消耗，统一处理。冒泡的事件也非原生事件，而是合成事件，调用  是无效的，而应该调用 。2. react事件与普通事件的不同        1.原生事件全小写，react事件小驼峰        2.事件函数处理语法，原生事件字符串，react事件为函数        3.不能用return false 来组织浏览器的默认行为，用prenventDefault3. react对事件合成做了两件事4.HOC，render props,hooks（高优，需要自

			
		

	





	

		

			

				
					
react-native 事件发射器

				
			

			

				

					weixin_42754390的博客
				

				

					06-19
					
					246
					
				

			

		

		

			
				
为了向js传递事件我们需要在原生页面用到RCTDeviceEventEmitter，它是原生模块和js之间的一个事件发射器；
//eventName是要发射的事件的名称，params为事件携带的参数；
private void sendEvent(ReactContext reactContext,String eventName, @Nullable WritableMap params) {
    reactContext.getJSModule(DeviceEventManagerModule.RC

			
		

	





	

		

			

				
					
React事件

				
			

			

				

					过客如期的博客
				

				

					07-13
					
					809
					
				

			

		

		

			
				
一，react和原生事件的区别
1.事件采用驼峰式命名
2.不能再函数内部使用return false 来阻止事件默认行为
3.事件接收一个函数声明，而不是函数调用的形式
二，事件的注意事项
1.事件函数内部的this指向问题，这个是js的this指向问题，可使用箭头函数或者在constructor里主动使用bind绑定this为当前对象。
三，react事件传递参数
1.两种方式，一种通过bind,一种通过箭头函数，
注意，使用箭头函数需要主动传入事件对象e, 使用bind会隐式传入。
<butto

			
		

	





	

		

			

				
					
什么是 React 中的事件？

				
			

			

				

					My_wife_QBL的博客
				

				

					08-04
					
					1394
					
				

			

		

		

			
				
React 中的事件系统为开发者提供了高效、易用的方式来管理用户交互。通过合成事件、事件处理函数、事件对象等机制，React 使得事件处理变得更加简洁和一致。掌握 React 中的事件处理是构建高性能、响应式应用的基础。在实际开发中，合理使用事件绑定、清理事件、以及遵循最佳实践，可以帮助你编写出更健壮的代码。希望本文能够帮助你更好地理解 React 中的事件机制，从而在项目中灵活运用，提升用户体验。

			
		

	





	

		

			

				
					
React中事件的用法

				
			

			

				

					hahahhahahahha123456的博客
				

				

					08-13
					
					1094
					
				

			

		

		

			
				
一、事件处理函数的使用

鼠标事件：

onClick

onContextMenu

onDoubleClick

onMouseDown

onMouseEnter

onMouseLeave

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onDrop

onDrag

onDragEnd

onDragEnter

onDragExit
...

			
		

	





	

		

			

				
					
React自学笔记（二）---react事件定义方法的三种方式

				
			

			

				

					qq_41985467的博客
				

				

					12-10
					
					749
					
				

			

		

		

			
				
衔接上一章内容，
在App.js中调用了home组件，在Home.js页面中编写：
三种方法：（文中用的的get方法）
第一种：
//方法定义中的写法
 getData(){
        alert(this.state.msg)
    }
//点击事件
<button onClick={this.getData.bind(this)}>获取数据--获取第一种this指向的方法&...

			
		

	





	

		

			

				
					
react hooks笔记

				
			

			

				

					04-03
				

			

		

		

			
				
<think>嗯，用户想要了解React Hooks的笔记，我需要整理一个结构清晰的回答。首先，我得回忆一下React Hooks的核心内容和常见钩子。React Hooks是在React 16.8引入的，允许函数组件使用状态和其他React特性，这样就不用写类组件了。对吧？

那应该先介绍Hooks的基本概念，比如为什么需要Hooks，解决了类组件的哪些问题，比如复杂的生命周期和this绑定问题。然后分点讲常用的内置Hooks，比如useState、useEffect、useContext这些。每个Hook要解释作用、基本用法和注意事项。

比如useState是用来管理状态的，例子可能是一个计数器。useEffect处理副作用，要区分清楚依赖数组的作用，还有清理函数。useContext用于跨组件传递数据，可能需要配合createContext使用。然后还有useReducer，类似于Redux的状态管理，适合复杂状态逻辑。自定义Hooks也很重要，可以封装可复用的逻辑，比如useFetch这样的例子。

然后可能要考虑Hooks的使用规则，比如只在顶层调用，不在循环或条件中使用，还有只在React函数组件或自定义Hook中使用。这些规则用户容易犯错，需要强调。

另外，可能需要提到常见的自定义Hooks案例，比如获取数据、表单处理、定时器这些，让用户知道如何实际应用。还有性能优化相关的Hook，比如useMemo和useCallback，避免不必要的渲染。

需要检查是否有遗漏的重要Hook，比如useRef，用于访问DOM或保存可变值，或者useLayoutEffect和useEffect的区别。还有Hooks的优势，比如代码更简洁，逻辑复用更方便，函数式组件的普及。

用户可能需要实际例子来理解，所以每个部分最好配上简单的代码示例，但根据用户要求，数学公式用LaTeX，但代码可能不需要，不过用户问题里没有提到代码格式，可能正常写就行。不过用户问题主要是笔记介绍，所以结构清晰，分点说明比较重要。

还要注意回答使用中文，避免专业术语翻译问题，比如保持术语正确，比如“副作用”、“状态”等。可能需要检查是否有错误，比如useEffect的依赖数组空的时候相当于componentDidMount，对吗？是的。还有自定义Hook的命名必须以use开头，这是规则之一。

总结下来，回答的结构应该是：简介，常用内置Hooks分点说明，使用规则，自定义Hooks，常见问题或注意事项，优势总结。这样用户能一步步了解Hooks的核心内容，注意事项和实际应用。</think>以下是一份结构清晰的React Hooks核心知识笔记整理：

---

### 一、Hooks 核心概念
1. **作用**  
   使函数组件拥有类组件的特性（状态管理、生命周期等），**解决类组件的3大痛点**：  
   - 状态逻辑难以复用  
   - 复杂组件难以理解（尤其是生命周期函数）  
   - `this`指向问题  

2. **基本原则**  
   - 只在**函数组件顶层**调用Hook  
   - 只能在**React函数组件**或**自定义Hook**中使用  

---

### 二、常用内置Hooks详解

#### 1. `useState` - 状态管理  
```javascript
const [state, setState] = useState(initialValue);
```
- **典型场景**：组件内部状态（如计数器、表单输入）  
- **注意**：异步更新需用函数形式 `setState(prev => prev + 1)`  

#### 2. `useEffect` - 副作用处理  
```javascript
useEffect(() => {
  // 副作用操作
  return () => { /* 清理函数 */ };
}, [dependencies]);
```
- **依赖项规则**：  
  - 空数组 `[]`：仅在挂载时执行（类似`componentDidMount`）  
  - 不传：每次渲染都执行  
  - 传值：依赖变化时执行  
- **清理机制**：返回函数在组件卸载或下次effect前执行  

#### 3. `useContext` - 跨组件传值  
```javascript
const value = useContext(MyContext);
```
- 需配合`createContext`使用  
- 替代`Context.Consumer`的嵌套写法  

#### 4. `useReducer` - 复杂状态管理  
```javascript
const [state, dispatch] = useReducer(reducer, initialState);
```
- **适用场景**：多状态关联、复杂更新逻辑  
- 可替代`useState`+多状态的情况  

---

### 三、性能优化Hooks

#### 1. `useMemo` - 缓存计算结果  
```javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

#### 2. `useCallback` - 缓存函数  
```javascript
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);
```

---

### 四、自定义Hook开发
1. **命名规则**：必须以`use`开头（如`useFetch`）  
2. **典型场景**：  
   ```javascript
   // 示例：数据请求Hook
   function useFetch(url) {
     const [data, setData] = useState(null);
     useEffect(() => {
       fetch(url).then(res => res.json()).then(setData);
     }, [url]);
     return data;
   }
   ```

---

### 五、常见问题与注意事项
1. **循环/条件中使用Hook**  
   ❌ 错误示例：  
   ```javascript
   if (condition) {
     const [value] = useState(); // 违反Hook调用顺序
   }
   ```

2. **闭包陷阱**  
   - 在`useEffect`/`useCallback`中访问过时状态时，需通过依赖项或`useRef`解决

---

### 六、Hooks优势总结
- **逻辑复用**：通过自定义Hook取代HOC/Render Props  
- **代码简洁**：函数式编程风格，减少模板代码  
- **类型友好**：对TypeScript支持更自然  

---

如需深入某个知识点（如具体项目实践案例、原理剖析），可告知具体方向进一步展开说明。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值