React组件的构造函数有什么作用？它是必须的吗？

构造函数主要用于两个目的：

• 通过将对象分配给this.state来初始化本地状态
• 将事件处理程序方法绑定到实例上

所以，当在React class中需要设置state的初始值或者绑定事件时，需要加上构造函数，官方Demo：

class LikeButton extends React.Component {constructor() {super();this.state = {liked: false};this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({liked: !this.state.liked});}render() {const text = this.state.liked ? 'liked' : 'haven\'t liked';return (
this.handleClick}>You {text} this. Click to toggle.      
);}
}
ReactDOM.render(,document.getElementById('example')
);

构造函数用来新建父类的this对象；子类必须在constructor方法中调用super方法；否则新建实例时会报错；因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法；子类就得不到this对象。

注意：

• constructor () 必须配上 super(), 如果要在constructor 内部使用 this.props 就要 传入props , 否则不用
• JavaScript中的 bind 每次都会返回一个新的函数, 为了性能等考虑, 尽量在constructor中绑定事件

除了在构造函数中绑定 this，还有其它方式吗

你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。

什么原因会促使你脱离 create-react-app 的依赖

当你想去配置 webpack 或 babel presets。

何为 action

Actions 是一个纯 javascript 对象，它们必须有一个 type 属性表明正在执行的 action 的类型。实质上，action 是将数据从应用程序发送到 store 的有效载荷。

diff算法如何比较?

• 只对同级比较，跨层级的dom不会进行复用
• 不同类型节点生成的dom树不同，此时会直接销毁老节点及子孙节点，并新建节点
• 可以通过key来对元素diff的过程提供复用的线索
• 单节点diff
• 单点diff有如下几种情况：
• key和type相同表示可以复用节点
• key不同直接标记删除节点，然后新建节点
• key相同type不同，标记删除该节点和兄弟节点，然后新创建节点

组件通信的方式有哪些

• ⽗组件向⼦组件通讯: ⽗组件可以向⼦组件通过传 props 的⽅式，向⼦组件进⾏通讯
• ⼦组件向⽗组件通讯: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通讯，此props为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中
• 兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信
• 跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如当前认证的⽤户、主题或⾸选语⾔，对于跨越多层的全局数据通过 Context 通信再适合不过
• 发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引⼊event模块进⾏通信
• 全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态

参考 前端进阶面试题详细解答

什么是受控组件和非受控组件

• 受控组件：

  没有维持自己的状态

  数据由付组件控制

  通过props获取当前值，然后通过回调函数通知更改

• 非受控组件

  保持这个自己的状态

  数据有DOM控制

  refs用于获取其当前值

React的虚拟DOM和Diff算法的内部实现

传统 diff 算法的时间复杂度是 O(n^3)，这在前端 render 中是不可接受的。为了降低时间复杂度，react 的 diff 算法做了一些妥协，放弃了最优解，最终将时间复杂度降低到了 O(n)。

那么 react diff 算法做了哪些妥协呢？，参考如下：

1. tree diff：只对比同一层的 dom 节点，忽略 dom 节点的跨层级移动

如下图，react 只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。

这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。

这就意味着，如果 dom 节点发生了跨层级移动，react 会删除旧的节点，生成新的节点，而不会复用。

2. component diff：如果不是同一类型的组件，会删除旧的组件，创建新的组件

3. element diff：对于同一层级的一组子节点，需要通过唯一 id 进行来区分

• 如果没有 id 来进行区分，一旦有插入动作，会导致插入位置之后的列表全部重新渲染
• 这也是为什么渲染列表时为什么要使用唯一的 key。

React如何获取组件对应的DOM元素？

可以用ref来获取某个子节点的实例，然后通过当前class组件实例的一些特定属性来直接获取子节点实例。ref有三种实现方法:

• 字符串格式：字符串格式，这是React16版本之前用得最多的，例如：

  span

• 函数格式：ref对应一个方法，该方法有一个参数，也就是对应的节点实例，例如：

  this.info = ele}>

