2024年最新熬夜7天吐血整理，适合Vue用户的React详细教程，字节跳动面试流程查询

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

这里是标题

我将被放在card组件的默认插槽里面

React实现

React连插槽都没有， 更别提具名插槽了，但是没有不代表不能模拟出来。对于React的props，我们不仅仅可以传入普通的属性，还可以传入一个函数，这时候我们就可以在传入的这个函数里面返回JSX,从而就实现了具名插槽的功能。

1. 对原有的Card组件进行修改

import React from ‘react’

export interface CardProps {

title?: string,

// 加入了一个renderTitle属性，属性类型是Function

renderTitle?: Function,

children: React.ReactNode

}

export default function(props: CardProps) {

const {title, renderTitle} = props

// 如果指定了renderTtile，则使用renderTitle,否则使用默认的title

let titleEl = renderTitle ? renderTitle() : {title}

return (

{titleEl}

{/**每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容 */}

{props.children}

);

}

2. 这时候就可以在外部自定义title了

import React from ‘react’

import Card from ‘./components/Card’

export default function () {

return (

<Card renderTitle={

() => {

return 我是自定义的标题

}

}>

我将被放在card组件的body区域内容

);

}

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的，这个就是Vue提供作用域插槽的原因。我们继续使用上面的Card组件为例，现在我基于上面的卡片组件开发了一个人员信息卡片组件，用户直接使用人员信息卡片组件就可以将人员信息显示到界面中，但是在某些业务模块需要自定义人员信息显示方式，这时候我们就需要使用到作用域插槽了。

Vue实现

1. 实现用户信息卡片组件，里面使用了作用域插槽

姓名: {{ userInfo.name }}

性别: {{ userInfo.sex }}

年龄: {{ userInfo.age }}

2. 在外部使用人员信息组件

• 姓名: {{ userInfo.name }}
• 年龄: {{ userInfo.age }}

