分类：Hooks

2021
09-10

React Hooks使用常见的坑

ReactHooks是React16.8引入的新特性，允许我们在不使用Class的前提下使用state和其他特性。ReactHooks要解决的问题是状态共享，是继render-props和higher-ordercomponents之后的第三种状态逻辑复用方案，不会产生JSX嵌套地狱问题。为什么会有Hooks？介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。... 继续阅读 >

2021
07-04

React 小技巧教你如何摆脱hooks依赖烦恼

react项目中，很常见的一个场景:const[watchValue,setWatchValue]=useState('');const[otherValue1,setOtherValue1]=useState('');const[otherValue2,setOtherValue2]=useState('');useEffect(()=>{doSomething(otherValue1,otherValue2);},[watchValue,otherValue1,otherValue2]);我们想要watchValue改变的时候执行doSomething，里面会引用其他值otherValue1,otherValue2。这时有个让人烦恼的问题：如... 继续阅读 >

2021
07-01

30分钟带你全面了解React Hooks

目录概述1.useState1.1概念三连问1.2举个例子1.3注意事项2.useReducer2.1使用方法2.2举个例子3.useContext3.1使用方法3.2举个例子4.useEffect4.1模拟componentDidMount4.2模拟componentDidMount+componentDidUpdate4.3可添加依赖4.4模拟componentWillUnmount5.useLayoutEffect6.useRef7.forwardRef（不是Hook）8.useMemo&&useCallback9.useInperativeHandle9.1举个例子10.自定义Hook概述1.Hooks... 继续阅读 >

2021
07-01

详解React Hooks是如何工作的

目录1.ReactHooksVS纯函数2.简单myUseState3.改进myUseState4.实现原理引发的Hooks规则1.ReactHooksVS纯函数ReactHook说白了就是ReactV18.6新增的一些API，API的本质就是提供某种功能的函数接口。因此，ReactHooks就是一些函数，但是ReactHooks不是纯函数。什么是纯函数呢？就是此函数在相同的输入值时，需产生相同的输出，并且此函数不能影响到外面的数据。简单理解就是函数里面不能用到在外面定义的变... 继续阅读 >

2021
07-01

详解如何构建自己的react hooks

目录1.常用的一个hooks1.1useState:状态钩子1.2useEffect:副作用钩子1.3useMemo和useCallback2.实现几个自定义的hook2.1获取窗口变化的宽高2.2定时器useInterval3.总结1.常用的一个hooks官方中提供了几个内置的钩子，我们简单了解下他们的用法。1.1useState:状态钩子需要更新页面状态的数据，我们可以把他放到useState的钩子里。例如点击按钮一下，数据加1的操作：const[count,setCount]=useState(0);r... 继续阅读 >

2021
04-27

React Hooks常用场景的使用(小结)

前言React在v16.8的版本中推出了ReactHooks新特性。在我看来，使用ReactHooks相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过ReactHooks可以将功能代码聚合，方便阅读维护；组件树层级变浅，在原本的代码中，我们经常使用HOC/renderprops等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染... 继续阅读 >

2021
04-07

react hooks入门详细教程

StateHooks案例：import{useState}from'react';functionExample(){const[count,setCount]=useState(0);//count:声明的变量；setCount：改变count值的函数；0：count的初始值return(<div><p>Youclicked{count}times</p><buttononClick={()=>setCount(count+1)}>Clickme</button></div>);}useState是react自带的一个hook函数，它的作用就是用来声明状态变量。useState这个函数接收的参数... 继续阅读 >

2021
04-07

基于react hooks,zarm组件库配置开发h5表单页面的实例代码

最近使用ReactHooks结合zarm组件库，基于js对象配置方式开发了大量的h5表单页面。大家都知道h5表单功能无非就是表单数据的收集，验证，提交，回显编辑，通常排列方式也是自上向下一行一列的方式显示，所以一开始就考虑封装一个配置化的页面生成方案，目前已经有多个项目基于此方式配置开发上线，思路和实现分享一下。使用场景任意包含表单的h5页面（使用zarm库，或自行适配自己的库）目标代码实现简单和简洁基于配置新手... 继续阅读 >

2020
10-18

详解如何使用React Hooks请求数据并渲染

前言在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用ReactClass组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook... 继续阅读 >

2020
10-13

react的hooks的用法详解

hooks的作用它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。useState//声明状态const[count,setCount]=useState(0);//使用状态<p>Youclicked{count}times</p><buttononClick={()=>{setCount(count+1)}}>clickme</button>useEffect一个参数useEffect(()=>{console.log("首次渲染与更新")})模拟:compone... 继续阅读 >

2020
10-06

vue-router的hooks用法详解

虽然Vue3还没有正式发布，但是热爱新技术的我早已按捺不住自己的内心，开始尝试在小项目中使用它了。根据这篇《今日凌晨Vue3beta版震撼发布，竟然公开支持脚手架项目！》我搭建了一个Vue3的脚手架项目，用这种方式搭建的脚手架项目不仅仅只有vue是新版的，就连vue-router、vuex都是最新的。给大家截一下package.json的图：可以看到vue-router和vuex都已经开启4.0时代啦！不过其实我并没有去了解过vue-router4.0的新用法什么的... 继续阅读 >