前端 react 面试题（边面边更）

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

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。

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

高阶组件的应用场景

权限控制

利用高阶组件的 条件渲染 特性可以对页面进行权限控制，权限控制一般分为两个维度：页面级别 和 页面元素级别

// HOC.js    function withAdminAuth(WrappedComponent) {        return class extends React.Component {            state = {                isAdmin: false,            }            async componentWillMount() {                const currentRole = await getCurrentUserRole();                this.setState({                    isAdmin: currentRole === 'Admin',                });            }            render() {                if (this.state.isAdmin) {                    return <WrappedComponent {...this.props} />;                } else {                    return (<div>您没有权限查看该页面，请联系管理员！</div>);                }            }        };    }
// 使用// pages/page-a.js    class PageA extends React.Component {        constructor(props) {            super(props);            // something here...        }        componentWillMount() {            // fetching data        }        render() {            // render page with data        }    }    export default withAdminAuth(PageA);    

可能你已经发现了，高阶组件其实就是装饰器模式在 React 中的实现：通过给函数传入一个组件（函数或类）后在函数内部对该组件（函数或类）进行功能的增强（不修改传入参数的前提下），最后返回这个组件（函数或类），即允许向一个现有的组件添加新的功能，同时又不去修改该组件，属于 包装模式(Wrapper Pattern) 的一种。

什么是装饰者模式：在不改变对象自身的前提下在程序运行期间动态的给对象添加一些额外的属性或行为

可以提高代码的复用性和灵活性。

再对高阶组件进行一个小小的总结：

• 高阶组件 不是组件，是 一个把某个组件转换成另一个组件的 函数

• 高阶组件的主要作用是 代码复用

• 高阶组件是 装饰器模式在 React 中的实现

封装组件的原则

封装原则

1、单一原则：负责单一的页面渲染

2、多重职责：负责多重职责，获取数据，复用逻辑，页面渲染等

3、明确接受参数：必选，非必选，参数尽量设置以_开头，避免变量重复

4、可扩展：需求变动能够及时调整，不影响之前代码

5、代码逻辑清晰

6、封装的组件必须具有高性能，低耦合的特性

7、组件具有单一职责：封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可

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

React 中 props.children 和 React.Children 的区别

在 React 中，当涉及组件嵌套，在父组件中使用props.children把所有子组件显示出来。如下：

function ParentComponent(props){    return (        <div>            {props.children}        </div>    )}

如果想把父组件中的属性传给所有的子组件，需要使用React.Children方法。

比如，把几个 Radio 组合起来，合成一个 RadioGroup，这就要求所有的 Radio 具有同样的 name 属性值。可以这样：把 Radio 看做子组件，RadioGroup 看做父组件，name 的属性值在 RadioGroup 这个父组件中设置。

首先是子组件：

//子组件function RadioOption(props) {  return (    <label>      <input type="radio" value={props.value} name={props.name} />      {props.label}    </label>  )}

然后是父组件，不仅需要把它所有的子组件显示出来，还需要为每个子组件赋上 name 属性和值：

//父组件用,props是指父组件的propsfunction renderChildren(props) {
  //遍历所有子组件  return React.Children.map(props.children, child => {    if (child.type === RadioOption)      return React.cloneElement(child, {        //把父组件的props.name赋值给每个子组件        name: props.name      })    else      return child  })}//父组件function RadioGroup(props) {  return (    <div>      {renderChildren(props)}    </div>  )}function App() {  return (    <RadioGroup name="hello">      <RadioOption label="选项一" value="1" />      <RadioOption label="选项二" value="2" />      <RadioOption label="选项三" value="3" />    </RadioGroup>  )}export default App;

以上，React.Children.map让我们对父组件的所有子组件又更灵活的控制。

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

（1）使用<Route> 组件

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

// when location = { pathname: '/about' }<Route path='/about' component={About}/> // renders <About/><Route path='/contact' component={Contact}/> // renders null<Route component={Always}/> // renders <Always/>

（2）结合使用 <Switch> 组件和 <Route> 组件

<Switch> 用于将 <Route> 分组。

<Switch>    <Route exact path="/" component={Home} />    <Route path="/about" component={About} />    <Route path="/contact" component={Contact} /></Switch>

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

（3）使用 <Link>、 <NavLink>、<Redirect> 组件

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

<Link to="/">Home</Link>   // <a href='/'>Home</a>

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

// location = { pathname: '/react' }<NavLink to="/react" activeClassName="hurray">    React</NavLink>// <a href='/react' className='hurray'>React</a>

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

diff 算法如何比较?

• 只对同级比较，跨层级的 dom 不会进行复用

• 不同类型节点生成的 dom 树不同，此时会直接销毁老节点及子孙节点，并新建节点

• 可以通过 key 来对元素 diff 的过程提供复用的线索

• 单节点 diff

