hook入门学习心得

简介: Hook是函数式组件,相对于类组件来讲更容易理解和使用,接下来我将简单介绍如何去理解和使用hook。

      Hook是函数式组件,相对于类组件来讲更容易理解和使用,接下来我将简单介绍如何去理解和使用hook。

一、State Hook —-- 声明和修改变量

1.png

例子中声明了一个函数名为HomePagehook组件,功能是简单的计数器。useState就是一个hook,在函数组件中调用这个hook会返回一对值,当前状态和更新它的函数。可以这样去理解,当前状态count是全局可用的变量名,并被初始化为0,在触发函数的情况下,setCount就会更新count的值。

二、Effect Hook ---- 操作副作用

2.png

React 渲染组件时,会保存已使用的 effect,并在更新完 DOM 后执行它。由于useEffect在组件内部,所以可以直接访问到组件内部所有的state及相关props值,count值每变化一次就会调用一次useEffect函数。useEffect相当于生命周期中的componentDidMountcomponentDidUpdate componentWillUnmount 这三个函数的组合。组件在每次渲染后会执行useEffect的第一个参数,useEffect每次渲染时第二个参数默认为空数组,传入count仅在count更改时更新,且第二个参数可接受多个变量。

三、自定义hook

自定义hook是一种自然遵循 Hook 设计的约定,完全可以理解为是一个独立出来以use开头的函数,在不同组件中每次调用hook都会获取到完全独立的stateeffect,所以当两个组件同时调用同一自定义的hook组件时,这两个组件不会共享自定义hook中的state

3.png

四、useRef

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。

本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的盒子。它可以很方便地保存任何可变值,其类似于在 class 中使用实例字段的方式。这是因为它创建的是一个普通 Javascript 对象。 useRef() 和自建一个 {current: ...} 对象的唯一区别是,useRef 会在每次渲染时返回同一个 ref 对象。

4.png

以上就是使用hook常见的常用的部分的知识,更多内容请参考官方网站进行深入学习,链接如下:

https://react.docschina.org/docs/hooks-intro.html

相关文章
|
6月前
|
JavaScript 开发者
🚀Svelte原理和进阶看这篇就够了🚀2
🚀Svelte原理和进阶看这篇就够了🚀
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写call得实现1
前端学习笔记202306学习笔记第三十八天-手写call得实现1
29 0
|
4月前
|
SQL 数据可视化 关系型数据库
一文快速搞懂系列__一文快速搞懂SuperSet[实战案例]
一文快速搞懂系列__一文快速搞懂SuperSet[实战案例]
31 0
|
6月前
|
缓存 JavaScript 算法
🚀Svelte原理和进阶看这篇就够了🚀1
🚀Svelte原理和进阶看这篇就够了🚀
|
6月前
|
程序员 API Windows
[笔记]Windows核心编程《番外篇》几种Hook类型
[笔记]Windows核心编程《番外篇》几种Hook类型
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写apply得实现1
前端学习笔记202306学习笔记第三十八天-手写apply得实现1
40 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写apply得实现2
前端学习笔记202306学习笔记第三十八天-手写apply得实现2
28 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写call得实现2
前端学习笔记202306学习笔记第三十八天-手写call得实现2
34 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写apply得实现3
前端学习笔记202306学习笔记第三十八天-手写apply得实现3
32 0
手把手一步步教你使用rpcms的模板Hook
rpcms可以制作模板和插件,有时候做的模板需要自定义一些功能,但又不想通过插件实现,那样用户在使用模板的时候,还必须配套插件才可以。为避免这写繁琐的操作,让用户使用模板更方便,我们可以使用模板的Hook功能。 这个功能使用起来也很方便,只需要在你的模板文件夹中创建Hook.class.php,文件内容如下:
手把手一步步教你使用rpcms的模板Hook

相关实验场景

更多