React 面试题

1. React组件之间如何通信 

 兄弟之间通讯，父子组件之间通讯，跨组件通讯

2. JSX本质是什么              

 JSX本质是一个语法糖 

3. 说一下shouldComponentUpdate的用途                

对数据state状态进行改变

4. context是什么              

 context是一个运行环境

5. 说一下redux单向数据流的机制                

事件触发Dispatch派发到state，state深拷贝再通过reducer修改数据自动回显

6. React类组件的setState是同步操作还是异步操作                

不是单纯的同步或异步操作

7. 什么是纯函数组件                

是函数式编程的基础

8. 介绍下React组件生命周期                

constructor创建组件时最先执行，render每次渲染都触发，componentdidMount组件挂载后完成

9. React发起ajax应该在哪个生命周期

在componentDidMount生命周期中发起

10. 渲染列表，为何使用key                

提高渲染性能  避免重复渲染  帮助 React 识别列表项

11. 函数组件和class组件的区别

  函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂; 函数式组件没有状态管理，类组件有状态管理。

12. 什么是受控组件、什么是非受控组件

   受控组件：

1. 表单组件的状态/数据只由state 维护 修改只能通过setState()来更新,
2. 表单数据是由 React 组件来管理

     非受控组件：

1. 使用ref来从 DOM 节点中获取表单数据。
2. 表单数据将交由 DOM 节点来处理

   13. 何时使用异步组件？

       用lazy方法 和 suspense组件的时候

    14. 多个组件有公共逻辑，如何抽离?

        使用高阶组件或者Render Props

     15. Redux如何进行异步请求?

      通过npm add redux-thunk安装redux-thunk裤,在store中，创建store时候、引入               applyMiddware方法来使用redux-thunk在组件使用异步action

      16. react-router如何配置懒加载

         1、懒加载方式引入路由 const World = lazy(() => import('../World'))

          2、使用Suspense

      17.什么是PureComponent?

         React15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思，            PureComponent也就是纯组件，取代其前身 PureRenderMixin ,PureComponent 是优化 React 应用程序最重要的方法之一，易于实施，只要把继承类从 Component 换成 PureComponent 

18：React事件和Dom事件有什么区别

        React事件没有绑定在React组件对应的原生Dom节点上

19：React性能优化方式有那些

         将多个生命周期整合成Hooks来使用

20：说一下React和Vue的区别

        核心思想不同，组件写法差异，diff算法不同

第二部分: react hooks

1.列举十个常用的React内置HooksuseState：

管理组件的局部状态。
useEffect：副作用处理，类似于componentDidMount 和 componentDidUpdate。
useContext：用于在组件中获取上下文。
useReducer：基于 reducer 的状态管理，用于管理复杂的状态逻辑。
useCallback：缓存函数引用，用于优化组件性能。
useMemo：缓存值引用，用于优化组件性能。
useRef：获取 DOM 元素或存储任意值的可变容器。
useImperativeHandle：暴露自定义 ref，允许更精细的控制子组件暴露给父组件的 DOM 节点或实例。
useLayoutEffect：和 useEffect 相似，但在浏览器执行绘制之前同步执行。
useDebugValue：在 React 开发者工具中显示自定义 hook 的标签。

2. 为什么会有React Hooks，他解决了哪些问题?

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。解决了难以重用和共享组件中的与状态相关的逻辑

3. React Hooks如何模拟组件的生命周期？

用React.memo就可以模仿shouldComponentUpdate的部分功能

useEffect(()=>{ }, [])  挂载完成 componentDidMount

useEffect(()=>{ })  挂载完成 componentDidMount 和  更新完成 componentDidUpdate

useEffect(()=>{ return ()=>{ 卸载之前 componentWillUnmount } } ,[])  挂载完成 componentDidMount

4. 如何自定义Hook？

1.引入react和自己需要的hook
2.创建自己的hook函数
3.返回一个数组,数组中第一个内容是数据,第二是修改数据的函数
4.将自己定义的hook暴露出去
5.在自己的业务组件中引入并使用

5. 说一下React Hooks性能优化

1 使用 React.memo 避免组件的重复渲染 2 使用 useMemo 避免重复计算 3 使用 useCallback避免子组件的重复渲染

6. 使用React Hooks遇到哪些坑？

1、setState到底是同步的还是异步的 2、Funciton组件和Class组件到底有哪些不同

7.说一下Babel-polyfill和babel-runtime的区别

1、Babel-polyfill

Babel-polyfill是一个包含完整ES6功能和新API的polyfill。在使用Babel转换ES6代码时，如果代码中使用了ES6的新API或者新特性，需要引入Babel-polyfill。Babel-polyfill会在全局对象上添加ES6的新API和特性，使得旧的浏览器也能够支持这些新特性。Babel-polyfill的缺点是它会把所有新API都塞进全局作用域，会导致代码体积变大，同时还会对全局变量带来一定的污染。

