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. 什么是受控组件、什么是非受控组件
受控组件:
- 表单组件的状态/数据只由
state
维护 修改只能通过setState()
来更新, - 表单数据是由 React 组件来管理
非受控组件:
- 使用
ref
来从 DOM 节点中获取表单数据。 - 表单数据将交由 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代码,减少了许多样板代码,并提高了代码的性能和可读性