前端中的‘use’是什么意思

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对业务开发没什么影响。只是对数组、对象的监听有些不方便。

留下评论