关于前端:阿里前端二面必会react面试题指南

这段代码有什么问题吗？

这段代码有什么问题:

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count,
  };
});

答案：
没有什么问题。这种形式很少被应用，咱们能够将一个函数传递给setState，该函数接管上一个 state 的值和以后的props，并返回一个新的状态，如果咱们须要依据以前的状态从新设置状态，举荐应用这种形式。

HOC相比 mixins 有什么长处？

HOC 和 Vue 中的 mixins 作用是统一的，并且在晚期 React 也是应用 mixins 的形式。然而在应用 class 的形式创立组件当前，mixins 的形式就不能应用了，并且其实 mixins 也是存在一些问题的，比方：

隐含了一些依赖，比方我在组件中写了某个 state 并且在 mixin 中应用了，就这存在了一个依赖关系。万一下次他人要移除它，就得去 mixin 中查找依赖
多个 mixin 中可能存在雷同命名的函数，同时代码组件中也不能呈现雷同命名的函数，否则就是重写了，其实我始终感觉命名真的是一件麻烦事。。
雪球效应，尽管我一个组件还是应用着同一个 mixin，然而一个 mixin 会被多个组件应用，可能会存在需要使得 mixin 批改本来的函数或者新增更多的函数，这样可能就会产生一个保护老本

HOC 解决了这些问题，并且它们达成的成果也是统一的，同时也更加的政治正确（毕竟更加函数式了）。

哪些办法会触发 React 从新渲染？从新渲染 render 会做些什么？

（1）哪些办法会触发 react 从新渲染?

setState（）办法被调用

setState 是 React 中最罕用的命令，通常状况下，执行 setState 会触发 render。然而这里有个点值得关注，执行 setState 的时候不肯定会从新渲染。当 setState 传入 null 时，并不会触发 render。

class App extends React.Component {
  state = {
    a: 1
  };

