songEagle

STAY CURIOUS. STAY HUMBLE.

【每日一题】(38题)谈谈React Hooks 与Vue3.0 Function based API的区别?

每日一题 2021年01月28日 星期四 晚上

关注「松宝写代码」,精选好文,每日一题

作者: saucxs

2020,实「鼠」不易

2021,「牛」转乾坤

风劲潮涌当扬帆,任重道远须奋蹄!


二、简述

React Hooks 是 React16.8 引入的新特性,支持在类组件之外使用 state、生命周期等特性。

Vue Function-based API 是 Vue3.0 最重要的 RFC (Requests for Comments),将 2.x 中与组件逻辑相关的选项以 API函数 的形式重新设计。

目录:

  • React Hooks
    • React Hooks是什么
    • useState Hook
    • useEffect Hook
    • React Hooks 引入的原因以及设计原则
    • React Hooks 使用原则及其背后的原理
  • Vue3.0 Function-based API
    • 基本用法
    • 引入的原因以及解决的问题
  • React Hooks 与 Vue3.0 Function-based API 的对比

三、React Hooks

React Hooks 是什么?

引用官网的一段话:

从概念上讲,React 组件更像是函数。而 Hooks 则拥抱了函数,同时也没有牺牲 React 的精神原则。Hooks 提供了问题的解决方案,无需学习复杂的函数式或响应式编程技术。

另外,Hooks 是100%向后兼容的,也是完全可选的。

React Hooks 提供了三个基础 Hook : useStateuseEffectuseContext,其他 Hooks 可参考React Hooks API

useState Hook

下面是一个实现计数器功能的类组件示例:

import React from 'react';

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      count: 0
    }
  }

  render () {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({count: this.state.count + 1)}}>Click me</button>
       </div>
    )
  }
}

需求很简单,设定初始值为0,当点击按钮时,count 加 1。

当使用 useState Hook 实现上述需求时:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

其中 useState Hook 做了哪些事情呢?

  1. 在调用 useState 方法时,定义了一个state变量count,它与类组件中的this.state功能完全相同。对于普通变量,在函数退出后即消失,而state中的变量会被 React 保留。
  2. useState 方法只接收一个参数,那就是初始值。useState 方法一次只定义一个变量,如果想在state中存储两个变量,只需要调用两次 useState() 即可。
  3. useState 的返回值是一个由 当前state 以及 更新state的函数 组成的数组。这也是采用 数组解构 方式来获取的原因。

在使用 Hooks 实现的示例中,会发现 useState 让代码更加简洁了:

  • 获取state:类组件中使用 this.state.count ,而使用了 useSatet Hook 的函数组件中直接使用 count 即可。
  • 更新state:类组件中使用 this.setState() 更新,函数组件中使用 setCount() 即可。

这里抛出几个疑问,在讲解原理的地方会进行详细解释:

  • React 是如何记住 useState 上次值的?
  • React 是如何知道 useState 对应的是哪一个组件?
  • 如果一个组件内有多个 useState,那重新渲染时 useState 的取值顺序又是怎么确定的?

useEffect Hook

在讲 useEffect 之前,先讲一下 React 的副作用。

在 React 中,数据获取、订阅或者手动修改DOM等操作,均被称为 '副作用',或者 '作用' 。

而 useEffect 就是一个 Effect Hook ,为函数组件添加操作副作用的能力,可以把它看作是类组件中的componentDidMountcomponentDidUpdatecomponentWillUnmount三个周期函数的组合。

下面是一个关于订阅的例子:

