11+实战技巧，让你轻松从Vue过渡到React，2024年最新蚂蚁金服面试题java

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

fetching: false,

selects: [

‘boy’,

‘girl’

],

selectValue: ‘’

}

},

computed: {

result () {

return this.fetching ? ‘请求中’ : 请求结果： 选中${this.selectValue || '~'}

}

},

watch: {

selectValue () {

this.fetch()

}

},

methods: {

onSelect (value) {

this.selectValue = value

},

fetch () {

if (!this.fetching) {

this.fetching = true

setTimeout(() => {

this.fetching = false

}, 1000)

}

}

}

}

React

React中要实现监听某些数据的变化执行响应的动作，可以使用useEffect

watch源代码点这里

import React, { useState, useMemo, useEffect } from “react”

import ‘./watch.css’

export default function Watch() {

const [fetching, setFetching] = useState(false)

const [selects, setSelects] = useState([

‘boy’,

‘girl’

])

const [selectValue, setSelectValue] = useState(‘’)

const result = useMemo(() => {

return fetching ? ‘请求中’ : 请求结果： 选中${selectValue || '~'}

}, [ fetching ])

const onSelect = (value) => {

setSelectValue(value)

}

const fetch = () => {

if (!fetching) {

setFetching(true)

setTimeout(() => {

setFetching(false)

}, 1000)

}

}

useEffect(() => {

fetch()

}, [ selectValue ])

return (

{

selects.map((item, i) => {

return <button key={ i } onClick={ () => onSelect(item) }>{ item }

})

}

{ result }

)

}

预览

watch.gif

6. style

---

有时候难免要给元素动态添加样式style，Vue和React都给我们提供了方便的使用方式。

在使用上基本大同小异：

相同点：

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

不同点：

1. Vue可以通过数组语法绑定多个样式对象，React主要是单个对象的形式（这点Vue也可以）

2. React 会自动添加 ”px”(这点Vue不会自动处理) 后缀到内联样式为数字的属性，其他单位手动需要手动指定

3. React样式不会自动补齐前缀。如需支持旧版浏览器，需手动补充对应的样式属性。Vue中当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

Vue

style源代码点这里

React

style源代码点这里

import React from “react”

export default function Style (){

const style = {

width: ‘100%’,

height: ‘500px’,

}

const style2 = {

backgroundImage: ‘linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)’,

borderRadius: ‘10px’,

}

return (

)

}

预览

style.png

7. class

---

如何动态地给元素添加class？Vue中我自己比较喜欢用数组的语法（当然还有对象的写法），React中也可以使用一些第三方包如classnames起到更加便捷添加class的效果。

下面我们看下不借助任何库，如何实现按钮选中的效果

Vue

class源代码点这里

<button :class=“buttonClasses” @click=“onClickActive”>{{ buttonText }}

React

class源代码点这里

import React, { useMemo, useState } from “react”

import ‘./class.css’ // 此处样式与上面是一样的

