react面试题

1. 受控组件与非受控组件

在 HTML 中，表单元素（如、 和 ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

非受控组件是表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）

2.对象合并的方法

…扩展运算符，谁在后面谁覆盖前面的

let emptyObject = { ...a, ...b };

Object.assign(tag,tag1)把后面的合并到目标对象中

3.switch与redirect的关系

重定向——Redirect组件必须包裹在Switch组件中 & /-根路径 -需添加exact属性-路径进行精确匹配，不会存在包含关系

4.数组合并的方法

forEach方法
forEach是最简单、最常用的数组遍历方法，它提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值。

let arr=[1,2,3,4,5];
let res=0;
arr.forEach(item=>{
	item>=3?res++:res
});

以上是个简单的例子，计算出数组中大于等于3的元素的个数。

回调函数的参数，第一个是处于当前循环的元素，第二个是该元素下标，第三个是数组本身。三个参数均可选。

二、map方法
map，从字面上理解，是映射，即数组元素的映射。它提供一个回调函数，参数依次为处于当前循环的元素、该元素下标、数组本身，三者均可选。默认返回一个数组，这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。

let arr=[1,2,3,4,5]
let res=arr.map((item,index)=>{
		return item*(index+1)
});
console.log(arr)
console.log(res)

map方法不改变原数组。
三、filter方法
filter，过滤，即对数组元素的一个条件筛选。它提供一个回调函数，参数依次为处于当前循环的元素、该元素下标、数组本身，三者均可选。默认返回一个数组，原数组的元素执行了回调函数之后返回值若为true，则会将这个元素放入返回的数组中。

let arr=[1,2,3,4,5];
let res=arr.filter((item,index)=>{
	return item*index>=3
});

filter方法不改变原数组

5.react是单向数据流，如何实现数据双向邦定?

使用元素使用onchange绑定一个函数监听数据变化，函数使用this.setState修改。

6.用过es6 吗 用过哪些？到少说出6个以上！

1.let、const

​2. 变量的结构赋值

​3. promise（Promise） 是异步编程的一种解决方案

​ Promise对象有以下两个特点。

​ （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

​ （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

）

​ 4. symbol（ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。）

​ 5. 箭头函数

​ 6. set和map

7.React 组件的几种写法？分别是什么，并说出他们的区别？

两种，类组件和函数组件（有状态组件和无状态组件）

区别：

​ 1.（是否拥有state）有状态组件可以使用状态：state，无状态组件不能使用state，无状态；

​ 2.（生命周期）有状态组件有生命周期函数，无状态组件没有生命周期函数

​ 3. 函数组件使用参数形式接收props，类组件使用this.props接收

​ 4. 渲染方式：函数：return 类组件：render

8.React中事件this邦定的实现方法有哪些?

​ 在constructor里使用bind绑定

​ 箭头函数

​ 写函数是使用.bind绑定

9.路由中NavLink 与Link什么区别？

​ <NavLink>组件：主要用于导航拥有激活状态准备的；它和Link的路由匹配效果一致；不同的是NavLink有状态标记，Link无状态标记

​ NavLink进行路由切换的

​ NavLink使用时会产生一个active的类名可以用于进行高量或当前样式的显示。

10.浏览器兼容性问题有哪些？（css、js）

​ 1、img 下面白边
​ 2、a 下划线
​ 3、li 父级有边框浏览器不同可能在边框外面也可能在边框里面

浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同 {margin:0；padding:0；}

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

图片默认有间距

11.如何实现一个元素垂直水平居中，用三种以上代码实现？

​ position+margin

​ position+transform

​ flex

12.在使用react 项目开发时，你们是如何与后端进行接口联调的？

​ 假数据：请求字段，参数是不是对的，接口返回的字段是否能用

​ 现在：后端给参数、接口文档，能显示数据，实现实时分页交互

​ 之前只能打包放到服务器上检测，现在都在本地代理方式，进行检测，可以随时测试，修改数据

13.当前组件ajax未完成执行时，用户操作了其他组件，这时会报错该如何

	willUnmount取消中止ajax