• 单点 diff 有如下几种情况：

• key 和 type 相同表示可以复用节点

• key 不同直接标记删除节点，然后新建节点

• key 相同 type 不同，标记删除该节点和兄弟节点，然后新创建节点

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

React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代

这三者是目前 react 解决代码复用的主要方式：

• 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。

• render props 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

• 通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地，（例如，一个虚拟滚动条组件或许会有一个 renderltem 属性，或是一个可见的容器组件或许会有它自己的 DOM 结构）。但在大部分场景下，Hook 足够了，并且能够帮助减少嵌套。

（1）HOC 官方解释∶

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

简言之，HOC 是一种组件的设计模式，HOC 接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。

// hoc的定义function withSubscription(WrappedComponent, selectData) {  return class extends React.Component {    constructor(props) {      super(props);      this.state = {        data: selectData(DataSource, props)      };    }    // 一些通用的逻辑处理    render() {      // ... 并使用新数据渲染被包装的组件!      return <WrappedComponent data={this.state.data} {...this.props} />;    }  };
// 使用const BlogPostWithSubscription = withSubscription(BlogPost,  (DataSource, props) => DataSource.getBlogPost(props.id));

HOC 的优缺点∶

• 优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。

• 缺点∶ hoc 传递给被包裹组件的 props 容易和被包裹后的组件重名，进而被覆盖

（2）Render props 官方解释∶

"render prop"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

具有 render prop 的组件接受一个返回 React 元素的函数，将 render 的渲染逻辑注入到组件内部。在这里，"render"的命名可以是任何其他有效的标识符。

// DataProvider组件内部的渲染逻辑如下class DataProvider extends React.Components {     state = {    name: 'Tom'  }
    render() {    return (        <div>          <p>共享数据组件自己内部的渲染逻辑</p>          { this.props.render(this.state) }      </div>    );  }}
// 调用方式<DataProvider render={data => (  <h1>Hello {data.name}</h1>)}/>

由此可以看到，render props 的优缺点也很明显∶

• 优点：数据共享、代码复用，将组件内的 state 作为 props 传递给调用者，将渲染逻辑交给调用者。

• 缺点：无法在 return 语句外访问数据、嵌套写法不够优雅

（3）Hooks 官方解释∶

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义 hook，可以复用代码逻辑。

// 自定义一个获取订阅数据的hookfunction useSubscription() {  const data = DataSource.getComments();  return [data];}// function CommentList(props) {  const {data} = props;  const [subData] = useSubscription();    ...}// 使用<CommentList data='hello' />

以上可以看出，hook 解决了 hoc 的 prop 覆盖的问题，同时使用的方式解决了 render props 的嵌套地狱的问题。hook 的优点如下∶

• 使用直观；

• 解决 hoc 的 prop 重名问题；

• 解决 render props 因共享数据 而出现嵌套地狱的问题；

• 能在 return 之外使用数据的问题。

需要注意的是：hook 只能在组件顶层使用，不可在分支语句中使用。、

React Hooks 解决了哪些问题？

React Hooks 主要解决了以下问题：

（1）在组件之间复用状态逻辑很难

React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）解决此类问题可以使用 render props 和 高阶组件。但是这类方案需要重新组织组件结构，这可能会很麻烦，并且会使代码难以理解。由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。尽管可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。

可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使我们在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

（2）复杂组件变得难以理解

在组件中，每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。

在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。这也给测试带来了一定挑战。同时，这也是很多人将 React 与状态管理库结合使用的原因之一。但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。

为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。

（3）难以理解的 class

除了代码复用和代码管理会遇到困难外，class 是学习 React 的一大屏障。我们必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。即便在有经验的 React 开发者之间，对于函数组件与 class 组件的差异也存在分歧，甚至还要区分两种组件的使用场景。

为了解决这些问题，Hook 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术

Redux 和 Vuex 有什么区别，它们的共同思想

（1）Redux 和 Vuex 区别

• Vuex 改进了 Redux 中的 Action 和 Reducer 函数，以 mutations 变化函数取代 Reducer，无需 switch，只需在对应的 mutation 函数里改变 state 值即可

• Vuex 由于 Vue 自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的 State 即可

• Vuex 数据流的顺序是∶View 调用 store.commit 提交对应的请求到 Store 中对应的 mutation 函数->store 改变（vue 检测到数据变化自动渲染）

通俗点理解就是，vuex 弱化 dispatch，通过 commit 进行 store 状态的一次更变；取消了 action 概念，不必传入特定的 action 形式进行指定变更；弱化 reducer，基于 commit 参数直接对数据进行转变，使得框架更加简易;

（2）共同思想

• 单—的数据源

• 变化可以预测

本质上∶ redux 与 vuex 都是对 mvvm 思想的服务，将数据从视图中抽离的一种方案。

