react 基础 常见面试题

1.(在构造函数中)调用super(props)的目的是什么?

在super()被调用之前,子类是不能食用this的,在es5中,子类必须在constructor中调用super().
传递props给super()的原因则是便于(在子类中)访问this.props

2.分别说明vue 和react中ref的作用,并说明react中ref的两种用法和区别?

作用:在vue和react中都可以通过给子组件添加ref属性来获取/设置子组件的状态.

在react中 ref 有两种用法: .字符串,<子组件名ref = ‘自定义名称’>

(1)回调函数,<子组件名 ref={(el)=>this.getEl(el)}>
(2)字符串用法可以通过this.refs.自定义名称来获取子组件状态或设置子组件的状态.但是回调函数不能通过this.refs来获取,而是回调函数中直接进行操作

4 使用箭头函数(arrow functions) 的有点是什么?

作用域安全:在箭头函数之前,每一个新创建的函数都有定义自身的this值(在构造函数中是新对象;在严格模式下
函数调用终端this是未定义的;如果函数被称为”对象法”,则为基础对象),但箭头函数不会,它会使用封闭执行的上下文的this值.
简单:箭头函数容易阅读和书写
清晰:当一切都是一个箭头函数,任何常规函数都可以立即用于定义作用域.开发者总是可以查找next-higher函数语句,以插卡this的值

5 为什么需要React中的路由?

React用于多个路由,当用户定义 特定的url时,如果url与React内定义的任何”路由”’的路径匹配,则用户将重定向到特定路由.
所以基本上我们需要在自己的应用中添加一个Router库,允许创建多个路由,每个路由都会向我们提供一个独特的视图

6.简要说明Flux是什么/它的运行流程是什么?

Flux是Dispatcher的前端应用架构模式,它有三部分组成:Dispatcher ,Store和View.
其中Dispatcher(分发器)用于分发事件,Store用来存储应用状态,同事响应事件并更新数据;View表示视图层,订阅来自Store的数据,渲染到页面上.
Flux做到了数据的单向流动,它利用强制规定Store不可被直接修改,从而保证了数据的纯粹和干净,然后结合React作为View层,每当Store改变时,就重新以最小的代价进行渲染

7…Antd?是什么?如何安装和使用?

Antd是基于Ant Design 设计体系的React UI组件库,主要用于研发企业级中后台产品. 安装:npm install antd
–save 使用:import {DatePicler} from ‘antd’; ReactDOM.render(),mountNode)

8 当你调用setState的时候,发生了什么事?

当调用setState时候.React会做的第一件事是将传递给setState的对象合并到组件当前状态,

9 在那个生命周期事件中你会发出ajax请求.为什么?

Ajax在挂载期componentDidMount生命周期事件中 (1).您不能保证在组件挂载之前，AJAX请求将无法
resolve。如果这样做，那意味着你会尝试在一个未挂载的组件上设置 StState，这不仅不会起作用，反而会对你大喊大叫。 在
componentDidMount 中执行 AJAX 将保证至少有一个要更新的组件。

10 .React有何优点?

(1).只需要查看render函数就会很容易知道一个组件是如何被渲染的
(2).jsx的引入,是的组件的代码更加可读,也更容易看懂组件的布局,或者组件之间是如何互相引用的
(3).支持服务端渲染,这可以该进SEO和性能 (4)易于测试
(5).React只关注View层,所以可以和其他任何框架(如Baclkbone,js Anguler,js)一起使用

11 .React中路由有哪些组件?说明它们的作用?

BrowserRouter，在需要使用路由的页面中引入； Switch，路由选择器 Route，路由配置规则 Redirect，路由重定向
Link，路由导航 NavLink，带activeClass的路由导航

12 简要说明React中给按钮进行时间绑定的写法(es5和es6两种方法).并说明他们之间的区别?

es5: ，这样写可以通过点击执行指定的函数，但是在函数中获取不到this；
，这样写函数在页面加载时会自动执行，不能这样写； ，这样写可以在函数中保持this指向。 es6: <button
onClick={()=>this.函数名()}>，es6的方式不会自动执行函数，并且能够保持this指向，.比es6简介很多。

13 说明React中实现页面跳转都有哪几种方式?详细说明不停方式之间的区别?

(1).通过内置组件进行跳转:
Link与NavLink,这两个组件都可以在页面中生成超链接a标签,填写上to属性就可以进行页面跳转,区别是NavLink可以设置导航选中的效果
(2).通过this.props.history的内置方法进行跳转到目标路由; Push,把当前访问的链接进行记录并跳转到目标路由
Replace. 吧当前访问的链接进行替换并跳转到目标路由; Go 进行已经访问路由地址的退回,一般写负数,-1表示退回到上一个路由地址

14说明React中什么是动态路由?动态路由如何设置,动态路由中的参数如何获取到?

动态路由是在路由地址中定义一个动态的变量值,通过变量值的变化,实现访问同一个页面组件. 但是展示的内容不同.

在定义路由规则时,通过冒号:参数名的形式定义动态路由. Path:’/info/:id’,
在页面组件中通过this.props.match.params.参数名 来获取传递的参数

15 在React中网络请求,如何设置代理?已访问http://localhost:3000/music/songlist为例,写出至少两种网络请求get方法的代码

在项目根目录的package.json通过"proxy":“目标域名地址:端口号"进行代理的设置 设置代理"proxy”:“http://localhost:3000”
通过jquery请求
npm install jquery
import $ from ‘jquery’
$.ajax({
url:‘/music/songlist’,
method:‘get’
success:function(){}
})
通过axios请求
npm i axios
import axios from ‘axios’
axios.get(‘/music/songlist’).then();
通过fetch请求
fetch(‘/music/songlist’).then((res)=>res.json()).then((resJson)=>console.log(resJson))