• React实现

  在具名插槽那一小节我们通过给组件传入了一个函数，然后在函数中返回JSX的方式来模拟了具名插槽，那么对于作用域插槽，我们依然可以使用函数的这种方式，而作用域插槽传递的参数我们可以使用给函数传参的方式来替代

  1. 实现人员信息卡片组件

  import React, { useState } from ‘react’

  import Card from ‘./Card’

  interface UserCardProps {

  renderUserInfo?: Function

  }

  export interface UserInfo {

  name: string;

  age: number;

  sex: string;

  }

  export default function(props: UserCardProps) {

  const [userInfo] = useState({

  name: “张三”,

  age: 25,

  sex: “男”,

  });

  const content = props.renderUserInfo ? (

  props.renderUserInfo(userInfo)

  ) : (

  姓名: {userInfo.name}

  年龄: {userInfo.age}

  性别: {userInfo.sex}

  );

  return

  {content}

  }

  2. 在外部使用人员信息卡片组件

  import React from ‘react’

  import UserCard, { UserInfo } from “./components/UserCard”;

  export default function () {

  return (

  <UserCard

  renderUserInfo={(userInfo: UserInfo) => {

  return (
• 姓名： {userInfo.name}

• );

  }}

  );

  }

  Context, React中的provide/inject

  通常我们在项目开发中，对于多组件之间的状态管理，在Vue中会使用到Vuex,在React中会使用到redux或者Mobx,但对于小项目来说，使用这些状态管理库就显得比较大材小用了，那么在不使用这些库的情况下，如何去完成数据管理呢？比如面试最常问的祖孙组件通信。在Vue中我们可以使用provide/inject，在React中我们可以使用Context。

  假设有这样一个场景，系统现在需要提供一个换肤功能，用户可以切换皮肤，现在我们分别使用Vue和React来实现这个功能。

  Vue中的provide/inject

  在Vue中我们可以使用provide/inject来实现跨多级组件进行传值，就以上面所说场景为例，我们使用provide/inject来实现以下

  首先，修改App.vue内容为以下内容

  然后在任意层级的子组件中像下面这样使用

  这样就可以实现theme在所有子组件中进行共享了

  React中的Context

  在Vue中我们使用provide/inject实现了组件跨层级传值功能，在React中也提供了类似的功能即Context，下面我们使用Context来实现相同的功能。

  在项目src目录下新建context目录，添加MyContext.js文件，然后添加以下内容

  import {createContext} from ‘react’

  // 定义 MyContext,指定默认的主题为light

  export const MyContext = createContext({

  theme: ‘light’

  })

  MyContext提供了一个Provider，通过Provider可以将theme共享到所有的子组件。现在我们在所有的组件的共同父组件比如App.js上面添加MyContext.Provider将theme共享出去

  import { MyContext } from ‘@/context/MyContext’;

  export default function() {

  const [theme, setTheme] = useState(‘dark’)

  return (

  <MyContext.Provider

  value={{

  theme

  }}

  </MyContext.Provider>

  )

  }

  然后这时候就可以直接在所有的子组件里面使用定义的主题theme了

  import React, { useContext } from ‘react’

  import { MyContext } from ‘@/context/MyContext’;

  export default function() {

  const {theme} = useContext(MyContext)

  return <div className={child-${theme}}>

  }

  没有了v-model,但也不影响使用

  我们知道React和Vue都是单向数据流的，即数据的流向都是由外层向内层组件进行传递和更新的，比如下面这段React代码就是标准的单向数据流.

  import React, { useState } from “react”;

  export default function(){

  const [name] = useState(‘子君’)

  return

  }

  在vue中使用v-model

  如上代码，我们在通过通过value属性将外部的值传递给了input组件，这个就是一个简单的单向数据流。但是在使用Vue的时候，还有两个比较特殊的语法糖v-model和.sync，这两个语法糖可以让Vue组件拥有双向数据绑定的能力，比如下面的代码

  通过v-model,当用户修改input的值的时候，外部的name的值也将同步被修改。但这是Vue的语法糖啊，React是不支持的，所以React应该怎么办呢？这时候再想想自定义v-model，v-model实际上是通过定义value属性同时监听input事件来实现的，比如这样:

  <input :value=“value” @input=“$_handleChange”/>

  在react寻找v-model替代方案

  同理，React虽然没有v-model语法糖，但是也可以通过传入属性然后监听事件来实现数据的双向绑定。

  import React, { useState } from ‘react’

  export default function() {

  const [name, setName] = useState(‘子君’)

  const handleChange = (e) => {

  setName(e.target.value)

  }

  return

  }

  小编刚开始使用react，感觉没有v-model就显得比较麻烦，不过麻烦归麻烦，代码改写也要写。就像上文代码一样，每一个表单元素都需要监听onChange事件，越发显得麻烦了，这时候就可以考虑将多个onChange事件合并成一个，比如像下面代码这样

  import React, { useState } from ‘react’

  export default function () {

  const [name, setName] = useState(‘子君’)

  const [sex, setSex] = useState(‘男’)

  const handleChange = (e:any, method: Function) => {

  method(e.target.value)

  }

  return

  <input value={name} onChange={(e) => handleChange(e, setName)}>

  <input value={sex} onChange={(e) => handleChange(e, setSex)}>

  }

  没有了指令，我感觉好迷茫

  在Vue中我们一般绘制页面都会使用到template，template里面提供了大量的指令帮助我们完成业务开发，但是在React中使用的是JSX,并没有指令，那么我们应该怎么做呢？下面我们就将Vue中最常用的一些指令转换为JSX里面的语法(注意: 在Vue中也可以使用JSX)

  v-show与v-if

  在Vue中我们隐藏显示元素可以使用v-show或者v-if,当然这两者的使用场景是有所不同的，v-show是通过设置元素的display样式来显示隐藏元素的，而v-if隐藏元素是直接将元素从dom中移除掉。

  1. 看一下Vue中的v-show与v-if的用法

  姓名:{{ name }}

  {{ dept }}

  2. 将v-show，v-if转换为JSX中的语法

  在Vue中指令是为了在template方便动态操作数据而存在的，但是到了React中我们写的是JSX,可以直接使用JS,所以指令是不需要存在的，那么上面的v-show,v-if如何在JSX中替代呢

  import React, { useState } from ‘react’

  export default function() {

  const [showName] = useState(false)

  const [showDept] = useState(true)

  const [userInfo] = useState({

  name:‘子君’,

  dept: ‘银河帝国’

  })

  return (

  {/**模拟 v-show */}

  <span style={{display: showName ? ‘block’ : ‘none’}}>{userInfo.name}

  {/**模拟 v-if */}

  {showDept ? {userInfo.dept}: undefined}

  )

  }

  v-for

  v-for在Vue中是用来遍历数据的，同时我们在使用v-for的时候需要给元素指定key，key的值一般是数据的id或者其他唯一且固定的值。不仅在Vue中，在React中也是存在key的，两者的key存在的意义基本一致，都是为了优化虚拟DOM diff算法而存在的。

  1. 在Vue中使用v-for

  最后

  本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  前端视频资料：
  

  react’

  export default function() {

  const [showName] = useState(false)

  const [showDept] = useState(true)

  const [userInfo] = useState({

  name:‘子君’,

  dept: ‘银河帝国’

  })

  return (

  {/**模拟 v-show */}

  <span style={{display: showName ? ‘block’ : ‘none’}}>{userInfo.name}

  {/**模拟 v-if */}

  {showDept ? {userInfo.dept}: undefined}

  )

  }

  v-for

  v-for在Vue中是用来遍历数据的，同时我们在使用v-for的时候需要给元素指定key，key的值一般是数据的id或者其他唯一且固定的值。不仅在Vue中，在React中也是存在key的，两者的key存在的意义基本一致，都是为了优化虚拟DOM diff算法而存在的。

  1. 在Vue中使用v-for

  最后

  本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-tcVe4x2E-1715754998560)]

  前端视频资料：
  [外链图片转存中…(img-Oa4pD4Rn-1715754998562)]