React高频面试题合集（二） react.js

什么是虚拟DOM？
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
React中的状态是什么？它是如何使用的
状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。
虚拟 DOM 的引入与直接操作原生 DOM 相比，哪一个效率更高，为什么
虚拟DOM相对原生的DOM不一定是效率更高，如果只修改一个按钮的文案，那么虚拟 DOM 的操作无论如何都不可能比真实的 DOM 操作更快。在首次渲染大量DOM时，由于多了一层虚拟DOM的计算，虚拟DOM也会比innerHTML插入慢。它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。所以要根据具体的场景进行探讨。
在整个 DOM 操作的演化过程中，其实主要矛盾并不在于性能，而在于开发者写得爽不爽，在于研发体验/研发效率。虚拟 DOM 不是别的，正是前端开发们为了追求更好的研发体验和研发效率而创造出来的高阶产物。虚拟 DOM 并不一定会带来更好的性能，React 官方也从来没有把虚拟 DOM 作为性能层面的卖点对外输出过。**虚拟 DOM 的优越之处在于，它能够在提供更爽、更高效的研发模式（也就是函数式的 UI 编程方式）的同时，仍然保持一个还不错的性能。
为什么 useState 要使用数组而不是对象
useState 的用法：

const [count, setCount] = useState(0) 复制代码

可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？
这里用到了解构赋值，所以先来看一下ES6 的解构赋值：
数组的解构赋值

const foo = [1, 2, 3]; const [one, two, three] = foo; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 复制代码

对象的解构赋值

const user = { id: 888, name: "xiaoxin" }; const { id, name } = user; console.log(id); // 888 console.log(name); // "xiaoxin" 复制代码

看完这两个例子，答案应该就出来了：

如果 useState 返回的是数组，那么使用者可以对数组中的元素命名，代码看起来也比较干净
如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值

下面来看看如果 useState 返回对象的情况：

// 第一次使用 const { state, setState } = useState(false); // 第二次使用 const { state: counter, setState: setCounter } = useState(0) 复制代码

这里可以看到，返回对象的使用方式还是挺麻烦的，更何况实际项目中会使用的更频繁。总结：useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。
Redux 请求中间件如何处理并发
使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。它通过创建 Sagas 将所有异步操作逻辑存放在一个地方进行集中处理，以此将react中的同步操作与异步操作区分开来，以便于后期的管理与维护。 redux-saga如何处理并发：

takeEvery

可以让多个 saga 任务并行被 fork 执行。

import { fork, take } from "redux-saga/effects"const takeEvery = (pattern, saga, ...args) => fork(function*() { while (true) { const action = yield take(pattern) yield fork(saga, ...args.concat(action)) } }) 复制代码

takeLatest

takeLatest 不允许多个 saga 任务并行地执行。一旦接收到新的发起的 action，它就会取消前面所有 fork 过的任务（如果这些任务还在执行的话）。
在处理 AJAX 请求的时候，如果只希望获取最后那个请求的响应， takeLatest 就会非常有用。

