公众号：需要以下pdf，关注下方

2023已经过完了，让我们来把今年的面试题统计号，来备战明年的金三银四！所以，不管你是社招还是校招，下面这份前端面试工程师高频面试题，请收好。

背景

由于工作需要学习react框架；最开始看文档的时候感觉还挺难的。但当我看了半天文档以后才发现，原来react这样学才是最快的；前提是同学们会vue一类的框架哈。

该方法适用于会vue的同学们食用

我们在学习以前先去想一想，在vue中我们常用的方法是什么，我们遇到一些场景时在vue中是怎么做的。

当我们想到这儿的时候就会发现，对啊；既然vue是这样做的，那么react中是怎么做的呢？别急，我们一步一步对比着来。

这样岂不是更能理解哦！下面就让我们开始吧！

冲冲冲。。。

Vue梳理

在开始之前，我们先来梳理一下我们在vue中常用的API或者场景有哪些。

以下这几种就是我们常见的一些功能，主要是列表渲染、表单输入和一些计算属性等等；我们只需要根据原有的需要的功能去学习即可。

组件传值获取DOM列表渲染条件渲染class计算属性监听器表单输入模板vue/react对比学习

组件传值

vue

react

// 父组件

export default function tab(props:any) {

const [serverUrl, setServerUrl] = useState('https://');

console.log(props);

// 父组件接收子组件的值并修改

const changeMsg = (msg?:string) => {

setServerUrl(msg);

};

return(

)

}

// 子组件

function TabName(props){

console.log('props',props);

// 子传父

const handleClick = (msg:string) => {

props.changeMsg(msg);

};

return (

{props.msg}

{handleClick('77777')}}>测试

);

};

获取DOM

vue

this.$refs['ref']

react

// 声明ref

const domRef = useRef(null);

// 通过点击事件选择input框

const handleBtnClick = ()=> {

domRef.current?.focus();

console.log(domRef,'domRef')

}

return(

增加

)

列表渲染

vue

react

//声明对象类型

type Coordinates = {

name:string,

age:number

};

// 对象

let [userState, setUserState] = useState({ name: 'John', age: 30 });

// 数组

let [list, setList] = useState([{ name: '李四', age: 30 }]);

// 如果你的 => 后面跟了一对花括号 { ，那你必须使用 return 来指定返回值！

const listItem = list.map((oi)=>{

return {oi.name}

});

return (

{

list.map((oi)=>{

return {oi.name}

})

}

{ listItem }

)

条件渲染

计算属性

vue

computed: {

userinfo() {

return this.$store.state.userinfo;

},

},

react

const [serverUrl, setServerUrl] = useState('https://localhost:1234');

let [age, setAge] = useState(2);

const name = useMemo(() => {

return serverUrl + " " + age;

}, [serverUrl]);

console.log(name) // https://localhost:1234 2

监听器

vue

watch: {

// 保证自定义菜单始终显示在页面中

customContextmenuTop(top) {

...相关操作

}

},

react

import { useEffect, useState } from 'react';

export default function home() {

const [serverUrl, setServerUrl] = useState('https://localhost:1234');

const [age, setAge] = useState(2);

/**

* useEffect第二个参数中所传递的值才会进行根据值的变化而出发;

* 如果没有穿值的话,就不会监听数据变化

*/

useEffect(()=>{

if (age !== 5) {

setAge(++age)

}

},[age])

useEffect(()=>{

if(serverUrl !== 'w3c') {

setServerUrl('w3c');

}

},[serverUrl])

return(78)

}

总结

从上面的方法示例我们可以得出一个结论：在其他框架（自己会的）中常用到的方法或者场景进行针对性的学习即可。

这样的好处是你能快速的上手开发，然后在实际开发场景中遇到解决不了的问题再去查文档或者百度。

这只是我的一点小小的发现，哈哈哈。。。

如果对你有感触的话，可以尝试一下这个方法；我觉得还是很不错的

注意：react推荐函数式组件开发，不推荐类组件开发，我在上面没有说明，大家也可以去文档看看，类组件和函数组件还是有很大差别的，如：函数组件没有生命周期，一般使用监听来完成的，监听的使用方法还是有所不同，大家可以具体的去试试，我在这儿也是告诉大家一些方法；具体去学了才是你的。

为了方便自己学习记录，以及给大家提供思路，我下期给大家带来 vite + ts + react的搭建

原文链接：https://juejin.cn/post/7268844150233219107