react面试题

调用 setState 之后发生了什么？

在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染

this.state

一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

传入 setState 函数的第二个参数的作用是什么？

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

React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。减少不必要的元素重渲染。还需要借助 Key 值来判断元素与本地状态的关联关系

React 中 Element 与 Component 的区别是？

简单而言，React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为createElement的调用组合。而 React Component 则是可以接收参数输入并且返回某个 React Element 的函数或者类。

在什么情况下你会优先选择使用 Class Component 而不是 Functional Component？

在组件需要包含内部状态或者使用到生命周期函数的时候使用 Class Component ，否则使用函数式组件。

ref

获取真实的 DOM 节点，为了做到这一点，dom元素必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

在生命周期中的哪一步你应该发起 AJAX 请求？

我们应当将AJAX 请求放到 componentDidMount 函数中执行

shouldComponentUpdate 的作用是啥以及为何它这么重要？

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能

state和props的区别

首先说明: state和props是每个组件都有的 

其次: state可变, 但props不可变(这是官网给出的说法) 

但实操过程中, state的确可变, 但props也可以变, 是不是fb搞错了? 当然不是! 

这里的可变与不可变, 说的是改变后, 是否会重新渲染当前组件. 可变对应的是组件会重新渲染, 不可变(props)是不会渲染的. 

至于原因, 则与内部实现机制有关: 每次用 

this.setState({test: "test"}) //只能这样更改state 

改变state后, 都会触发render函数, 以至于渲染当前组件; 

众所周知, react的一个特点就是单向数据流, 也就是说数据只能从父组件向子组件传递, 而这种传递就是依赖于props. 所以当我们改变props时, 无法渲染当前组件, 只能将数据继续向下传递, re-rendering子组件. 所以对于当前组件而言, props是不可变的. 

此外, 就字面而言, state是状态, props是属性—即自定义属性

什么是JSX

JSX 是一种类 XML 语言，全称是 JavaScript XML 。React 可以不使用 JSX来编写组件，但是使用JSX可以让代码可读性更高、语义更清晰、对 React 元素进行抽象等等。

JSX不是XML或者HTML，不是一种限制，是基于ECMAScript的一种新特性，一种定义带属性树结构的语法。JSX是JS的一中语法糖，类似CoffeeScript、TypeScript最终都是被解释为JS。语法糖必须要有解析器解析，浏览器才可以识别。解析JSX的库是browser.min.js；

JSX的特点

类XML语法 ，容易接受 

增强JS语义

结构清晰

抽象程度高

代码模块化

react性能优化方案

（1）重写shouldComponentUpdate来避免不必要的dom操作。

（2）使用 production 版本的react.js。

（3）使用key来帮助React识别列表中所有子组件的最小变化

判断组件是否需要独立的生命周期？

状态组件是不需要的生命周期的，逻辑组件是需要生命周期的