export default function Class (){

const [ isActive, setIsActive ] = useState(false)

const buttonText = useMemo(() => {

return isActive ? ‘已选中’ : ‘未选中’

}, [ isActive ])

const buttonClass = useMemo(() => {

// 和Vue中不太一样的是我们需要手动join一下，变成’button active’形式

return [ ‘button’, isActive ? ‘active’ : ‘’ ].join(’ ')

}, [ isActive ])

const onClickActive = () => {

setIsActive(!isActive)

}

return (

)

}

预览

8.provide/inject

---

Vue和React中对于全局状态的管理都有各自好的解决方案，比如Vue中的Vuex，React中的redux和Mobx，当然小型项目中引入这些有点大材小用了,有没有其他解决方案呢？

Vue中可以使用provide/inject

React中则可以使用Context

假设全局有有一个用户信息userInfo的变量，需要在各个组件中都能便捷的访问到，在Vue和React中该如何实现呢?

Vue

Vue中借用provide/inject可以将顶层状态，传递至任意子节点，假设我们再app.vue中声明了一个userInfo数据

provide源代码点这里

app.vue

我是Vue栗子

provide.vue

{{ userInfo.name }}

React

React中要实现类似的功能，可以借助Context，将全局状态共享给任意子节点

provide源代码点这里

context/index.js

import { createContext } from “react”;

export const UserInfoContext = createContext({

userInfo: {

name: ‘’

}

})

app.js

import { UserInfoContext } from ‘./context/index’

function App() {

return (

// 注意这里

<UserInfoContext.Provider

value={{ userInfo: { name: ‘前端胖头鱼’ } }}

我是React栗子

<Route path=“/v-if” element={} />

<Route path=“/v-show” element={} />

<Route path=“/v-for” element={} />

<Route path=“/computed” element={} />

<Route path=“/watch” element={} />

<Route path=“/style” element={

<Route path=“/class” element={} />

<Route path=“/slot” element={} />

<Route path=“/nameSlot” element={} />

<Route path=“/scopeSlot” element={} />

<Route path=“/provide” element={} />

</UserInfoContext.Provider>

);

}

provide.js

import React, { useContext } from “react”

import { UserInfoContext } from ‘…/context/index’

export default function Provide() {

// 通过userContext，使用定义好的UserInfoContext

const { userInfo } = useContext(UserInfoContext)

return (

{ userInfo.name }

)

}

预览

4127923929-provide.png

9. slot(默认插槽)

---

插槽是Vue中非常实用的功能，我把他理解成”坑位“，等待着你从外面把他填上，而这个”坑位“可以分成默认坑位、具名坑位、作用域坑位，咱们通过一个实战例子来看看React中如何实现同等的功能。

假设我们要实现一个简单的dialog组件,基本功能是标题可以传字符串，内容部分可以完全自定义，应该怎么实现呢？

Vue

slot源代码点这里

dialog

{{ title }}

// 注意这里放了一个默认插槽坑位

slot

<button @click=“onToggleVisible”>切换dialog

:visible.sync=“visible”

title=“默认插槽”

// 这里会替换到的位置处

前端胖头鱼

React

前面通过props.children属性可以读取组件标签内的内容算是和Vue默认插槽实现了一样的功能，但是具名插槽如何实现呢？React好玩的其中一个点，我觉得是属性啥玩意都可以传、字符串、数字、函数、连DOM也可以传。所以实现具名插槽也很简单，直接当属性传递就可以

nameSlot源代码点这里

Dialog改造

import React, { useState, useEffect } from “react”

import ‘./dialog.css’

export default function Dialog(props) {

// 原谅我用visible -1这种傻叉的方式先实现了, 重点不是在这里

const { title, main, visible = -1 } = props

const [visibleInner, setVisibleInner] = useState(false)

const onHide = () => {

setVisibleInner(false)

}

useEffect(() => {

setVisibleInner(visible > 0)

}, [ visible ])

return (

{/* { title ? 

{ title }

 : null } */}

{/* 注意这里，直接渲染title就可以了 */}

{ title }

{/* 注意这里，通过children实现默认插槽功能 */}

{/* {children} */}

{/* 这一这里不是children了，是main */}

{ main }

)

}

nameSlot

import React, { useState } from “react”

import Dialog from ‘./components/dialog’

import ‘./slot.css’

export default function NameSlot() {

const [visible, setVisible] = useState(-1)

const onToggleVisible = () => {

setVisible(Math.random())

}

return (

visible={visible}

// 注意这里，直接传递的DOM

title={ 

默认插槽

 }

// 注意这里，直接传递的DOM

main={ 

前端胖头鱼

 }

)

}

预览

可以看到具名插槽，React直接用属性反而更简洁一些

具名插槽.gif

11. scope slot(作用域插槽)

---

有了默认插槽、具名插槽最后当然少不了作用域插槽啦！有时让插槽内容能够访问子组件中才有的数据是很有用的，这也是作用域插槽的意义所在

假设：Dialog组件内部有一个userInfo: { name: '前端胖头鱼' }数据对象，希望使用Dialog组件的外部插槽也能访问到，该怎么做呢？

Vue

scopeSlot源代码点这里

Dialog

{{ title }}

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

df42bdead44f87c4da9ab6.gif)

具名插槽.gif

11. scope slot(作用域插槽)

---

有了默认插槽、具名插槽最后当然少不了作用域插槽啦！有时让插槽内容能够访问子组件中才有的数据是很有用的，这也是作用域插槽的意义所在

假设：Dialog组件内部有一个userInfo: { name: '前端胖头鱼' }数据对象，希望使用Dialog组件的外部插槽也能访问到，该怎么做呢？

Vue

scopeSlot源代码点这里

Dialog

{{ title }}

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-dd7dKGR2-1713618344128)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！