果果日记

记录随想

作者： guo

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

© Copyright 2023 果果日记