前端react面试题实例代码分析

这篇“前端react面试题实例代码分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“前端react面试题实例代码分析”文章吧。

React中有使用过getDefaultProps吗？它有什么作用？

通过实现组件的getDefaultProps，对属性设置默认值（ES5的写法）：

var ShowTitle = React.createClass({  getDefaultProps:function(){    return{      title : "React"    }  },  render : function(){    return <h2>{this.props.title}</h2>  }});

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 事件机制

<div onClick={this.handleClick.bind(this)}>点我</div>

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。

除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event.stopProppagation()方法。 JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了 document 上。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。

另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。

实现合成事件的目的如下：

• 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；

• 对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。

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 => (  <h2>Hello {data.name}</h2>)}/>

由此可以看到，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怎么做数据的检查和变化

Model改变之后（可能是调用了setState），触发了virtual dom的更新，再用diff算法来把virtual DOM比较real DOM，看看是哪个dom节点更新了，再渲染real dom

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

• 增加shouldComponentUpdate钩子对新旧props进行比较，如果值相同则阻止更新，避免不必要的渲染，或者使用PureReactComponent替代Component，其内部已经封装了shouldComponentUpdate的浅比较逻辑

• 对于列表或其他结构相同的节点，为其中的每一项增加唯一key属性，以方便React的diff算法中对该节点的复用，减少节点的创建和删除操作

• render函数中减少类似onClick={() => {doSomething()}}的写法，每次调用render函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中，这样只会创建一次

• 组件的props如果需要经过一系列运算后才能拿到最终结果，则可以考虑使用reselect库对结果进行缓存，如果props值未发生变化，则结果直接从缓存中拿，避免高昂的运算代价

• webpack-bundle-analyzer分析当前页面的依赖包，是否存在不合理性，如果存在，找到优化点并进行优化

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

在 React中元素（ element）和组件（ component）有什么区别？

简单地说，在 React中元素（虛拟DOM）描述了你在屏幕上看到的DOM元素。
换个说法就是，在 React中元素是页面中DOM元素的对象表示方式。在 React中组件是一个函数或一个类，它可以接受输入并返回一个元素。
注意：工作中，为了提高开发效率，通常使用JSX语法表示 React元素（虚拟DOM）。在编译的时候，把它转化成一个 React. createElement调用方法。

高阶组件

高阶函数：如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。

高阶组件：如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。

react 中的高阶组件

React 中的高阶组件主要有两种形式：属性代理和反向继承。

属性代理 Proxy

• 操作 props

• 抽离 state

• 通过 ref 访问到组件实例

• 用其他元素包裹传入的组件 WrappedComponent

反向继承

会发现其属性代理和反向继承的实现有些类似的地方，都是返回一个继承了某个父类的子类，只不过属性代理中继承的是 React.Component，反向继承中继承的是传入的组件 WrappedComponent。

反向继承可以用来做什么：

操作 state

高阶组件中可以读取、编辑和删除WrappedComponent组件实例中的state。甚至可以增加更多的state项，但是非常不建议这么做因为这可能会导致state难以维护及管理。

function withLogging(WrappedComponent) {        return class extends WrappedComponent {            render() {                return (                    <div>;                        <h3>;Debugger Component Logging...<h3>;                        <p>;state:<p>;                        <pre>;{JSON.stringify(this.state, null, 4)}<pre>;                        <p>props:<p>;                        <pre>{JSON.stringify(this.props, null, 4)}<pre>;                        {super.render()}                    <div>;                );            }        };    }

渲染劫持（Render Highjacking）

条件渲染通过 props.isLoading 这个条件来判断渲染哪个组件。

修改由 render() 输出的 React 元素树

为什么 React 元素有一个 $$typeof 属性

目的是为了防止 XSS 攻击。因为 Synbol 无法被序列化，所以 React 可以通过有没有 $$typeof 属性来断出当前的 element 对象是从数据库来的还是自己生成的。

• 如果没有 $$typeof 这个属性，react 会拒绝处理该元素。

• 在 React 的古老版本中，下面的写法会出现 XSS 攻击：

// 服务端允许用户存储 JSONlet expectedTextButGotJSON = {  type: 'div',  props: {    dangerouslySetInnerHTML: {      __html: ''    },  },  // ...};let message = { text: expectedTextButGotJSON };// React 0.13 中有风险<p>  {message.text}</p>

