react初级基础面试题（分享）-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

【相关专题推荐：react面试题（2020）】

1. React 中 keys 的作用是什么？

key是React中用于追踪哪些列表中元素被修改、删除或者被添加的辅助标识。在diff算法中，key用来判断该元素节点是被移动过来的还是新创建的元素，减少不必要的元素重复渲染。

2. React 中有哪些构建组件的方式？

1.webp.jpg

有什么区别？

函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件的思想。
函数组件中，你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑
函数组件中没有this
函数组件更容易理解。当你看到一个函数组件时，你就知道它的功能只是接收属性，渲染页面，它不执行与UI无关的逻辑处理，它只是一个纯函数。而不用在意它返回的DOM结构有多复杂

3.调用 setState 之后发生了什么？

2.webp.jpg

4.react diff 原理

把树形结构按照层级分解，只比较同级元素
给列表结构的每个单元添加唯一的 key 属性，方便比较
React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
选择性子树渲染。开发人员可以重写shouldComponentUpdate 提高 diff 的性能

5.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

因为this.props 和this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state

6.关于this绑定？

3.webp.jpg

7.setState第二个参数的作用

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成

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

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

9.flux的思想和流程?

Flux 的最大特点，就是数据的"单向流动"。
流程：
用户访问view
view发送用户的action
dispatcher接收action，要求store进行相应的更新
store更新后，发送一个change事件
view收到change事件后，更新页面。