  render() {
    console.log("render");
    return (
      <React.Fragement>
        <p>{this.state.a}</p>
        <button
          onClick={() => {            this.setState({ a: 1 }); // 这里并没有扭转 a 的值          }}        >          Click me        </button>
        <button onClick={() => this.setState(null)}>setState null</button>
        <Child />
      </React.Fragement>
    );
  }
}

父组件从新渲染

只有父组件从新渲染了，即便传入子组件的 props 未发生变化，那么子组件也会从新渲染，进而触发 render

（2）从新渲染 render 会做些什么?

会对新旧 VNode 进行比照，也就是咱们所说的Diff算法。
对新旧两棵树进行一个深度优先遍历，这样每一个节点都会一个标记，在到深度遍历的时候，每遍历到一和个节点，就把该节点和新的节点树进行比照，如果有差别就放到一个对象外面
遍历差别对象，依据差别的类型，依据对应对规定更新VNode

React 的解决 render 的根本思维模式是每次一有变动就会去从新渲染整个利用。在 Virtual DOM 没有呈现之前，最简略的办法就是间接调用 innerHTML。Virtual DOM厉害的中央并不是说它比间接操作 DOM 快，而是说不论数据怎么变，都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚构 DOM 树与老的进行比拟，从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各种比对还是相当耗性能的，特地是在顶层 setState 一个渺小的批改，默认会去遍历整棵树。只管 React 应用高度优化的 Diff 算法，然而这个过程依然会损耗性能.

对 React context 的了解

在React中，数据传递个别应用props传递数据，维持单向数据流，这样能够让组件之间的关系变得简略且可预测，然而单项数据流在某些场景中并不实用。单纯一对的父子组件传递并无问题，但要是组件之间层层依赖深刻，props就须要层层传递显然，这样做太繁琐了。

Context 提供了一种在组件之间共享此类值的形式，而不用显式地通过组件树的逐层传递 props。

能够把context当做是特定一个组件树内共享的store，用来做数据传递。简略说就是，当你不想在组件树中通过逐层传递props或者state的形式来传递数据时，能够应用Context来实现跨层级的组件数据传递。

JS的代码块在执行期间，会创立一个相应的作用域链，这个作用域链记录着运行时JS代码块执行期间所能拜访的流动对象，包含变量和函数，JS程序通过作用域链拜访到代码块外部或者内部的变量和函数。

如果以JS的作用域链作为类比，React组件提供的Context对象其实就好比一个提供给子组件拜访的作用域，而 Context对象的属性能够看成作用域上的流动对象。因为组件的 Context 由其父节点链上所有组件通过 getChildContext（）返回的Context对象组合而成，所以，组件通过Context是能够拜访到其父组件链上所有节点组件提供的Context的属性。

对虚构 DOM 的了解？虚构 DOM 次要做了什么？虚构 DOM 自身是什么？

从实质上来说，Virtual Dom是一个JavaScript对象，通过对象的形式来示意DOM构造。将页面的状态形象为JS对象的模式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将屡次DOM批改的后果一次性的更新到页面上，从而无效的缩小页面渲染的次数，缩小批改DOM的重绘重排次数，进步渲染性能。

虚构DOM是对DOM的形象，这个对象是更加轻量级的对DOM的形容。它设计的最后目标，就是更好的跨平台，比方node.js就没有DOM，如果想实现SSR，那么一个形式就是借助虚构dom，因为虚构dom自身是js对象。在代码渲染到页面之前，vue或者react会把代码转换成一个对象（虚构DOM）。以对象的模式来形容实在dom构造，最终渲染到页面。在每次数据发生变化前，虚构dom都会缓存一份，变动之时，当初的虚构dom会与缓存的虚构dom进行比拟。在vue或者react外部封装了diff算法，通过这个算法来进行比拟，渲染时批改扭转的变动，原先没有产生扭转的通过原先的数据进行渲染。

另外古代前端框架的一个根本要求就是毋庸手动操作DOM，一方面是因为手动操作DOM无奈保障程序性能，多人合作的我的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作能够大大提高开发效率。

为什么要用 Virtual DOM：

（1）保障性能上限，在不进行手动优化的状况下，提供过得去的性能

上面比照一下批改DOM时实在DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能耗费∶

实在DOM∶ 生成HTML字符串＋重建所有的DOM元素
Virtual DOM∶ 生成vNode＋ DOMDiff＋必要的DOM更新

Virtual DOM的更新DOM的筹备工作消耗更多的工夫，也就是JS层面，相比于更多的DOM操作它的生产是极其便宜的。尤雨溪在社区论坛中说道∶ 框架给你的保障是，你不须要手动优化的状况下，我仍然能够给你提供过得去的性能。 （2）跨平台 Virtual DOM实质上是JavaScript的对象，它能够很不便的跨平台操作，比方服务端渲染、uniapp等。

当调用 setState的时候，产生了什么操作？**

当调用 setState时， React做的第一件事是将传递给setState的对象合并到组件的以后状态，这将启动一个称为和解（ reconciliation）的过程。
和解的最终目标是，依据这个新的状态以最无效的形式更新DOM。
为此， React将构建一个新的 React虚构DOM树（能够将其视为页面DOM元素的对象示意形式）。
一旦有了这个DOM树，为了弄清DOM是如何响应新的状态而扭转的， React会将这个新树与上一个虚构DOM树比拟。
这样做， React会晓得产生的确切变动，并且通过理解产生的变动后，在相对必要的状况下进行更新DOM，即可将因操作DOM而占用的空间最小化。

参考前端进阶面试题具体解答

hooks父子传值

父传子
在父组件中用useState申明数据
 const [ data, setData ] = useState(false)

把数据传递给子组件
<Child data={data} />

子组件接管
export default function (props) {
    const { data } = props
    console.log(data)
}
子传父
子传父能够通过事件办法传值，和父传子有点相似。
在父组件中用useState申明数据
 const [ data, setData ] = useState(false)

把更新数据的函数传递给子组件
<Child setData={setData} />

子组件中触发函数更新数据，就会间接传递给父组件
export default function (props) {
    const { setData } = props
    setData(true)
}
如果存在多个层级的数据传递，也可按照此办法顺次传递

// 多层级用useContext
const User = () => {
 // 间接获取，不必回调
 const { user, setUser } = useContext(UserContext);
 return <Avatar user={user} setUser={setUser} />;
};

展现组件(Presentational component)和容器组件(Container component)之间有何不同

展现组件关怀组件看起来是什么。展现专门通过 props 承受数据和回调，并且简直不会有本身的状态，但当展现组件领有本身的状态时，通常也只关怀 UI 状态而不是数据的状态。

容器组件则更关怀组件是如何运作的。容器组件会为展现组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展现组件。容器组件常常是有状态的，因为它们是(其它组件的)数据源。

React 性能优化在哪个生命周期？它优化的原理是什么？

react的父级组件的render函数从新渲染会引起子组件的render办法的从新渲染。然而，有的时候子组件的承受父组件的数据没有变动。子组件render的执行会影响性能，这时就能够应用shouldComponentUpdate来解决这个问题。

应用办法如下：

shouldComponentUpdate(nexrProps) {
    if (this.props.num === nexrProps.num) {
        return false
    }
    return true;
}

shouldComponentUpdate提供了两个参数nextProps和nextState，示意下一次props和一次state的值，当函数返回false时候，render()办法不执行，组件也就不会渲染，返回true时，组件照常重渲染。此办法就是拿以后props中值和下一次props中的值进行比照，数据相等时，返回false，反之返回true。

须要留神，在进行新旧比照的时候，是浅比照，也就是说如果比拟的数据时援用数据类型，只有数据的援用的地址没变，即便内容变了，也会被断定为true。

面对这个问题，能够应用如下办法进行解决：
（1）应用setState扭转数据之前，先采纳ES6中assgin进行拷贝，然而assgin只深拷贝的数据的第一层，所以说不是最完满的解决办法：

const o2 = Object.assign({},this.state.obj)
    o2.student.count = '00000';
    this.setState({
        obj: o2,
    })

（2）应用JSON.parse(JSON.stringfy())进行深拷贝，然而遇到数据为undefined和函数时就会错。

const o2 = JSON.parse(JSON.stringify(this.state.obj))
    o2.student.count = '00000';
    this.setState({
        obj: o2,
    })

类组件与函数组件有什么异同？

相同点： 组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染的 React 元素。也正因为组件是 React 的最小编码单位，所以无论是函数组件还是类组件，在应用形式和最终出现成果上都是完全一致的。

咱们甚至能够将一个类组件改写成函数组件，或者把函数组件改写成一个类组件（尽管并不举荐这种重构行为）。从使用者的角度而言，很难从应用体验上辨别两者，而且在古代浏览器中，闭包和类的性能只在极其场景下才会有显著的差异。所以，根本可认为两者作为组件是完全一致的。

不同点：

它们在开发时的心智模型上却存在微小的差别。类组件是基于面向对象编程的，它主打的是继承、生命周期等外围概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、援用通明等特点。
之前，在应用场景上，如果存在须要应用生命周期的组件，那么主推类组件；设计模式上，如果须要应用继承，那么主推类组件。但当初因为 React Hooks 的推出，生命周期概念的淡出，函数组件能够齐全取代类组件。其次继承并不是组件最佳的设计模式，官网更推崇“组合优于继承”的设计概念，所以类组件在这方面的劣势也在淡出。
性能优化上，类组件次要依附 shouldComponentUpdate 阻断渲染来晋升性能，而函数组件依附 React.memo 缓存渲染后果来晋升性能。
从上手水平而言，类组件更容易上手，从将来趋势上看，因为React Hooks 的推出，函数组件成了社区将来主推的计划。
类组件在将来工夫切片与并发模式中，因为生命周期带来的复杂度，并不易于优化。而函数组件自身轻量简略，且在 Hooks 的根底上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的将来倒退。

React中setState的第二个参数作用是什么？

setState 的第二个参数是一个可选的回调函数。这个回调函数将在组件从新渲染后执行。等价于在 componentDidUpdate 生命周期内执行。通常倡议应用 componentDidUpdate 来代替此形式。在这个回调函数中你能够拿到更新后 state 的值：

this.setState({
    key1: newState1,
    key2: newState2,
    ...
}, callback) // 第二个参数是 state 更新实现后的回调函数

redux是如何更新值得

用户发动操作之后，dispatch发送action ，依据type，触发对于的reducer，reducer 就是一个纯函数，接管旧的 state 和 action，返回新的 state。通过 subscribe(listener)监听器，派发更新。

diff算法如何比拟?

只对同级比拟，跨层级的dom不会进行复用
不同类型节点生成的dom树不同，此时会间接销毁老节点及子孙节点，并新建节点
能够通过key来对元素diff的过程提供复用的线索
单节点diff
单点diff有如下几种状况：
key和type雷同示意能够复用节点
key不同间接标记删除节点，而后新建节点
key雷同type不同，标记删除该节点和兄弟节点，而后新创建节点

react 强制刷新

component.forceUpdate() 一个不罕用的生命周期办法, 它的作用就是强制刷新

官网解释如下

默认状况下，当组件的 state 或 props 发生变化时，组件将从新渲染。如果 render() 办法依赖于其余数据，则能够调用 forceUpdate() 强制让组件从新渲染。

调用 forceUpdate() 将以致组件调用 render() 办法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发失常的生命周期办法，包含 shouldComponentUpdate() 办法。如果标记发生变化，React 仍将只更新 DOM。

通常你应该防止应用 forceUpdate()，尽量在 render() 中应用 this.props 和 this.state。

shouldComponentUpdate 在初始化和 forceUpdate 不会执行

怎么用 React.createElement 重写上面的代码

Question：

const element = (
  <h1 className="greeting">
    Hello, rdhub.cn!
  </h1>
);

Answer：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, rdhub.cn!'
);

React.Component 和 React.PureComponent 的区别

PureComponent示意一个纯组件，能够用来优化React程序，缩小render函数执行的次数，从而进步组件的性能。

在React中，当prop或者state发生变化时，能够通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而缩小不必要的render执行。React.PureComponent会主动执行 shouldComponentUpdate。

不过，pureComponent中的 shouldComponentUpdate() 进行的是浅比拟，也就是说如果是援用数据类型的数据，只会比拟不是同一个地址，而不会比拟这个地址外面的数据是否统一。浅比拟会疏忽属性和或状态渐变状况，其实也就是数据援用指针没有变动，而数据产生扭转的时候render是不会执行的。如果须要从新渲染那么就须要从新开拓空间援用数据。PureComponent个别会用在一些纯展现组件上。

应用pureComponent的益处：当组件更新时，如果组件的props或者state都没有扭转，render函数就不会触发。省去虚构DOM的生成和比照过程，达到晋升性能的目标。这是因为react主动做了一层浅比拟。

在 React 中，refs 的作用是什么

Refs 能够用于获取一个 DOM 节点或者 React 组件的援用。何时应用 refs 的好的示例有治理焦点/文本抉择，触发命令动画，或者和第三方 DOM 库集成。你应该防止应用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所举荐的。

setState之后产生了什么？

（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件以后的状态合并，而后触发所谓的和谐过程（Reconciliation）。
（2）通过和谐过程，React 会以绝对高效的形式依据新的状态构建 React 元素树并且着手从新渲染整个 UI 界面；
（3）在 React 失去元素树之后，React 会主动计算出新的树与老树的节点差别，而后依据差别对界面进行最小化重渲染；
（4）在差别计算算法中，React 可能绝对准确地晓得哪些地位产生了扭转以及应该如何扭转，这就保障了按需更新，而不是全副从新渲染。

setState的调用会引起React的更新生命周期的4个函数执行。

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

react router

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../components/App'
import Home from '../components/Home'
import About from '../components/About'
import Features from '../components/Features'

render(
  <Router history={browserHistory}>  // history 路由
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)
render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

React Router 提供一个routerWillLeave生命周期钩子，这使得 React组件能够拦挡正在产生的跳转，或在来到route前提醒用户。routerWillLeave返回值有以下两种：

return false 勾销此次跳转
return 返回提示信息，在来到 route 前提醒用户进行确认。

能够应用TypeScript写React利用吗？怎么操作？

（1）如果还未创立 Create React App 我的项目

间接创立一个具备 typescript 的 Create React App 我的项目：

