2022必备react面试题附答案

React视频解说点击学习

1. React的严格模式如何应用，有什么用途？

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后辈元素触发额定的检查和正告。能够为应用程序的任何局部启用严格模式。例如：

import React from 'react';function ExampleApplication() {  return (    <div>      <Header />      <React.StrictMode>                <div>          <ComponentOne />          <ComponentTwo />        </div>      </React.StrictMode>            <Footer />    </div>  );}复制代码

在上述的示例中，不会对 Header 和 Footer 组件运行严格模式查看。然而，ComponentOne 和 ComponentTwo 以及它们的所有后辈元素都将进行查看。

StrictMode 目前有助于：

辨认不平安的生命周期
对于应用过期字符串 ref API 的正告
对于应用废除的 findDOMNode 办法的正告
检测意外的副作用
检测过期的 context API

2. 在React中遍历的办法有哪些？

（1）遍历数组：map && forEach

import React from 'react';class App extends React.Component {  render() {    let arr = ['a', 'b', 'c', 'd'];    return (      <ul>        {          arr.map((item, index) => {            return <li key={index}>{item}</li>          })        }      </ul>    )  }}class App extends React.Component {  render() {    let arr = ['a', 'b', 'c', 'd'];    return (      <ul>        {          arr.forEach((item, index) => {            return <li key={index}>{item}</li>          })        }      </ul>    )  }}复制代码

（2）遍历对象：map && for in

class App extends React.Component {  render() {    let obj = {      a: 1,      b: 2,      c: 3    }    return (      <ul>        {          (() => {            let domArr = [];            for(const key in obj) {              if(obj.hasOwnProperty(key)) {                const value = obj[key]                domArr.push(<li key={key}>{value}</li>)              }            }            return domArr;          })()        }      </ul>    )  }}// Object.entries() 把对象转换成数组class App extends React.Component {  render() {    let obj = {      a: 1,      b: 2,      c: 3    }    return (      <ul>        {          Object.entries(obj).map(([key, value], index) => {   // item是一个数组，把item解构，写法是[key, value]            return <li key={key}>{value}</li>          })         }      </ul>    )  }}

3. 在React中页面从新加载时怎么保留数据？

这个问题就设计到了数据长久化， 次要的实现形式有以下几种：

Redux： 将页面的数据存储在redux中，在从新加载页面时，获取Redux中的数据；
data.js： 应用webpack构建的我的项目，能够建一个文件，data.js，将数据保留data.js中，跳转页面后获取；
sessionStorge： 在进入抉择地址页面之前，componentWillUnMount的时候，将数据存储到sessionStorage中，每次进入页面判断sessionStorage中有没有存储的那个值，有，则读取渲染数据；没有，则阐明数据是初始化的状态。返回或进入除了抉择地址以外的页面，清掉存储的sessionStorage，保障下次进入是初始化的数据
history API： History API 的 pushState 函数能够给历史记录关联一个任意的可序列化 state，所以能够在路由 push 的时候将以后页面的一些信息存到 state 中，下次返回到这个页面的时候就能从 state 外面取出来到前的数据从新渲染。react-router 间接能够反对。这个办法适宜一些须要长期存储的场景。

4. 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'));

5.为什么应用jsx的组件中没有看到应用react却须要引入react？

实质上来说JSX是React.createElement(component, props, ...children)办法的语法糖。在React 17之前，如果应用了JSX，其实就是在应用React， babel 会把组件转换为 CreateElement 模式。在React 17之后，就不再须要引入，因为 babel 曾经能够帮咱们主动引入react。

5. 在React中怎么应用async/await？

async/await是ES7规范中的新个性。如果是应用React官网的脚手架创立的我的项目，就能够间接应用。如果是在本人搭建的webpack配置的我的项目中应用，可能会遇到 regeneratorRuntime is not defined 的异样谬误。那么咱们就须要引入babel，并在babel中配置应用async/await。能够利用babel的 transform-async-to-module-method 插件来转换其成为浏览器反对的语法，尽管没有性能的晋升，但对于代码编写体验要更好。

6. React.Children.map和js的map有什么区别？

JavaScript中的map不会对为null或者undefined的数据进行解决，而React.Children.map中的map能够解决React.Children为null或者undefined的状况。

7. React 中的高阶组件使用了什么设计模式？

应用了装璜模式，高阶组件的使用：

function withWindowWidth(BaseComponent) {  class DerivedClass extends React.Component {    state = {      windowWidth: window.innerWidth,    }    onResize = () => {      this.setState({        windowWidth: window.innerWidth,      })    }    componentDidMount() {      window.addEventListener('resize', this.onResize)    }    componentWillUnmount() {      window.removeEventListener('resize', this.onResize);    }    render() {      return <BaseComponent {...this.props} {...this.state}/>    }  }  return DerivedClass;}const MyComponent = (props) => {  return <div>Window width is: {props.windowWidth}</div>};export default withWindowWidth(MyComponent);复制代码

装璜模式的特点是不须要扭转被装璜对象自身，而只是在里面套一个外壳接口。JavaScript 目前曾经有了原生装璜器的提案，其用法如下：

@testable   class MyTestableClass {}

8. 类组件和函数组件有何不同？

解答

在 React 16.8版本（引入钩子）之前，应用基于类的组件来创立须要保护外部状态或利用生命周期办法的组件（即componentDidMount和shouldComponentUpdate）。基于类的组件是 ES6 类，它扩大了 React 的 Component 类，并且至多实现了render()办法。

类组件：

class Welcome extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}复制代码

函数组件是无状态的（同样，小于 React 16.8版本），并返回要出现的输入。它们渲染 UI 的首选只依赖于属性，因为它们比基于类的组件更简略、更具性能。

函数组件：

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;}复制代码

留神：在 React 16.8版本中引入钩子意味着这些区别不再实用（请参阅14和15题）。

进一步浏览

React 中比照函数式组件和类组件
React 中函数与类组件比对

9. React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被批改、被增加或者被移除的辅助标识。

在 React 中渲染汇合时，向每个反复的元素增加关键字对于帮忙React跟踪元素与数据之间的关联十分重要。key 应该是惟一ID，最好是 UUID 或收集项中的其余惟一字符串：

<ul>  {todos.map((todo) =>    <li key={todo.id}>      {todo.text}    </li>  )};</ul>复制代码

在汇合中增加和删除我的项目时，不应用键或将索引用作键会导致奇怪的行为。

进一步浏览

列表 & key
React 中 key 属性

10. 为什么调用 setState 而不是间接扭转 state？

解答

如果您尝试间接扭转组件的状态，React 将无奈得悉它须要从新渲染组件。通过应用setState()办法，React 能够更新组件的UI。

另外，您还能够谈谈如何不保障状态更新是同步的。如果须要基于另一个状态（或属性）更新组件的状态，请向setState()传递一个函数，该函数将 state 和 props 作为其两个参数：

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

进一步浏览

正确地应用 State

2022必备react面试题 附答案

1. React的严格模式如何应用，有什么用途？

2. 在React中遍历的办法有哪些？

3. 在React中页面从新加载时怎么保留数据？

4. React必须应用JSX吗？

5. 在React中怎么应用async/await？

6. React.Children.map和js的map有什么区别？

7. React 中的高阶组件使用了什么设计模式？

8. 类组件和函数组件有何不同？

9. React 中 keys 的作用是什么？

10. 为什么调用 setState 而不是间接扭转 state？

2022必备react面试题附答案