绝对详细的请看官网:https://react.docschina.org/docs/hooks-intro.html
这里对一些常见的用法和问题进行归纳
为了比较好理解,先说明为什么要弄这个hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。在未来甚至可以完全覆盖并替换class的写法。
使用hook的主要作用是为了让组件内的逻辑更加清晰,并且可以通过自定义hook来达到复用逻辑。使组件内的逻辑复用性强,且功能清晰明了。
注意:hook只能使用在函数组件中,class组件不支持,所有hook默认约定名称用use开头
用State Hook代替constructor中的this.state
useState hook函数有一个参数,参数可以是任意值,用来进行数据的定义。并且返回一个数组,数组中有两个对象,第一个是state变量并且把参数值赋予它,第二个是设置这个state变量值的方法,这两个对象的名称可自定义
通过useState 函数我们可以定义多个state数据,但我们应该保证每一个state数据都具有意义,同种意义范围的state数据应该放在同一个state,而不应该拆分成2个state
用Effect Hook来编写副作用逻辑代码,其实就相当于class组件内编写componentDidMount,componentDidUpdate中的代码。对应组件生命周期中的Mount阶段和Update阶段。useEffect同样可以定义多个
useEffect hook函数每次渲染都会执行,所以不管是挂载还是更新都会触发它。useEffect是非阻塞的,所以是异步代码。如果要使用同步的话,请使用useLayoutEffect,这个hook用来进行页面布局
useEffect有两个参数。
第一个是副作用函数,用来编写可能具有副作用的代码。副作用函数还可以返回一个函数对象,这个函数对象用来清除副作用,不用清除副作用则不用返回。清除阶段对应class生命周期中的卸载componentWillUnmount,更新componentWillUpdate
官网的effect运行示意图,进行下一次更新前总会先清除上一次更新带来的副作用
第二个参数是数组(可选),里面传入副作用函数中使用到的数据变量,并且这个变量得具有一定变化的特性,第二个参数主要用于优化,防止进行重复渲染。
eq:这里传入的数组是[count],count在函数中有使用到,而且count也具有变化性。如果下一次变化后的count与当前的count一样,则不会执行useState来重新渲染。不同则会渲染更新。
利用这个参数我们也可以实现只在挂载时渲染一次,而后更新时不再渲染。相当于把挂载时只执行一次的代码写在componentDidMount
,然后在componentWillUnmount清除代码副作用。实现这个功能并不需要像class组件必须在不同生命周期函数中编写代码,在这里你只需把第二个参数改为一个空数组即可。
这里获取了DOM元素p,写法和API createRef()相似。useRef只能用来保存对象,而没办法通过改变useRef.current中的对象来响应式改变页面
如果父组件想通过ref来控制子组件中的DOM(如何传递ref对象),请使用useImperativeHandle Hook,详情请看https://react.docschina.org/docs/hooks-reference.html#useimperativehandle
hook和生命周期函数一样,必须写在函数最顶层
而且hook不应该被嵌套进条件或者循环语句中
hook只能在函数组件或者自定义hook中被使用,而不能用于普通函数或者class组件中
我们可以将一些重复的逻辑代码,抽离成一个自定义hook,名称必须以use开头
按自身定义的hook顺序进行调用
看得出useState只会在初始化时调用一次,而useEffect每次渲染都会调用。每次setState都会触发更新从而调用useEffect,注意只有setState才会让数据进行响应式更新,直接设置数据并不会让页面进行更新。
原文:https://www.cnblogs.com/chujunqiao/p/11876771.html