 npx create-react-app demo --typescript

（2）如果曾经创立了 Create React App 我的项目，须要将 typescript 引入到已有我的项目中

通过命令将 typescript 引入我的项目：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

将我的项目中任何后缀名为 ‘.js’ 的 JavaScript 文件重命名为 TypeScript 文件即后缀名为 ‘.tsx’（例如 src/index.js 重命名为 src/index.tsx ）

关于前端:阿里前端二面必会react面试题指南

这段代码有什么问题吗？

HOC相比 mixins 有什么长处？

哪些办法会触发 React 从新渲染？从新渲染 render 会做些什么？

对 React context 的了解

对虚构 DOM 的了解？虚构 DOM 次要做了什么？虚构 DOM 自身是什么？

当调用 setState的时候，产生了什么操作？**

hooks父子传值

展现组件(Presentational component)和容器组件(Container component)之间有何不同

React 性能优化在哪个生命周期？它优化的原理是什么？

类组件与函数组件有什么异同？

React中setState的第二个参数作用是什么？

redux是如何更新值得

diff算法如何比拟?

react 强制刷新

怎么用 React.createElement 重写上面的代码

React.Component 和 React.PureComponent 的区别

在 React 中，refs 的作用是什么

setState之后产生了什么？

react router

能够应用TypeScript写React利用吗？怎么操作？

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:阿里前端二面必会react面试题指南

这段代码有什么问题吗？

HOC相比 mixins 有什么长处？

哪些办法会触发 React 从新渲染？从新渲染 render 会做些什么？

对 React context 的了解

对虚构 DOM 的了解？虚构 DOM 次要做了什么？虚构 DOM 自身是什么？

当调用 setState的时候，产生了什么操作？**

hooks父子传值

展现组件(Presentational component)和容器组件(Container component)之间有何不同

React 性能优化在哪个生命周期？它优化的原理是什么？

类组件与函数组件有什么异同？

React中setState的第二个参数作用是什么？

redux是如何更新值得

diff算法如何比拟?

react 强制刷新

怎么用 React.createElement 重写上面的代码

React.Component 和 React.PureComponent 的区别

在 React 中，refs 的作用是什么

setState之后 产生了什么？

react router

能够应用TypeScript写React利用吗？怎么操作？

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

setState之后产生了什么？

发表回复取消回复