2022前端社招React面试题 附答案 React视频讲解 点击学习
全部视频：点击学习
1. React-Router的实现原理是什么？
客户端路由实现的思想：

• 基于 hash 的路由：通过监听
  

  hashchange

  
  

事件，感知 hash 的变化

• 改变 hash 可以直接通过 location.hash=xxx

• 基于 H5 history 路由：
  
  • 改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API
  • 监听 url 的变化可以通过自定义事件触发实现

react-router 实现的思想：

• 基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知
• 通过维护的列表，在每次 URL 发生变化的回收，通过配置的 路由路径，匹配到对应的 Component，并且 render

2. 如何配置 React-Router 实现路由切换
（1）使用 组件
路由匹配是通过比较 的 path 属性和当前地址的 pathname 来实现的。当一个 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 将始终被匹配。

// when location = { pathname: '/about' } // renders // renders null // renders 复制代码

（2）结合使用 组件和 组件
用于将 分组。

复制代码

不是分组 所必须的，但他通常很有用。 一个 会遍历其所有的子 元素，并仅渲染与当前地址匹配的第一个元素。
（3）使用 、 、 组件
【2022前端React面试题 附答案】 组件来在你的应用程序中创建链接。无论你在何处渲染一个 ，都会在应用程序的 HTML 中渲染锚（）。

Home // Home 复制代码

是一种特殊类型的 当它的 to属性与当前地址匹配时，可以将其定义为"活跃的"。

// location = { pathname: '/react' } React // React 复制代码

当我们想强制导航时，可以渲染一个，当一个渲染时，它将使用它的to属性进行定向。
3. React-Router怎么设置重定向？
使用组件实现路由的重定向：

复制代码

当请求 /users/:id 被重定向去 '/users/profile/:id'：

• 属性 from: string：需要匹配的将要被重定向路径。
• 属性 to: string：重定向的 URL 字符串
• 属性 to: object：重定向的 location 对象
• 属性 push: bool：若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。

4. react-router 里的 Link 标签和 a 标签的区别
从最终渲染的 DOM 来看，这两者都是链接，都是 标签，区别是∶ 是react-router 里实现路由跳转的链接，一般配合 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。
做了3件事情:

• 有onclick那就执行onclick
• click的时候阻止a标签默认事件
• 根据跳转href(即是to)，用history (web前端路由两种方式之一，history & hash)跳转，此时只是链接变了，并没有刷新页面而标签就是普通的超链接了，用于从当前页面跳转到href指向的另一 个页面(非锚点情况)。

a标签默认事件禁掉之后做了什么才实现了跳转?

let domArr = document.getElementsByTagName('a') [...domArr].forEach(item=>{ item.addEventListener('click',function () { location.href = https://www.it610.com/article/this.href }) })

5. React-Router如何获取URL的参数和历史对象？
（1）获取URL的参数

• get传值

路由配置还是普通的配置，如：'admin'，传参方式如：'admin?id='1111''。通过this.props.location.search获取url获取到一个字符串'?id='1111' 可以用url，qs，querystring，浏览器提供的api URLSearchParams对象或者自己封装的方法去解析出id的值。

• 动态路由传值

路由需要配置成动态路由：如path='/admin/:id'，传参方式，如'admin/111'。通过this.props.match.params.id 取得url中的动态路由id部分的值，除此之外还可以通过useParams（Hooks）来获取

• 通过query或state传值

传参方式如：在Link组件的to属性中可以传递对象{pathname:'/admin',query:'111',state:'111'}; 。通过this.props.location.state或this.props.location.query来获取即可，传递的参数可以是对象、数组等，但是存在缺点就是只要刷新页面，参数就会丢失。
（2）获取历史对象

• 如果React >= 16.8 时可以使用 React Router中提供的Hooks

import { useHistory } from "react-router-dom"; let history = useHistory(); 复制代码

2.使用this.props.history获取历史对象

let history = this.props.history;

6：React 中 refs 干嘛用的？

主题: React
难度: ??

Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。
咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。

class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return (

this.input = input} /> Submit

) } } 复制代码

请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。
经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。

function CustomForm ({handleSubmit}) { let inputElement return (

handleSubmit(inputElement.value)}> inputElement = input} /> Submit

) }

7：在 React 中如何处理事件

主题: React
难度: ??

为了解决跨浏览器的兼容性问题，SyntheticEvent 实例将被传递给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。
8：如何创建 refs

主题: React
难度: ??

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; } } 复制代码

或者这样用：

class UserForm extends Component { handleSubmit = () => { console.log("Input Value is: ", this.input.value) } render () { return (

this.input = input} /> // Access DOM input in handle submit Submit

) } }

9：在构造函数调用 super 并将 props 作为参数传入的作用是啥？

主题: React
难度: ??

在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。
传递 props

class MyComponent extends React.Component { constructor(props) { super(props); console.log(this.props); // { name: 'sudheer',age: 30 } } } 复制代码

没传递 props

class MyComponent extends React.Component { constructor(props) { super(); console.log(this.props); // undefined // 但是 Props 参数仍然可用 console.log(props); // Prints { name: 'sudheer',age: 30 } }render() { // 构造函数外部不受影响 console.log(this.props) // { name: 'sudheer',age: 30 } } } 复制代码

上面示例揭示了一点。props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。
10：如何 React.createElement ？

主题: React
难度: ???

问题：

const element = (Hello, world!) 复制代码

上述代码如何使用 React.createElement 来实现:

const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

推荐阅读

• 

  女性提前进入更年期的危害 女白领应警惕更年期提前来扰
• 

  干煸杏鲍菇
• 

  如何使用手机上的云服务器？ 手机的云服务器怎么用
• 

  粉饼和散粉的区别和作用
• 

  商标自助查询系统官网 注册商标如何收费，商标注册证查询网中国商标网
• 

  大闸蟹怎么保存才不死
• 

  怪物猎人世界特殊装备解锁条件大全 怪物猎人世界特殊装备解锁条件大全
• 

  mysql允许局域网连接 mysql允许外网登陆
• 

  阳光玫瑰亩产量一般多少斤，适合哪些地区种植
• 

  一文搞懂什么叫做唯心主义？ 唯心主义通俗解释
• 

  桂林手撕白切鸡做法 一招解决你不会切白切鸡的烦恼
• 

  全面战争三国诸葛亮怎么招募
• 

  手动挡倒车入库视频教程 如何倒车入位视频教程，倒车入库视频技巧
• 

  标准的java三层代码，java三层架构代码规范
• 

  简单的安卓阅读软件,阅读浏览器可离线使用阅读小说更清楚
• 

  黑米搭配什么煮粥最好
• 

  农村拆迁土地纠纷怎么办手续 农村拆迁土地纠纷怎么办？
• 

  关于色彩诊断的觉察
• 

  农村户口的残疾赔偿金标准是什么？
• 

  抑郁症|2021年将有9200万独居者：警惕孤独成为抑郁的温床

• react 与 angular
• React项目build失败之MiniCssExtractPlugin
• Mac OS初始化一个React项目
• React项目构建常用命令
• React 父组件如何调用子组件方法
• 学习react源码 征服面试官
• 搞定react源码 惊艳面试官
• 2022前端开发社招React面试题 附答案
• 人人都能读懂的react源码解析(大厂高薪必备)2.react心智模型(来来来,让大脑有react思维吧)