import React from 'react';

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isOnline: null
    }
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate(prevProps) {
    // 当 friend.id 变化时进行更新
    if (prevProps.friend.id !== this.props.friend.id) {
      // 取消订阅之前的 friend.id
      ChatAPI.unsubscribeFromFriendStatus(
        prevProps.friend.id,
        this.handleStatusChange
      );
      // 订阅新的 friend.id
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange = (state) => {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render () {
    return (
      <div>
        {this.state.isOnline === null ? 'Loading...' :
          (this.state.isOnline ? 'Online' : 'Offline')
        }
      </div>
    )
  }
}

从上述的代码中不难发现,存在一定的重复代码,逻辑不得不拆分在三个生命周期内部。另外由于类组件不会默认绑定 this ,在定义 handleStatusChange 时,还需要为它 绑定this

这里补充一点,对于类组件,需要谨慎对待 JSX 回调函数中的 this,类组件默认是不会绑定 this 的,下面提供几种绑定 this 的方法:

  1. 通常的做法是将事件处理函数声明为 class 中的方法,如:constructor内部 this.handleClick = this.handleClick.bind(this)
  2. 在 onClick 内部使用箭头函数, 如:onClick={e=>this.handleClick(id, e)},注意:该方法在每次渲染时都会创建不同的回调函数。在大多数情况下,没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。
  3. 在 onClick 内部使用 bind 绑定, 如:onClick={this.handleClick.bind(this, e)}
  4. 使用 class fields 绑定:如:handleClick = (e) => {}

这也是 React 引入 Hooks 的其中一个原因。

下面让我们看一下 useEffect Hook 是如何实现上述需求的:

import React, { useState, useEffect } from 'react';

function Example(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const handleStatusChange = (status) => {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  }, [props.friend.id]);

  return (
    <div>
      {isOnline === null ? 'Loading...' :
        (isOnline ? 'Online' : 'Offline')
      }
    </div>
  )
}

在上述例子中,你可能会对 useEffect Hook 产生以下疑问:

  1. useEffect 做了什么?首先,接收了一个函数,而 React 会保存这个函数(称为'effect'),并且在执行 DOM 更新后调用这个函数,即添加订阅。
  2. [props.friend.id] 参数设置了什么?
    • 默认情况下,useEffect 接收一个函数作为第一个参数,在不设置第二个参数时,每一次渲染都会执行 effect,这有可能会导致性能问题。
    • 为了解决这个问题,可添加第二个参数,用来控制什么时候将会执行更新,这时候就相当于 componentDidUpdate 做的事情。
    • 如果想只运行一次 effect ,即仅在组件挂载和卸载时执行,第二个参数可传递一个空数组[]
  3. 在 useEffect 中为什么要返回一个函数呢?这是一个可选的操作,每一个 effect 都可以返回一个清除函数。在 React 中,有一些副作用是需要清除的,比如 监听函数、定时器等,这时候就需要为 effect 增加一个返回函数,React 会在组件卸载的时候执行清除操作。

Hooks 所提供的功能远不止这些,更多详细的介绍可以查阅官网文档

React Hooks 引入的原因以及设计原则

React Hooks 具体解决了什么问题呢? React 为什么要引入这一特性呢?

主要有以下三点原因:

  1. 在组件之间复用状态逻辑很困难。
    • React 并没有提供将可复用行为附加到组件的途径,一般比较常见的方法是采用 render props高阶组件 解决。
    • React Hooks 支持 自定义Hook,可以将状态逻辑从组件中提出,使得这些逻辑可进行单独测试、复用,在无需修改组件结构的情况下即可实现状态逻辑复用。点击查看自定义Hook使用说明
  2. 复杂组件变得难以理解。
    • 每个生命周期函数内部逻辑复杂、功能不单一,相互关联的需求被拆分在各个生命周期中,而不相关的代码却需要在同一个周期内部进行整合。
    • 为了解决这个问题,React Hooks 将组件中相互关联的部分拆分成更小的函数,引入了 Effect Hook,如上述 useEffect 的示例,正是解决了这个问题。
  3. 难以理解的class。
    • this绑定
    • 打包尺寸,函数通过ES export导出,可以借助 tree-shaking 把没用到的函数移除;压缩混淆,类的属性和方法没法压缩
    • class热重载不稳定

React Hooks 设计原则

主要有以下四点:

  1. 优雅高效的复用状态逻辑
  2. 无 class 困扰
  3. 具备 class 已有的能力
  4. 功能单一的副作用

下面我们根据几个例子来感受 React Hooks 具体是如何体现的。

1、优雅高效的复用状态逻辑

在之前,状态逻辑的复用一般是采用 Mixins APIRender PropsHOC实现,但是由于Render Props 与 HOC 本身也是组件,状态逻辑的复用也是通过封装组件的形式来实现,仍难以避免组件多层嵌套的问题,也比利于后续的理解与维护。

在 React Hooks 中,提供了 自定义Hook 来实现状态逻辑的复用。

比如 在聊天程序中,使用订阅获取好友的状态:

import React, { useState, useEffect } from 'react';

function useOnline(id) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange (state) {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(id, handleStatusChange);
    };
  }, [id]);

  return isOnline;
}