• createRef方法：React 16提供的一个API，使用React.createRef()来实现

如何配置 React-Router 实现路由切换

（1）使用 组件

路由匹配是通过比较 的 path 属性和当前地址的 pathname 来实现的。当一个 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 将始终被匹配。

// when location = { pathname: '/about' }
About}/> // renders 
Contact}/> // renders null
Always}/> // renders 

（2）结合使用 组件和 组件

用于将 分组。

Home} />About} />Contact} />

不是分组 所必须的，但他通常很有用。 一个 会遍历其所有的子 元素，并仅渲染与当前地址匹配的第一个元素。

（3）使用 、 、 组件

组件来在你的应用程序中创建链接。无论你在何处渲染一个 ，都会在应用程序的 HTML 中渲染锚（）。

Home   
// Home

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

// location = { pathname: '/react' }
React

// React

当我们想强制导航时，可以渲染一个，当一个渲染时，它将使用它的to属性进行定向。

Redux Thunk 的作用是什么

Redux thunk 是一个允许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。如果满足某个条件，thunk 则可以用来延迟 action 的派发(dispatch)，这可以处理异步 action 的派发(dispatch)。

React实现的移动应用中，如果出现卡顿，有哪些可以考虑的优化方案

• 增加shouldComponentUpdate钩子对新旧props进行比较，如果值相同则阻止更新，避免不必要的渲染，或者使用PureReactComponent替代Component，其内部已经封装了shouldComponentUpdate的浅比较逻辑
• 对于列表或其他结构相同的节点，为其中的每一项增加唯一key属性，以方便React的diff算法中对该节点的复用，减少节点的创建和删除操作
• render函数中减少类似onClick={() => {doSomething()}}的写法，每次调用render函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中，这样只会创建一次
• 组件的props如果需要经过一系列运算后才能拿到最终结果，则可以考虑使用reselect库对结果进行缓存，如果props值未发生变化，则结果直接从缓存中拿，避免高昂的运算代价
• webpack-bundle-analyzer分析当前页面的依赖包，是否存在不合理性，如果存在，找到优化点并进行优化

Diff 的瓶颈以及 React 的应对

由于 diff 操作本身会带来性能上的损耗，在 React 文档中提到过，即使最先进的算法中，将前后两棵树完全比对的算法复杂度为O(n3)，其中 n 为树中元素的数量。

如果 React 使用了该算法，那么仅仅一千个元素的页面所需要执行的计算量就是十亿的量级，这无疑是无法接受的。

为了降低算法的复杂度，React 的 diff 会预设三个限制：

1. 只对同级元素进行 diff 比对。如果一个元素节点在前后两次更新中跨越了层级，那么 React 不会尝试复用它
2. 两个不同类型的元素会产生出不同的树。如果元素由 div 变成 p，React 会销毁 div 及其子孙节点，并新建 p 及其子孙节点
3. 开发者可以通过 key 来暗示哪些子元素在不同的渲染下能保持稳定

fetch封装

npm install whatwg-fetch --save  // 适配其他浏览器
npm install es6-promiseexport const handleResponse = (response) => {if (response.status === 403 || response.status === 401) {const oauthurl = response.headers.get('locationUrl');if (!_.isEmpty(oauthUrl)) {window.location.href = oauthurl;return;}}if (!response.ok) {return getErrorMessage(response).then(errorMessage => apiError(response.status, errorMessage));}if (isJson(response)) {return response.json();}if (isText(response)) {return response.text();}return response.blob();
};const httpRequest = {request: ({method, headers, body, path, query,}) => {const options = {};let url = path;if (method) {options.method = method;}if (headers) {options.headers = {...options.headers,...headers};}if (body) {options.body = body;}if (query) {const params = Object.keys(query).map(k => `${k}=${query[k]}`).join('&');url = url.concat(`?${params}`);}return fetch(url, Object.assign({}, options, { credentials: 'same-origin' })).then(handleResponse);},
};export default httpRequest;

什么是上下文Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

• 用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class Header extends Component{render() {return (