import { cancel, fork, take } from "redux-saga/effects"const takeLatest = (pattern, saga, ...args) => fork(function*() { let lastTask while (true) { const action = yield take(pattern) if (lastTask) { yield cancel(lastTask) // 如果任务已经结束，则 cancel 为空操作 } lastTask = yield fork(saga, ...args.concat(action)) } }) 复制代码

React组件命名推荐的方式是哪个？
通过引用而不是使用来命名组件displayName。
使用displayName命名组件：

export default React.createClass({displayName: 'TodoApp',// ...}) 复制代码

React推荐的方法：

export default class TodoApp extends React.Component {// ...} 复制代码

为什么调用 setState 而不是直接改变 state？
解答
如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。
另外，您还可以谈谈如何不保证状态更新是同步的。如果需要基于另一个状态（或属性）更新组件的状态，请向setState()传递一个函数，该函数将 state 和 props 作为其两个参数：

this.setState((state, props) => ({ counter: state.counter + props.increment })); 复制代码

进一步阅读

正确地使用 State

Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？
Redux 的中间件提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，换而言之，原本 view -→> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store ，在这一环节可以做一些"副作用"的操作，如异步请求、打印日志等。
applyMiddleware源码：

export default function applyMiddleware(...middlewares) { return createStore => (...args) => { // 利用传入的createStore和reducer和创建一个store const store = createStore(...args) let dispatch = () => { throw new Error() } const middlewareAPI = { getState: store.getState, dispatch: (...args) => dispatch(...args) } // 让每个 middleware 带着 middlewareAPI 这个参数分别执行一遍 const chain = middlewares.map(middleware => middleware(middlewareAPI)) // 接着 compose 将 chain 中的所有匿名函数，组装成一个新的函数，即新的 dispatch dispatch = compose(...chain)(store.dispatch) return { ...store, dispatch } } } 复制代码

从applyMiddleware中可以看出∶

redux中间件接受一个对象作为参数，对象的参数上有两个字段 dispatch 和 getState，分别代表着 Redux Store 上的两个同名函数。
柯里化函数两端一个是 middewares，一个是store.dispatch

Redux中的connect有什么作用
connect负责连接React和Redux
（1）获取state
connect 通过 context获取 Provider 中的 store，通过 store.getState() 获取整个store tree 上所有state
（2）包装原组件
将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect，Connect 重新 render 外部传入的原组件 WrappedComponent ，并把 connect 中传入的 mapStateToProps，mapDispatchToProps与组件上原有的 props合并后，通过属性的方式传给WrappedComponent
（3）监听store tree变化
connect缓存了store tree中state的状态，通过当前state状态和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染
Redux 怎么实现属性传递，介绍下原理
react-redux 数据传输∶ view-->action-->reducer-->store-->view。看下点击事件的数据是如何通过redux传到view上：

view 上的AddClick 事件通过mapDispatchToProps 把数据传到action ---> click:()=>dispatch(ADD)
action 的ADD 传到reducer上
reducer传到store上 const store = createStore(reducer);
store再通过 mapStateToProps 映射穿到view上text:State.text

代码示例∶

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider, connect } from 'react-redux'; class App extends React.Component{ render(){ let { text, click, clickR } = this.props; return(数据:已有人{text} 加人减人) } } const initialState = { text:5 } const reducer = function(state,action){ switch(action.type){ case 'ADD': return {text:state.text+1} case 'REMOVE': return {text:state.text-1} default: return initialState; } }let ADD = { type:'ADD' } let Remove = { type:'REMOVE' }const store = createStore(reducer); let mapStateToProps = function (state){ return{ text:state.text } }let mapDispatchToProps = function(dispatch){ return{ click:()=>dispatch(ADD), clickR:()=>dispatch(Remove) } }const App1 = connect(mapStateToProps,mapDispatchToProps)(App); ReactDOM.render(,document.getElementById('root') ) 复制代码

react 实现一个全局的 dialog

import React, { Component } from 'react'; import { is, fromJS } from 'immutable'; import ReactDOM from 'react-dom'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import './dialog.css'; let defaultState = { alertStatus:false, alertTip:"提示", closeDialog:function(){}, childs:'' } class Dialog extends Component{ state = { ...defaultState }; // css动画组件设置为目标组件 FirstChild = props => { const childrenArray = React.Children.toArray(props.children); return childrenArray[0] || null; } //打开弹窗 open =(options)=>{ options = options || {}; options.alertStatus = true; var props = options.props || {}; var childs = this.renderChildren(props,options.childrens) || ''; console.log(childs); this.setState({ ...defaultState, ...options, childs }) } //关闭弹窗 close(){ this.state.closeDialog(); this.setState({ ...defaultState }) } renderChildren(props,childrens) { //遍历所有子组件 var childs = []; childrens = childrens || []; var ps = { ...props,//给子组件绑定props _close:this.close//给子组件也绑定一个关闭弹窗的事件 }; childrens.forEach((currentItem,index) => { childs.push(React.createElement( currentItem, { ...ps, key:index } )); }) return childs; } shouldComponentUpdate(nextProps, nextState){ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) }render(){ return ( {this.state.childs} ); } } let div = document.createElement('div'); let props = {}; document.body.appendChild(div); let Box = ReactD 复制代码

子类：

//子类jsx import React, { Component } from 'react'; class Child extends Component { constructor(props){ super(props); this.state = {date: new Date()}; } showValue=https://www.it610.com/article/()=>{ this.props.showValue && this.props.showValue() } render() { return (Child); } } export default Child; 复制代码

css：

.dialog-con{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } 复制代码

useEffect 与 useLayoutEffect 的区别
（1）共同点

运用效果： useEffect 与 useLayoutEffect 两者都是用于处理副作用，这些副作用包括改变 DOM、设置订阅、操作定时器等。在函数组件内部操作副作用是不被允许的，所以需要使用这两个函数去处理。
使用方式： useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的，都是调用的 mountEffectImpl方法，在使用上也没什么差异，基本可以直接替换。

（2）不同点

使用场景： useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；而 useLayoutEffect 会在所有的 DOM 变更之后同步调用，主要用于处理 DOM 操作、调整样式、避免页面闪烁等问题。也正因为是同步处理，所以需要避免在 useLayoutEffect 做计算量较大的耗时任务从而造成阻塞。
使用效果： useEffect是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变DOM），当改变屏幕内容时可能会产生闪烁；useLayoutEffect是改变屏幕像素之前就执行了（会推迟页面显示的事件，先改变DOM后渲染），不会产生闪烁。useLayoutEffect总是比useEffect先执行。

在未来的趋势上，两个 API 是会长期共存的，暂时没有删减合并的计划，需要开发者根据场景去自行选择。React 团队的建议非常实用，如果实在分不清，先用 useEffect，一般问题不大；如果页面有异常，再直接替换为 useLayoutEffect 即可。
React Hook 的使用限制有哪些？
React Hooks 的限制主要有两条：

不要在循环、条件或嵌套函数中调用 Hook；
在 React 的函数组件中调用 Hook。

那为什么会有这样的限制呢？Hooks 的设计初衷是为了改进 React 组件的开发模式。在旧有的开发模式下遇到了三个问题。

组件之间难以复用状态逻辑。过去常见的解决方案是高阶组件、render props 及状态管理框架。
复杂的组件变得难以理解。生命周期函数与业务逻辑耦合太深，导致关联部分难以拆分。
人和机器都很容易混淆类。常见的有 this 的问题，但在 React 团队中还有类难以优化的问题，希望在编译优化层面做出一些改进。

这三个问题在一定程度上阻碍了 React 的后续发展，所以为了解决这三个问题，Hooks 基于函数组件开始设计。然而第三个问题决定了 Hooks 只支持函数组件。
那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。当然，实质上 React 的源码里不是数组，是链表。
这些限制会在编码上造成一定程度的心智负担，新手可能会写错，为了避免这样的情况，可以引入 ESLint 的 Hooks 检查插件进行预防。
React 设计思路，它的理念是什么？
（1）编写简单直观的代码
React最大的价值不是高性能的虚拟DOM、封装的事件机制、服务器端渲染，而是声明式的直观的编码方式。react文档第一条就是声明式，React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让代码更加可靠，且方便调试。
（2）简化可复用的组件
React框架里面使用了简化的组件模型，但更彻底地使用了组件化的概念。React将整个UI上的每一个功能模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成更大的组件。React的组件具有如下的特性∶

可组合：简单组件可以组合为复杂的组件
可重用：每个组件都是独立的，可以被多个组件使用
可维护：和组件相关的逻辑和UI都封装在了组件的内部，方便维护
可测试：因为组件的独立性，测试组件就变得方便很多。

（3) Virtual DOM
真实页面对应一个 DOM 树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM，每次数据更新后，重新计算 Virtual DOM，并和上一次生成的 Virtual DOM 做对比，对发生变化的部分做批量更新。React 也提供了直观的 shouldComponentUpdate 生命周期回调，来减少数据变化后不必要的 Virtual DOM 对比过程，以保证性能。
（4）函数式编程
React 把过去不断重复构建 UI 的过程抽象成了组件，且在给定参数的情况下约定渲染对应的 UI 界面。React 能充分利用很多函数式方法去减少冗余代码。此外，由于它本身就是简单函数，所以易于测试。
（5）一次学习，随处编写
无论现在正在使用什么技术栈，都可以随时引入 React来开发新特性，而不需要重写现有代码。
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。因为 React 组件可以映射为对应的原生控件。在输出的时候，是输出 Web DOM，还是 Android 控件，还是 iOS 控件，就由平台本身决定了。所以，react很方便和其他平台集成
react中key的作用
简单的说：key 是虚拟DOM中的一种标识，在更新显示是key起到了极其重要的作用
复杂的说：当状态中的数据发生改变的时候，react会根据【新数据】生成【新的虚拟DOM】，随后react进行【新虚拟DOM】和【旧的虚拟DOM】的diff比较，而在这个比较过程中key就是起到是关键中用
怎么用 React.createElement 重写下面的代码
Question：

const element = (Hello, rdhub.cn!);

Answer：

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

React- Router有几种形式？
有以下几种形式。
HashRouter，通过散列实现，路由要带#。
BrowerRouter，利用HTML5中 history API实现，需要服务器端支持，兼容性不是很好。
React组件的state和props有什么区别？
（1）props
props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。
（2）state
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。
【React高频面试题合集（二）】（3）区别