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，都只是框架，是工具，更重要的是良好的代码习惯，只要我们多谢多练，多思考多总结，都能很快熟悉上手。
