No104.精选前端面试题，享受每天的挑战和学习(小米)

「作者简介」：前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级
「个人主页」：阿珊和她的猫
「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

• Vue.js 和 Egg.js 开发企业级健康管理项目
• 带你从入门到实战全面掌握 uni-app

聊一下vue和react的区别

下面是一个简单的表格，对比Vue和React的一些主要区别：

	Vue	React
生态系统	完整的生态系统，带有官方维护的路由器和状态管理库	快速增长的生态系统，丰富的第三方库支持
学习曲线	相对较低的学习曲线，易于上手和理解	相对较高的学习曲线，需要更多的时间和精力来掌握
组件化开发	单文件组件（SFC）结构，模板、逻辑和样式都在同一文件中	分离的JSX语法，组件逻辑和样式可以在不同文件中
数据绑定	双向数据绑定，可以实时响应数据的变化	单向数据流，通过Props和State管理数据的传递和更新
事务处理和更新	通过Vue的响应式系统自动进行事务处理和更新	通过虚拟DOM进行高效的批量更新和渲染
社区支持和发展	大型且活跃的社区，持续的更新和改进	也有庞大的社区，但React的开发公司（Facebook）提供强大的支持。
移动开发支持	原生的移动端支持，有Vue Native和Weex等框架	React Native提供跨平台移动开发支持

需要注意的是，这些区别只是表面上的差异，并不代表Vue或React的优劣。选择使用哪个框架取决于个人或项目的需求，以及开发团队的技术背景和偏好。

react生命周期有哪些

React 16之前的版本，组件生命周期分为三个阶段：挂载阶段、更新阶段和卸载阶段。
每个阶段都有对应的生命周期方法，用于在特定的时刻执行特定的操作。

在React 16及之后的版本，生命周期方法已经有了一些变化，被分为挂载、更新、错误处理和卸载等四个阶段。
下面是React组件的生命周期方法列表：

挂载阶段：

1. constructor：组件被创建时调用，用于初始化状态和绑定事件处理程序。

2. static getDerivedStateFromProps：在组件创建和更新过程中调用，用于从props中派生一些新的状态。

3. render：根据当前的props和state，渲染组件的UI。

4. componentDidMount：组件已经被渲染到DOM中后调用，适合执行依赖DOM的初始化操作。

更新阶段：

5. static getDerivedStateFromProps：在更新过程中调用，用于从props中派生一些新的状态。

6. shouldComponentUpdate：在更新之前调用，用于控制组件是否进行更新。

7. render：根据当前的props和state，重新渲染组件的UI。

8. getSnapshotBeforeUpdate：在render之后、更新DOM之前调用，用于获取更新前的DOM状态。

9. componentDidUpdate：组件完成更新后调用，适合执行DOM操作或发起网络请求等更新相关的操作。

错误处理：

10. static getDerivedStateFromError：在子组件发生错误时调用，用于在错误边界中优雅地处理错误。

11. componentDidCatch：在子组件发生错误后调用，用于捕获和记录错误信息。

卸载阶段：

12. componentWillUnmount：组件即将被卸载或销毁时调用，适合执行一些清理工作，如取消定时器、取消订阅等。

以上是React 16之前和16及之后的版本中常见的生命周期方法。但需要注意的是，在React 17后，一些生命周期方法已被标记为过时，建议使用新的替代方法或钩子函数，如使用新的effect钩子函数来替代componentDidMount和componentDidUpdate。

hooks解决了什么问题

Hooks 是 React 16.8 版本引入的特性，它旨在解决 React 中以下几个常见问题：

1. 组件之间逻辑复用的问题： 在 React 之前，为了在组件之间共享逻辑，开发者需要使用高阶组件（Higher-Order Components）或 Render Props 等模式。这导致了组件层级的嵌套和复杂性增加。Hooks 通过提供可复用的状态逻辑和副作用逻辑（例如：处理订阅、定时器等）的方式，使逻辑复用更加简单和直接。

2. 在组件之间难以复用状态逻辑的问题： 在 React 中，状态逻辑通常是与组件绑定的，而不是与具体的视图层级绑定。这导致了在组件之间复用和共享状态逻辑变得困难和容易出错。Hooks 提供了可以在组件之间复用状态逻辑的方式，例如使用 useState 钩子函数，从而使状态逻辑更加直接、简化和可复用。

3. 复杂组件变得难以理解和维护的问题： 当业务逻辑复杂时，组件的生命周期函数会变得庞大而难以理解和维护。Hooks 的引入使得组件的生命周期被逻辑相关的片段所替代，提供了更清晰简洁的代码结构，使得组件的逻辑更易于理解和维护。

4. 类组件带来的学习曲线和抽象度的问题： 使用类组件需要理解和掌握类的概念和语法，对于初学者来说可能增加了学习曲线和理解难度。而且使用类组件时需要注意 this 的指向等问题。Hooks 提供了以函数形式编写组件的选项，使得学习曲线降低，代码更加简洁。

总体而言，Hooks 使得在 React 中编写组件更简单、直观和灵活，解决了组件之间逻辑复用、状态复用、组件维护性和类组件的学习曲线等问题，提供了更好的开发体验。

小程序跳转传参怎么传

在小程序中，可以通过以下几种方式实现跳转页面并传递参数：

1. URL参数传递： 在跳转链接的URL中携带参数。在原页面中使用wx.navigateTo或wx.redirectTo方法跳转到目标页面时，可以在URL中添加参数。目标页面可以通过options.query获取到参数值。例如：

   // 原页面跳转到目标页面并传递参数
   wx.navigateTo({
     url: '/pages/target/target?param1=value1¶m2=value2'
   });
   

   在目标页面的onLoad生命周期函数中，可以通过options.query来获取参数：

   onLoad: function(options) {
     const param1 = options.query.param1;
     const param2 = options.query.param2;
     // 使用参数进行相关操作
   }
   

2. 全局数据传递： 在原页面中使用getApp().globalData或全局单例模式来设置全局数据，在目标页面中可以直接访问该全局数据。例如：

   // 原页面设置全局数据
   getApp().globalData.param1 = value1;
   getApp().globalData.param2 = value2;
   
   // 目标页面直接访问全局数据
   const param1 = getApp().globalData.param1;
   const param2 = getApp().globalData.param2;
   // 使用参数进行相关操作
   

   需要注意的是，全局数据是共享的，可能会影响整个小程序的状态，谨慎使用。

3. Storage存储传递： 使用wx.setStorageSync方法在原页面存储参数，在目标页面中使用wx.getStorageSync来获取参数值。例如：

   // 原页面存储参数
   wx.setStorageSync('param1', value1);
   wx.setStorageSync('param2', value2);
   
   // 目标页面获取参数
   const param1 = wx.getStorageSync('param1');
   const param2 = wx.getStorageSync('param2');
   // 使用参数进行相关操作
   

   需要注意的是，Storage的数据存储在本地，需要手动清除或更新。

以上是几种常见的小程序跳转页面传递参数的方式。选用哪种方式取决于具体的需求和场景。

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app