// 使用 自定义Hook
function Example(props) {
  const isOnline = useOnline(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

可以看到 useOnline 组件的逻辑是与业务完全无关的,它只是用来添加订阅、取消订阅,以获取用户的状态。

总结:

  • 数据来源清楚,之间根据函数返回值获得
  • 代码量少,更易维护
  • 避免重复创建组件带来性能损耗

注意

  • 自定义Hook 是一个函数,名称必须以 'use' 开头,这是一个约定,如果不遵循,React 将无法自动检测是否违反了 Hook 规则。
  • 在函数的内部可以调用其他 Hook,但是请确保只在顶层无条件地调用其他Hook。
  • React 会根据名称来检测 Hook 是否违反了规则。
  • 自定义 Hook 是一种重用状态逻辑的机制,每次使用时,内部 state 与副作用是完全隔离的。

2、无 class 困扰

下面我们将根据一个具体例子 实现根据点击事件,控制节点的展示或者隐藏的需求,来对 Render PropsHOCHooks的实现方式做简单对比。

使用 Render Props 实现

Render Props 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。

创建 VisibilityHelper

import React from 'react';
import PropTypes from 'prop-types';
class VisibilityHelper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisplayed: props.initialState || false,
    };
  }
  hide = () => {
    this.setState({
      isDisplayed: false,
    });
  }
  show = () => {
    this.setState({
      isDisplayed: true,
    });
  }
  render() {
    return this.props.children({
      ...this.state,
      hide: this.hide,
      show: this.show,
    });
  }
}
VisibilityHelper.propTypes = {
  initialState: PropTypes.bool,
  children: PropTypes.func.isRequired,
};
export default VisibilityHelper;

VisibilityHelper 的使用:

import React from 'react';
import VisibilityHelper from 'VisibilityHelper';

function ButtonComponent() {
  return (
    <VisibilityHelper initialState={true}>
      {
        ({
          isDisplayed,
          hide,
          show
        }) => (
            <div>
              {
                isDisplayed ?
                  <button onClick={hide}>Click to hide</button>
                  :
                  <button onClick={show}>Click to display</button>
              }
            </div>
          )
      }
    </VisibilityHelper>
  );
}

<ButtonComponent>组件中,我们使用了一个带有函数prop<VisibilityHelper>组件,实现了代码复用。

使用 HOC 实现

高阶组件,是 React 中复用组件逻辑的一种高级技巧,是一种基于 React 组合特性而形成的设计模式。

定义高阶组件 VisibilityHelper ,注意 HOC 不会修改传入的组件,也不会使用继承来复制其行为。相反,HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数,没有副作用。

import React from 'react';
function VisibilityHelper(WrappedComponent, initialState = false) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isDisplayed: initialState
      };
    }

    hide = () => {
      this.setState({
        isDisplayed: false,
      });
    }
    show = () => {
      this.setState({
        isDisplayed: true,
      });
    }

    render() {
      return <WrappedComponent
        isDisplayed={this.state.isDisplayed}
        show={() => this.show()}
        hide={() => this.hide()}
        {...this.props} />;
    }
  };
}
// 定义 按钮组件
let ButtonComponent = ({ isDisplayed, hide, show }) => {
  return (
    <div>
      {
        isDisplayed ?
          <button onClick={hide}>Click to hide</button>
          :
          <button onClick={show}>Click to display</button>
      }
    </div>
  );
}

// 使用高阶组件,并设定默认值
ButtonComponent = VisibilityHelper(ButtonComponent, true);
export default ButtonComponent
在 React Hooks 中是如何实现上述逻辑的呢?
import React, { useState } from 'react';
function ButtonComponent() {
  const [isDisplayed, show] = useState(false)
  return (
    <div>
      {
        isDisplayed ?
          <button onClick={() => show(false)}>Click to hide</button>
          :
          <button onClick={() => show(true)}>Click to display</button>
      }
    </div>
  )
}

从对比中可以发现,使用 Hooks 更简洁,且不需要在担心this绑定地问题。

3、具备 class 已有的能力

对于常用的 class 能力,Hooks 已经基本覆盖。

对于其他不常见的能力,官方给出的回应是:

目前暂时还没有对应不常用的 getSnapshotBeforeUpdate 和 componentDidCatch 生命周期的 Hook 等价写法,但我们计划尽早把它们加进来。目前 Hook 还处于早期阶段,一些第三方的库可能还暂时无法兼容 Hook。

4、功能单一的副作用

通过文中的几个示例,应该可以了解到 useEffect Hook 便是设计用来解决副作用分散、逻辑不单一的问题。

在真实的应用场景中,可根据业务需要编写多个 useEffect。

React Hooks 使用原则

两条使用原则:

  1. 只在最顶层使用 Hooks,不能在循环、条件或嵌套函数中调用 Hooks。这是为了保证 Hooks 在每一次渲染中都按照同样的顺序被调用。
  2. 只能在 React 的函数组件中或者 自定义Hook 中调用 Hooks。确保组件的状态逻辑在代码中清晰可见。

