useEffect理解React、Vue设计理念的不同

目录
  • 引言
  • Vue与React的差异
  • useEffect会越来越复杂
  • 总结

引言

我们知道，React发布Hooks后，带来了业界一波Hooks热。很多框架（比如Vue Composition API、Solid.js）都借鉴了Hooks的模式。

但是，即使这些框架都借鉴了Hooks，但由于框架作者的理念不同，发展方向也逐渐不同。

比如，在Vue Composition API中，对标React useEffect API的是watchEffect，在Vue文档中，有一小段内容介绍他的用法：

而在React beta文档中，介绍useEffect的，则有整整6节内容：

为什么会有这样的区别？让我们从useEffect看看React、Vue设计理念的不同。

Vue与React的差异

当Hooks刚问世时，他被看作是类组件的替代方案。文档中介绍Hooks时也是将他与类组件对比。

其中useEffect的执行时机囊括了如下3个生命周期函数：

componentDidMount

componentDidUpdate

componentWillUnmount

反观借鉴了Hooks的Vue Composition API，则同时提供了watchEffect API与不同场景的生命周期函数。

这里已经体现出两者设计理念的不同了：

React作为Facebook为探索UI开发最佳实践而生的框架，一贯的做法是 —— 保持API稳定（比如this.setState从React诞生伊始就一直存在）。

而Vue则借鉴了各种框架中的最佳实践（比如虚拟DOM、响应式更新...）。

所以，从易用性上来说，Vue Composition API是一定优于React Hooks的，比如：

Hooks不能在条件语句中声明

Hooks必须显式指明依赖

并且，这种易用性的差异会随着框架迭代，愈发明显。

useEffect会越来越复杂

本着保持API稳定的原则，当前useEffect主要与上述三个生命周期函数相关。

但是，未来会有更多触发时机与useEffect挂钩。

所以，React团队在努力做一件事 —— 淡化useEffect与生命周期的关系，甚至淡化useEffect与组件的关系（因为当谈到组件时，很自然的会想到组件生命周期）。

怎么淡化呢？答案是 —— 在严格模式下，DEV环境会触发多次useEffect回调。

如果你将useEffect当作componentDidMount/WillUnmount来用，这个特性很可能让你的代码出bug。

React团队之所以这么做，就是想教育开发者 —— useEffect和生命周期没有关系。开发者应该将useEffect看作针对某个数据源的同步过程。

比如，下述聊天室组件，其中的useEffect可以看作是针对聊天室连接的同步过程：

const serverUrl = 'https://localhost:1234';
function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

当聊天室组件mount、update、unmount时，对应的同步过程应该进行。

当roomId变化时，对应的同步过程应该进行。

同理，如果React原生支持了Vue中的KeepAlive，那么当聊天室组件从可见变为不可见，以及从不可见变为可见状态，同步过程都应该进行。

所以，当我们从同步过程应该何时进行的角度看待useEffect时，上述useEffect触发时机都是合理的。

但是，如果从生命周期函数的角度看待useEffect，等未来（可能是v18的某个版本），Offscreen Component特性落地（对标Vue中的KeepAlive），组件从可见变为不可见状态时，useEffect销毁函数与useEffect回调函数会依次执行，就会让人很头大。

这就是为什么，我上文说，React团队一直在淡化useEffect与生命周期的关系，甚至淡化useEffect与组件的关系。

一切都是为了未来其他特性与useEffect的挂钩打下理论基础。而这些特性从组件或生命周期函数的角度讲不通。

这也是为什么在新文档里有6节内容与useEffect相关的原因。

作为对比，Vue在遇到新的场景时会怎么做呢？显然是设计新的API。

总结

到底是提供一个API，但是能覆盖更多场景（文档有6节来介绍他）好，还是每个场景都提供一个API好？

不同开发者有自己的答案。

但有一点很明确，对于前端新手，React的上手难度会越来越高，而Vue的上手难度会尽可能保持平滑。

这里的前端新手，可能是想入行前端的新人，也可能是觉得前端我也能干的后端。

所以，对于当前的从业者来说，这究竟是好事还是坏事呢？