2、Babel-runtime

Babel-runtime是一个实用工具集，包含了一系列的helper函数，用来辅助Babel转换ES6代码。Babel-runtime依赖于babel-runtime-corejs2或babel-runtime-corejs3，这两个包中分别包含了ES6和ES7的polyfill。使用Babel-runtime时需要在模块中引入所需要的helper函数，而不是把它们都塞进全局作用域。这种方法避免了全局变量的污染，同时也能减小代码体积。

因此，Babel-polyfill和babel-runtime的区别在于Babel-polyfill是一个完整的polyfill，会把所有新API都塞进全局作用域，而babel-runtime是一个实用工具集，只会在需要的时候引入所需要的helper函数

8.Webpack如何实现懒加载？

Webpack可以通过代码分割实现懒加载。代码分割是将代码分割成更小的块，以便实现按需加载。在Webpack中，可以使用import()语法实现代码分割和懒加载。

9.为何Proxy不能被Polyfill？

 Proxy 是一种 JavaScript 对象，提供了一种强大的方法来拦截和定制对象上的操作。Polyfill 是指在不支持某个 API 或功能的旧版浏览器上，通过代码模拟实现该功能的一种技术。

由于 Proxy 是 ECMAScript 6 引入的新特性，而 Polyfill 通常是基于已有的 API 或语言特性实现的，因此 Polyfill 不能模拟实现 Proxy。另外，Proxy 的实现与 Javascript 引擎紧密相关，具有较高的复杂性，因此无法通过简单的 JavaScript 代码实现 Polyfill。

10.Webpack如何优化构建速度？

减少编译模块的数量：

只编译实际需要的模块，而不是所有模块。
使用 tree shaking 来排除无用的代码块。
缩小编译的范围：

使用 Webpack 的 DLLPlugin 将公共代码单独打包，避免重复打包。
开启 Webpack 的缓存，避免重复编译。
减少加载资源的数量：

使用 CDN 加载第三方库。
在 HTML 文件中使用 defer 或 async 属性
优化 loader 和 plugin：

使用 loader 的 include 和 exclude 属性来限定 loader 所处理的文件范围。
简化 plugin 的配置，减少不必要的插件。
11.Webpack如何优化产出代码？

代码分离：使用代码分离可以将代码拆分成更小的块，这样可以减少每个块的大小，从而提高性能。Webpack 4 已经内置了代码分离功能，可以使用 import() 或 require.ensure() 来实现。

Tree Shaking：Tree Shaking 可以消除未使用的代码，以减少代码大小。Webpack 会检查每个模块的导出和使用情况，然后删除未被使用的代码块。要使用 Tree Shaking，需要在配置文件中启用 UglifyJSPlugin 或者使用 Babel 和 babel-preset-env 等插件。

Minification：Webpack 可以使用 UglifyJSPlugin 对代码进行压缩，从而减少文件的大小。此插件可以删除未使用的代码和注释，并缩小变量名。使用此插件需要在生产模式下运行。

优化加载速度：Webpack 可以通过多种方式优化加载速度。例如，可以使用 webpack-bundle-analyzer 插件来分析包并找出导致较长加载时间的模块；可以使用构建时分离代码和公共代码，以便更快地加载；可以使用缓存来减少已加载包的加载时间。

性能监测：Webpack 可以使用打包分析工具来监测构建过程中的性能问题。例如，可以使用 webpack-bundle-analyzer 插件来分析包大小和依赖关系。

12、说一下什么是 redux、 react-redux、 redux-thunk、 redux-saga、redux-toolkit，它们之间的 区别是什么？

它们之间的主要区别在于它们的作用和用途。Redux是一个状态管理库，React-Redux是Redux的React绑定，Redux-Thunk和Redux-Saga是Redux的中间件，用于处理异步操作。而Redux-Toolkit提供了一组标准化、简化和易于使用的API，以帮助更快、更简单地编写Redux代码。

Redux是一个JavaScript状态管理库，用于管理应用程序状态。它提供了一个可预测的状态容器，使得数据流清晰可见，易于调试。

React-Redux是一个与React一起使用的Redux库，用于构建可维护、高效且易于调试的React应用程序。它提供了一组React组件，这些组件使得与Redux集成变得非常方便。

Redux-Thunk是Redux中间件之一，允许我们编写异步逻辑，以便在应用程序中使用异步操作。它允许我们发送异步操作，等待它们完成，然后将结果发送回Redux Store。

Redux-Saga是另一个Redux中间件，用于管理应用程序的副作用。它使用类似于生成器函数的语法来简化异步逻辑，并可以轻松处理复杂的并发和异步流程。

Redux-Toolkit是一个Redux工具包，它为Redux提供了一组标准化的、简化的、易于使用的API。它帮助我们更快地编写Redux代码，减少了许多样板代码，并提高了代码的性能和可读性