react-router4的核心

• 路由变成了组件

• 分散到各个页面，不需要配置 比如<link> <route></route>

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组件的划分业务组件技术组件？

• 根据组件的职责通常把组件分为UI组件和容器组件。

• UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

• 两者通过React-Redux 提供connect方法联系起来

React中的setState和replaceState的区别是什么？

（1）setState() setState()用于设置状态对象，其语法如下：

setState(object nextState[, function callback])

• nextState，将要设置的新状态，该状态会和当前的state合并

• callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

（2）replaceState() replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。其语法如下：

replaceState(object nextState[, function callback])

• nextState，将要设置的新状态，该状态会替换当前的state。

• callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

总结： setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，不会减少原来的状态。而replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了。

React 中的 useState() 是什么？

下面说明useState(0)的用途：

const [count, setCounter] = useState(0);const [moreStuff, setMoreStuff] = useState();const setCount = () => {  setCounter(count + 1);  setMoreStuff();};

useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。
咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下，咱们在setCount函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件。

react 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不一样的时候

通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的，而是给react用的，大概的作用就是给每一个reactNode添加一个身份标识，方便react进行识别，在重渲染过程中，如果key一样，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新，如果key不一样，则react先销毁该组件，然后重新创建该组件

React中怎么检验props？验证props的目的是什么？

React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效（向Props传入的数据类型和验证的数据类型不符）就会在控制台发出警告信息。它可以避免随着应用越来越复杂从而出现的问题。并且，它还可以让程序变得更易读。

import PropTypes from 'prop-types';class Greeting extends React.Component {  render() {    return (      <h2>Hello, {this.props.name}</h2>    );  }}Greeting.propTypes = {  name: PropTypes.string};

当然，如果项目汇中使用了TypeScript，那么就可以不用PropTypes来校验，而使用TypeScript定义接口来校验props。

什么是纯函数？

纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上，纯函数始终在给定相同参数的情况下返回相同结果。

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

（1）有状态组件

特点：

• 是类组件

• 有继承

• 可以使用this

• 可以使用react的生命周期

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

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

使用场景：

• 需要使用到状态的。

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

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

（2）无状态组件 特点：

• 不依赖自身的状态state

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

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

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

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

使用场景：

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

优点：

• 简化代码、专注于 render

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

• 视图和数据的解耦分离

缺点：

• 无法使用 ref

• 无生命周期方法

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

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

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

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

• 字符串格式：字符串格式，这是React16版本之前用得最多的，例如：<p ref="info">span</p>

• 函数格式：ref对应一个方法，该方法有一个参数，也就是对应的节点实例，例如：<p ref={ele => this.info = ele}></p>

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

React Portal 有哪些使用场景

• 在以前， react 中所有的组件都会位于 #app 下，而使用 Portals 提供了一种脱离 #app 的组件

• 因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等。

以下是官方一个模态框的示例，可以在以下地址中测试效果

<html>  <body>    <div id="app"></div>    <div id="modal"></div>    <div id="gotop"></div>    <div id="alert"></div>  </body></html>

const modalRoot = document.getElementById('modal');class Modal extends React.Component {  constructor(props) {    super(props);    this.el = document.createElement('div');  }  componentDidMount() {    modalRoot.appendChild(this.el);  }  componentWillUnmount() {    modalRoot.removeChild(this.el);  }  render() {    return ReactDOM.createPortal(      this.props.children,      this.el,    );  }}

React Hooks当中的useEffect是如何区分生命周期钩子的

useEffect可以看成是componentDidMount，componentDidUpdate和componentWillUnmount三者的结合。useEffect(callback, [source])接收两个参数，调用方式如下

useEffect(() => {   console.log('mounted');   return () => {       console.log('willUnmount');   } }, [source]);

生命周期函数的调用主要是通过第二个参数[source]来进行控制，有如下几种情况：

• [source]参数不传时，则每次都会优先调用上次保存的函数中返回的那个函数，然后再调用外部那个函数；

• [source]参数传[]时，则外部的函数只会在初始化时调用一次，返回的那个函数也只会最终在组件卸载时调用一次；

• [source]参数有值时，则只会监听到数组中的值发生变化后才优先调用返回的那个函数，再调用外部的函数。

以上就是关于“前端react面试题实例代码分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。