![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Hooks
文章平均质量分 80
生活本无苦,苦的是我们的欲望太多,人心本不累,累的是我们放不下的太多!
知其黑、受其白
每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。
你可以从别人那里汲取某些思想,但必须用你自己的方式加以思考!
展开
-
P10:自定义Hooks函数获取窗口大小
React Hooks阐述编写自定义函数编写组件并使用自定义函数阐述其实自定义Hooks函数和用Hooks创建组件很相似,跟我们平时用JavaScript写函数几乎一模一样,可能就是多了些React Hooks的特性,自定义Hooks函数偏向于功能,而组件偏向于界面和业务逻辑。由于差别不大,所以使用起来也是很随意的。如果是小型项目是可以的,但是如果项目足够复杂,这会让项目结构不够清晰。所以学习自定义Hooks函数还是很有必要的。编写自定义函数在实际开发中,为了界面更加美观。获取浏览器窗口的尺寸原创 2021-12-17 11:19:11 · 570 阅读 · 0 评论 -
P09:useRef获取DOM元素和保存变量
React Hooks阐述useRef 获取DOM元素阐述useRef 在工作中虽然用的不多,但是也不能缺少。它有两个主要的作用:1、用 useRef 获取 React JSX 中的DOM元素,获取后你就可以控制DOM的任何东西了。但是一般不建议这样来做,React界面的变化可以通过状态来控制。2、用 useRef 来保存变量,这个在工作中也很少能用到,我们有了 useContext 这样的保存其实意义不大,但是这是学习,也要把这个特性讲一下。useRef 获取DOM元素界面上有一个文本框,原创 2021-12-17 11:02:24 · 2264 阅读 · 0 评论 -
P08:useMemo优化React Hooks程序性能
React HooksuseMemo 优化性能useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。使用 function 的形式来声明组件,失去了shouldCompnentUpdate(在组件更新之前)这个生命周期,也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中,也不再区分 mount 和 update 两个状态,这意味着函数组件的每一次调用都会执行内部的所有逻辑,就带来了非常大的性能损耗。useMemo 和 useCallback 都是解决上原创 2021-12-17 10:40:32 · 229 阅读 · 0 评论 -
P07:用useReducer实现Redux效果的小案例
React Hooks阐述理论上的可行性编写基本UI组件编写颜色共享组件color.js在color.js中添加Reducer通过dispatch修改状态阐述在实际使用中,useContext 和 useReducer是可以实现类似Redux的效果,并且一些简单的个人项目,完全可以用下面的方案代替Redux,这种做法要比Redux简单一些。因为 useContext 和 useReducer在我之前的文章中已经学习过了,所以我们把精力就放在如何模拟出Redux的效果。如果你目前还没掌握基本的语法,可以原创 2021-12-17 10:13:54 · 447 阅读 · 0 评论 -
P06:useReducer介绍与使用方法
React Hooks阐述reducer是什么?useReducer 的使用阐述在之前的文章我们学习了useContext函数,那本文就带大家学习一下useReducer,因为他们两个很像,并且合作可以完成类似的Redux库的操作。在开发中使用useReducer可以让代码具有更好的可读性和可维护性,并且会给测试提供方便,所以我们有必要彻底的学习一下useReducer。本文我们只是简单的学习一下useReducer语法和使用方法,尽量避免Redux的一些操作。这样讲更容易让不了解Redux的小伙伴原创 2021-12-17 10:13:28 · 431 阅读 · 0 评论 -
P05:useContext 让父子组件传值更简单
React Hooks阐述createContext 函数创建 contextuseContext 接收上下文变量阐述有了useState 和 useEffect 已经可以实现大部分的业务逻辑了,但是React Hooks中还是有很多好用的Hooks函数的,比如 useContext 和 useReducer。在用类声明组件时,父子组件的传值是通过组件属性和props进行的,那现在使用方法(Function)来声明组件,已经没有了constructor 构造函数也就没有了props的接收,那父子组件的原创 2021-12-17 10:13:08 · 740 阅读 · 0 评论 -
P04:useEffect 实现 componentWillUnmount 生命周期函数
React Hooks阐述useEffect 解绑副作用ReactHooksDemo\demo01\src\Example.jsuseEffect的第二个参数总结阐述在写React应用的时候,在组件中经常用到 componentWillUnmount 生命周期函数(组件将要被卸载时执行)。比如我们的定时器要清空,避免发生内存泄漏;比如登录状态要取消掉,避免下次进入信息出错。所以这个生命周期函数也是必不可少的,本文就用 useEffect 来实现这个生命周期函数,并讲解一下 useEffect 容易踩的原创 2021-12-16 18:07:21 · 2332 阅读 · 0 评论 -
P03:useEffect代替常用生命周期函数
React Hooks阐述用 Class 的方式为计数器增加生命周期函数用 useEffect 函数来代替生命周期函数useEffect 两个注意点示例ReactHooksDemo\demo01\src\index.jsReactHooksDemo\demo01\src\Example5.js阐述在用Class制作组件时,经常会用生命周期函数,来处理一些额外的事情(副作用:和函数业务主逻辑关联不大,特定时间或事件中执行的动作,比如Ajax请求后端数据,添加登录监听和取消登录,手动修改DOM等等)。在R原创 2021-12-16 17:22:29 · 748 阅读 · 0 评论 -
P02:useState() 的介绍和多状态声明
React HooksuseState 的介绍多状态声明的注意事项示例ReactHooksDemo\demo01\src\index.jsReactHooksDemo\demo01\src\Example3.jsReactHooksDemo\demo01\src\Example.jsReactHooksDemo\demo01\src\Example2.jsuseState 的介绍useState是react自带的一个hook函数,它的作用是用来声明状态变量。本文从三个方面来看useState的用法,分原创 2021-12-16 16:59:24 · 2060 阅读 · 0 评论 -
P01:React Hooks介绍及环境搭建
React HooksReact Hooks 简介使用 create-react-app 创建项目React Hooks 编写形式对比原始写法React Hooks 写法React Hooks 简介2018年底FaceBook的React小组推出Hooks以来,所有的React的开发者都对它大为赞赏。React Hooks就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state,有Hooks可以不再使用类的形式定义组件了。这时候你的认知也要发生变化了,原来把组件分为有状态组件和无状原创 2021-12-16 16:19:40 · 514 阅读 · 0 评论