hook入门学习心得

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

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

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

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

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

三、自定义hook

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

四、useRef

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

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

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

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

本文转自网络，原文链接：https://developer.aliyun.com/article/784764
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！