首页 > 其他分享> 文章详细

React hooks总结

2022-06-30 00:35:44 阅读：161 来源： 互联网

标签：总结函数 dom hooks React useState 组件执行

hooks

hooks介绍

概念：一套能够使函数组件更强大，更灵活的钩子
优势：告别难以理解的class、解决业务逻辑难以拆分的问题、方便状态逻辑复用
注意点：hooks和class写法共存、hooks只能在函数组件中使用

useState

作用：为函数组件提供数据状态（state）
语法：const [ count, setCount ] = useState(0)
- count：数据状态、setCount：修改数据的对应方法
注意点：
- useState的初始参数只会在组件首次渲染时使用，再次更新时会忽略
- 每次通过setCount修改状态都会引起组件重新渲染
- useState可以调用多次，每次都是独立的
- useState不可以在除了函数组件之外的地方，比如分支语句、循环语句、内部函数中执行
- 如果初始值需要计算才能得到可以使用回调函数的写法来确定useState的初始值

useEffect

作用：为react组件提供副作用处理
- 什么是副作用：函数组件的主要作用就是通过数据渲染UI，除了这个之外的操作就是副作用
  - ajax
  - 手动修改dom
  - localStore操作
依赖项控制执行时机
- 默认状态：首次执行 + 每次组件更新执行
- 添加空[]：首次执行
- 添加特定依赖 [count]：首次执行 + 依赖值发生变化执行

清除副作用

useEffect(()=> {
	return () => {
		// 清理副作用
	}
})

useEffect都是在组件dom渲染更新完毕后才执行

useRef

作用：获取真实dom或组件实例对象
实现步骤：导入useRef函数，执行useRef并传入null，返回值为一个对象，内部有一个current属性存放拿到的dom对象（组件实例），通过ref绑定要获取的元素或者组件

useContext

作用：在hooks下如何跨组件传递数据
实现步骤：使用 createContext 创建 Context对象，在顶层组件通过 Provider 提供数据，在底层组件通过 useContext(Context) 函数获取数据
扩充：如果提供数据是静态不变 - index.js 包裹，如果提供过的数据需要变化 - app.js 可以方便更改数据

标签：总结,函数,dom,hooks,React,useState,组件,执行
来源： https://www.cnblogs.com/bingquan1/p/16425371.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。