以上就是useEffect理解React、Vue设计理念的不同的详细内容，更多关于useEffect React Vue设计理念的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • useEffect中不能使用async原理详解

    目录 当我们尝试在 useEffect 使用 async 的时候会报错,但是一直没有了解为什么,最近在看源码,尝试从源码角度解释报错的原因,下面是具体的代码分析. 当页面中使用 useEffect 的时候,会在初始化的时候执行 mountEffect 如下: useEffect: function(create, deps) { currentHookNameInDev = "useEffect"; mountHookTypesDev(); checkDepsAreArrayDev(d

  • useEffect支持async及await使用方式

    useEffect支持async及await使用方式

    目录 引言 背景 React 为什么要这么做? useEffect 怎么支持 async...await... 自定义 hooks 还可以支持 useEffect 的清除机制么? 总结与思考 引言 本文是深入浅出 ahooks 源码系列文章的第六篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 注:本系列对 ahooks 的源码

  • vue转react useEffect的全过程

    vue转react useEffect的全过程

    目录 vue转react useEffect useEffect的第二个参数 useEffect的使用 useEffect清除 vue2转战React Hooks实践 开发思路上 代码组织结构上 vue转react useEffect useEffect用于处理组件中的effect,通常用于请求数据,事件处理,订阅等相关操作. useEffect的第二个参数 1.当useEffect没有第二个参数时 通过这个例子可以看到useEffect没有第二个参数时不停的在调用 2.当useEffect第二

  • React useEffect不支持async function示例分析

    目录 引言 React为什么这么设计呢? 简单改造 1.简单改造的写法(不推荐) 2.把异步提取成单独函数或自定义hook(推荐) 引言 useEffect相比大家都耳熟能详啦,如下这种写法,应该是非常常见的需求. useEffect(async () => { await getPoiInfo(); // 请求数据 }, []); 但是 React 本身并不支持这么做,理由是 effect function 应该返回一个销毁函数(effect:是指return返回的cleanup函数),如果

  • useEffect理解React、Vue设计理念的不同

    useEffect理解React、Vue设计理念的不同

    目录 引言 Vue与React的差异 useEffect会越来越复杂 总结 引言 我们知道,React发布Hooks后,带来了业界一波Hooks热.很多框架(比如Vue Composition API.Solid.js)都借鉴了Hooks的模式. 但是,即使这些框架都借鉴了Hooks,但由于框架作者的理念不同,发展方向也逐渐不同. 比如,在Vue Composition API中,对标React useEffect API的是watchEffect,在Vue文档中,有一小段内容介绍他的用法: 而

  • 如何深入理解React的ref 属性

    如何深入理解React的ref 属性

    概述 首先,Refs 和 ref 是两个概念,Refs 是 React 提供的可用特定 API 创建的一个对象.该对象的结构如下: 这个对象只有一个属性就是 current ,那么这个对象是用来干嘛的呢? Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素.(DOM节点就是指原生DOM元素,在render()方法中创建的 React 元素就是指 React 的类组件元素) 我们可以想象这样一个需求,两个兄弟元素,一个是 div ,一个是 button.现在想实

  • 深入理解React State 原理

    深入理解React State 原理

    目录 问题:setState 到底是同步还是异步的? 类组件state setState原理揭秘 函数组件state 问题:setState 到底是同步还是异步的? 如果对 React 底层有一定了解,可以回答出 batchUpdate 批量更新概念,以及批量更新被打破的条件. 答案:有时是同步,有时是异步. 在 合成事件 和 生命周期函数 里是 异步 的在 原生事件 和 setTimeout.promise里是 同步 的 造成setState的异步并不是由内部的异步代码引起的,在本身的执行过程

  • 深入理解React调度(Scheduler)原理

    深入理解React调度(Scheduler)原理

    目录 异步调度 时间分片 异步调度原理 总结 异步调度 问题:由于对于大型的 React 应用,会存在一次更新,递归遍历大量的虚拟 DOM ,造成占用 js 线程,使得浏览器没有时间去做一些动画效果,伴随项目越来越大,项目会越来越卡. 对比Vue: Vue 有这 template 模版收集依赖的过程,轻松构建响应式,使得在一次更新中,Vue 能够迅速响应,找到需要更新的范围,然后以组件粒度更新组件,渲染视图. React 中,一次更新 React 无法知道此次更新的波及范围,所以 React 选

  • 如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

    1.导语 首先来简单介绍一下webpack:现代 JavaScript 应用程序的 静态模块打包工具 .当 webpack 处理应用程序时,它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph),并生成一个或多个 bundle .webpack4.0出现之后,我们可以不用再引入一个配置文件来打包项目,并且它仍然有着很高的可配置性,可以很好满足我们的需求. 在开始正文之前,首先先来看看我们要实现的成果: 支持ES6+JQuery+Less/Scss的单页/多页脚手

  • 深入理解React Native核心原理(React Native的桥接（Bridge)

    深入理解React Native核心原理(React Native的桥接（Bridge)

    在这篇文章之前我们假设你已经了解了React Native的基础知识,我们会重点关注当native和JavaScript进行信息交流时的内部运行原理. 主线程 在开始之前,我们需要知道在React Native中有三个主要的线程: shadow queue:负责布局工作 main thread:UIKit 在这个线程工作(译者注:UI Manager线程,可以看成主线程,主要负责页面交互和控件绘制的逻辑) JavaScript thread:运行JS代码的线程 另外,一般情况下每个native模

  • 深入理解React 三大核心属性

    目录 1.State属性 2.Props 属性 3.Refs 属性 (1)字符串形式 (2)函数回调形式 (3)createRef创建ref容器 1.State 属性 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). import React from 'react '; import Reac

  • VSCode使React Vue代码调试变得更爽

    VSCode使React Vue代码调试变得更爽

    目录 引言 用 VSCode 调试 React 代码 用 VSCode 调试 Vue 代码 总结 引言 作为前端开发,基本每天都要调试 Vue/React 代码,不知道大家都是怎么调试的,但我猜大概有这么几种: 不调试,直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高.体验又爽.

  • 一篇文章带你理解React Props的 原理

    目录 props理解 1)props 可以是: 2)props在React充当角色(3个角度): 3)监听props改变: 操作 props 1.抽象 props 1)混入 props 2)抽离 props 2.注入 props 1)显式注入 props 2)隐式注入 props 总结 props理解 props 是 React 组件通信最重要的手段 props:对于在 React 应用中写的子组件,父组件绑定在它们标签里的 属性和方法,最终会变成 props 传递给它们. 1)props 可以

  • CodeMirror实现代码对比功能(插件react vue)

    CodeMirror实现代码对比功能(插件react vue)

    目录 1.第一步:下载插件 2.vue代码如下: 3.react hooks代码如下: 4.一点心得 要实现一个需求:一个代码编辑器,用户上次写的代码和现在的代码要区分出不同.网上找了几个案例,拿过去一用差点气吐血,报错像雪花一样,浪费时间! 本文中的代码,一键粘贴拿来即用,代码就是我在写这篇文章时写的demo,绝无报错. 1.第一步:下载插件 vue或者react都需要这一步且同样的下载方式. npm install diff-match-patch save npm install code

随机推荐