这两条原则让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

React Hooks 背后的原理

之前的抛出的疑问:

  • React 是如何记住 useState 上次值的?
  • React 是如何知道 useState 对应的是哪一个组件?
  • 如果一个组件内有多个 useState,那重新渲染时 useState 的取值顺序又是怎么确定的?

在 React 中从编译到渲染成 Dom,都要经历这样的过程:JSX -> Element -> FiberNode -> Dom

Hooks 要想和一个函数组件进行绑定, 就要和这个转换过程的某个节点进行关联,由于 Hooks 只有在 render 过程中进行调用,很明显就只能关联到 FiberNode 上。

在 FiberNode 上有 一个属性 memoizedState,这个属性在 class 组件中对应最终渲染的 state。

class 组件的state一般是一个对象,在 函数组件中变成 一个链表,如 class 组件 memoizedState = {a: 1, b: 2} => 函数组件 memoizedState = {state: 1, next: {state: 2, next: ..}}

每个链表的节点都是一个 useState,从而将所有 Hooks 进行串联起来。不仅仅 State Hook,其它 Hook 也是通过 memoizedState 串联起来的。

第一次渲染后,通过 FiberNode 的 memoizedState 将所有 Hook 进行收集完成。

当执行 setState 进行组件更新时,重新执行函数组件,这时会从收集的 Hooks 中按照执行顺讯依次取出,对于 State Hook 会进行计算将最新的值返回, Effect Hook 会在组件渲染结束后,先执行清除函数,再执行 副作用函数。

过程如图: 过程

四、Vue3.0 Function-based API

首先提一下 Vue Function-based API 的升级策略。

Vue3.0目前还未发布(预计2019年发布),vue官方提供了Vue Function API,支持Vue2.x版本使用组件逻辑复用机制。当3.0发布后,可无缝替换掉该库。

另外,Vue3.0计划发布两个不同版本:

  • 兼容版本:同时支持新 API 和 2.x 的所有选项
  • 标准版本:只支持新 API 和部分 2.x 选项

下面是一个基础例子:

import { value, computed, watch, onMounted } from 'vue'

const App = {
  template: `
    <div>
      <span>count is {{ count }}</span>
      <span>plusOne is {{ plusOne }}</span>
      <button @click="increment">count++</button>
    </div>
  `,
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}

Vue Function-based API 引入的原因及解决的问题

引入的原因,借用官方推出的一段话:

组件 API 设计所面对的核心问题之一就是如何组织逻辑,以及如何在多个组件之间抽取和复用逻辑。

其实也就是 React Hooks 引入时提到的:在组件之间复用状态逻辑很困难。

在Vue2.0中,有一些常见的逻辑复用模式,如:Mixins高阶组件Renderless Components,这些模式均或多或少的存在以下问题:

  • 模版中的数据来源不清晰
  • 命名空间容易冲突
  • 性能问题,需要额外的组件实例嵌套来封装逻辑,带来不必要的性能开销等

Function-based API 受 React Hooks 的启发,提供一个全新的逻辑复用方案,且不存在上述问题。

五、React Hooks 与 Vue Function-based API 的对比

两者均具有基于函数提取和复用逻辑的能力。

React Hooks 在每次组件渲染时都会调用,通过隐式地将状态挂载在当前的内部组件节点上,在下一次渲染时根据调用顺序取出。而 Vue 的响应式 机制使 setup() 只需要在初始化时调用一次,状态通过引用储存在 setup() 的闭包内。这也是vue不受调用顺序限制的原因。

谢谢支持

1、文章喜欢的话可以「分享,点赞,在看」三连哦。

2、作者昵称:saucxs,songEagle,松宝写代码。「松宝写代码」公众号作者,每日一题,实验室等。一个爱好折腾,致力于全栈,正在努力成长的字节跳动工程师,星辰大海,未来可期。内推字节跳动各个部门各个岗位。

3、长按下面图片,关注「松宝写代码」,是获取开发知识体系构建,精选文章,项目实战,实验室,每日一道面试题,进阶学习,思考职业发展,涉及到JavaScript,Node,Vue,React,浏览器,http,算法,端相关,小程序等领域,希望可以帮助到你,我们一起成长~

松宝写代码

字节内推福利

  • 回复「校招」获取内推码
  • 回复「社招」获取内推
  • 回复「实习生」获取内推

后续会有更多福利

学习资料福利

回复「算法」获取算法学习资料

往期「每日一题」

1、JavaScript && ES6

2、浏览器

3、Vue

4、HTML5

5、算法

6、Node

7、Http

还没有评论,快来抢沙发吧!