React 中的 props 为什么是只读的？

this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React 具有浓重的函数式编程的思想。

提到函数式编程就要提一个概念：纯函数。它有几个特点：

• 给定相同的输入，总是返回相同的输出。

• 过程没有副作用。

• 不依赖外部状态。

this.props就是汲取了纯函数的思想。props 的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用

区分状态和 props

何为 action

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

对虚拟 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 等。

对有状态组件和无状态组件的理解及使用场景

（1）有状态组件

特点：

• 是类组件

• 有继承

• 可以使用 this

• 可以使用 react 的生命周期

• 使用较多，容易频繁触发生命周期钩子函数，影响性能

• 内部使用 state，维护自身状态的变化，有状态组件根据外部组件传入的 props 和自身的 state 进行渲染。

使用场景：

• 需要使用到状态的。

• 需要使用状态操作组件的（无状态组件的也可以实现新版本 react hooks 也可实现）

总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。

（2）无状态组件 特点：

• 不依赖自身的状态 state

• 可以是类组件或者函数组件。

• 可以完全避免使用 this 关键字。（由于使用的是箭头函数事件无需绑定）

• 有更高的性能。当不需要使用生命周期钩子时，应该首先使用无状态函数组件

• 组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。

使用场景：

• 组件不需要管理 state，纯展示

优点：

• 简化代码、专注于 render

• 组件不需要被实例化，无生命周期，提升性能。 输出（渲染）只取决于输入（属性），无副作用

• 视图和数据的解耦分离

缺点：

• 无法使用 ref

• 无生命周期方法

• 无法控制组件的重渲染，因为无法使用 shouldComponentUpdate 方法，当组件接受到新的属性时则会重渲染

总结： 组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。比如自定义的 <Button/>、 <Input /> 等组件。

对 React-Fiber 的理解，它解决了什么问题？

React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们， 一气呵成。这个过程期间， React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。

为了给用户制造一种应用很快的“假象”，不能让一个任务长期霸占着资源。 可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“进程”，需要通过某些调度策略合理地分配 CPU 资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。

所以 React 通过 Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了可以让浏览器及时地响应用户的交互，还有其他好处:

• 分批延时对 DOM 进行操作，避免一次性操作大量 DOM 节点，可以得到更好的用户体验；

• 给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修正。

核心思想: Fiber 也称协程或者纤程。它和线程并不一样，协程本身是没有并发或者并行能力的（需要配合线程），它只是一种控制流程的让出机制。让出 CPU 的执行权，让 CPU 能在这段时间执行其他的操作。渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。

对于 store 的理解

Store 就是把它们联系到一起的对象。Store 有以下职责：

• 维持应用的 state；

• 提供 getState() 方法获取 state；

• 提供 dispatch(action) 方法更新 state；

• 通过 subscribe(listener)注册监听器;

• 通过 subscribe(listener)返回的函数注销监听器

描述 Flux 与 MVC？

传统的 MVC 模式在分离数据(Model)、UI(View 和逻辑(Controller)方面工作得很好，但是 MVC 架构经常遇到两个主要问题:数据流不够清晰:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。缺乏数据完整性:模型数据可以在任何地方发生突变，从而在整个 UI 中产生不可预测的结果。使用 Flux 模式的复杂用户界面不再遭受级联更新，任何给定的 React 组件都能够根据 store 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来加强数据完整性。

在 React 中，何为 state

State 和 props 类似，但它是私有的，并且完全由组件自身控制。State 本质上是一个持有数据，并决定组件如何渲染的对象。

React 必须使用 JSX 吗？

React 并不强制要求使用 JSX。当不想在构建环境中配置有关 JSX 编译时，不在 React 中使用 JSX 会更加方便。

每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

例如，用 JSX 编写的代码：

class Hello extends React.Component {  render() {    return <div>Hello {this.props.toWhat}</div>;  }}ReactDOM.render(  <Hello toWhat="World" />,  document.getElementById('root'));

可以编写为不使用 JSX 的代码：

class Hello extends React.Component {  render() {    return React.createElement('div', null, `Hello ${this.props.toWhat}`);  }}ReactDOM.render(  React.createElement(Hello, {toWhat: 'World'}, null),  document.getElementById('root'));

React-Router 的实现原理是什么？

客户端路由实现的思想：

• 基于 hash 的路由：通过监听hashchange事件，感知 hash 的变化

• 改变 hash 可以直接通过 location.hash=xxx

• 基于 H5 history 路由：

• 改变 url 可以通过 history.pushState 和 resplaceState 等，会将 URL 压入堆栈，同时能够应用 history.go() 等 API

• 监听 url 的变化可以通过自定义事件触发实现

react-router 实现的思想：

• 基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知

• 通过维护的列表，在每次 URL 发生变化的回收，通过配置的 路由路径，匹配到对应的 Component，并且 render