Vue.use()
use方法接受传入的插件,执行传入的函数,或对象的install方法。对于没有install方法的插件和库,可以包装一层。包装的好处即,可以在install方法中将该插件挂载到vue的原型上,可以注册directive、mixin、component、filter等。通缩地说,use的作用是配置组件与vue的联系。如果没有Vue.use,直接import库也是可行的。
React Hooks
1.它解决了什么问题
生命周期方法。Class Components拥有和Vue类似的生命周期方法,但函数式组件不方便定义这种方法。同时,生命周期方法按时间组织逻辑,但同一节点可能有多个操作先后进行,代码变得难以理解。
Class语法的限制。使用js的class语法有门槛,因为js的this相比其他语言更灵活,也更容易犯错。如果不使用剪头函数(可能会造成内存泄漏),那么不得不在代码中绑定方法的this(我们知道,在函数中,可以直接从上下文访问变量)。此外,class组件不利于代码预编译时做优化。
组件间状态复用。高阶组件和provider、consumer等概念增加了组件嵌套深度,客观上消耗了更多的认知资源。
2.如何使用
StateHook:以官网给的useState为例。它的返回值是一个数组,其中包含一个变量用于get,一个方法用于set。
import React, { useState } from 'react'; function Example() { // 声明一个叫 “count” 的 state 变量。 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
EffectHook:这类Hook用于执行React概念外的操作(比如操作DOM、监听数据),也称为“副作用”。这类Hook接受一个方法作为参数,在每次React完成DOM操作后调用,而这个方法的返回值,React会在组件销毁时调用。其实不完全对应生命周期,因为efecthook只有两个时机。
其他Hook:如useContext,useReducer。和Redux中概念相同。
我们还发现,每次渲染组件时,useState不会重复创建,但组件内多次调用可以重复创建state变量。React可以(通过分析函数中有几次调用+运行时调用顺序)分清楚什么是渲染时重复调用,什么是多次调用。
3.为什么叫use?(官方解读)
你可能想知道:为什么叫 useState
而不叫 createState
?
“Create” 可能不是很准确,因为 state 只在组件首次渲染的时候被创建。在下一次重新渲染时,useState
返回给我们当前的 state。否则它就不是 “state”了!这也是 Hook 的名字总是以 use
开头的一个原因。
4.自定义Hook
自定义Hook是对StateHook与EffectHook或其他内置Hook的再封装,在内部调用这些Hook。自定义Hook是一个普通的use开头的函数。它的参数和返回值也可以自定义。
5.Hook的限制
一定要每次在最顶层按顺序调用。
不能在嵌套函数、条件判断或循环中使用。顺序是React判断state关系和变化的关键,顺序被破坏将导致错误的结果。
除非是自定义Hook,否则不要在普通函数中调用Hook。Hook的使用和组件渲染、顺序无法分割。
Vue3.0 Hooks
在vue3.0中,独立出了setup方法。这种做法与react并无本质区别,只是区分了create与use。有分析指出了mutable与immutable的区别,我觉得没有很大影响,显示使用setState和隐式调用setter对业务开发没什么影响。只是对数组、对象的监听有些不方便。