vue 与 react 浅谈
浅谈Vue vs React对比以及hook
相同点:
- 使用虚拟 DOM
- 轻量级
- 提供了响应式和组件化的视图组件
- 都有生命周期
不同点:
- Vue是响应式,实现数据双向绑定,React是函数式的思想,单向数据流。
- Vue使用HTML模板,而React则是JSX渲染模板, 允许 DOM 操作
1. Vue2 vs React<v16.8.0
react 在 16.8.x 版本正式具备了 hooks 能力 ,vue3 也提出了Component API。
2.什么是hooks?
"hooks" 直译是 “钩子”,它并不仅是 react,甚至不仅是前端界的专用术语,而是整个行业所熟知的用语。
VUE组合式API:在 vue 组合式API里,也有“use” 作为开头的,一系列开发能力的方法。但实际上vue 组合式API其本身就是“vue hooks”的关键一环,如 onMounted、 ref。
React函数式组件:一系列以 “use” 作为开头的方法,它们提供了让你可以在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。如:useState, useEffect。
hook的优点:
- 代码组织高度聚合,可阅读性提升,将“分散在各种声明周期里的代码块”,通过 Hooks 的方式将相关的内容聚合到一起。
- 比 class 组件更容易理解,尤其是 this 。Hooks 写法直接告别了 this。
3.vue3和react函数组件对比
Vue3: 废弃了beforeCreate和create,使⽤setup代替,定义的数据/⽅法/⽣命周期都是定义在setup当中。
React: useEffect()用来引入具有副作用的操作,最常见的就是向服务器请求数据。 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useState()用于为函数组件引入状态 useState()这个函数接受状态的初始值,作为参数。该函数返回一个数组,数组的第一个成员是一个变量,指向状态的当前值。第二个成员是一个函数,用来更新状态。
ref函数接受一个简单类型传入并返回一个响应式且可变的 ref 对象 reactive 函数接收一个普通的对象传入,把对象数据转化为响应式对象并返回
VUE3:watch监听数据变化
React:useEffect()接受两个参数。第一个参数是一个函数,异步操作的代码放在里面。第二个参数是一个数组,用于给出 Effect 的依赖项,只要这个数组发生变化,useEffect()就会执行。第二个参数可以省略,这时每次组件渲染时,就会执行useEffect()。 如果同时存在多个useEffect,会按照出现次序执行。
UseState异步问题
原因:useState 返回的更新状态方法是异步的,会将多个状态改变合并在一起。useState每次执行会返回一个新的state(简单类型的等值拷贝),setState会触发UI更新(重新render,执行函数组件),由于UI更新是异步任务,所以setState也是一个异步过程
解决方法:使用回调方式传参或者使用useRef 存储这个数据,在useEffect里监听data的变化
React hook函数使用规则
1.只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用 ,如果我们想要有条件地执行一个 effect,可以将判断放到 Hook 的内部
2.只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用,你可以: 在 React 的函数组件中调用 在自定义 Hook 中调用其他
组合式API 和 React函数组件差异
React hook不允许出现在条件语句中,因为react hook底层是基于链表实现,每一个 hook 的 next 是指向下一个 hook 的,也就是顺序执行所有的hooks,所以不能在不同 hooks 调用中使用判断条件,因为 if 会导致顺序不正确。
相反,vue hook只会在setup函数被调用的时候被注册一次.vue 之所以能避开这些麻烦的问题,根本原因在于它对数据的响应是基于响应式的,是对数据进行了代理的。他不需要链表进行 hooks 记录,它对数据直接代理观察。
总结:
hook的优点:
- 更好的逻辑复用,提取共用的自定义组件
- 减小了代码体积,基于「逻辑功能」去组织代码,而不是 state 放在一块,method 放在一块
- 没有this的烦恼
基于其优点,我觉得hook一定是大前端的一个趋势。
总之,不管是React还是Vue,都只是框架,是工具,更重要的是良好的代码习惯,只要我们多谢多练,多思考多总结,都能很快熟悉上手。