react面试题

第一部分：函数组件和类组件

1.React 组件之间如何通讯?  

        父传子 子传父 兄弟通信

        1.1父传子

                父组件通过 props 传参给子组件

2.JSX的本质是什么?

JSX 本质其实是一个函数

React.createElement 有三个参数，第一个参数是 type 也就是标签或者组件名、第二个参数是 props 是标签属性、第三个参数是 children 是标签或者组件内的内容。
 

3.context是什么，如何应用?

         Context字面意思是上下文环境 ，它 是一个抽象类，定义很多访问应用程序环境中全局信息的接 口

4.说一下shouldComponentUpdate 的用途

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

6.react类组件的setstate 是同步操作还是异步操作

7.什么是纯函数

        就是一个函数的返回结果只依赖于它的参数，并且在执行过程中没有副作用，我们就把这个函数叫做纯函数

8.介绍react组件生命周期

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

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

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

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

2. 调用方式
        函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。

3. 状态管理
        函数式组件没有状态管理，类组件有状态管理。

4. 使用场景
        类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件，一般情况下能用函数式组件就不用类组件，提升效率。

12.什么是受控组件,什么是非受控组件?

 受控组件

受控组件，就是受我们控制的组件。

其实就是我们对某个组件状态的掌控，他的值是否只能由用户设置，而不能通过代码控制。

<Input value={x} onChange={fn}/>

非受控组件

input标签它实际也是一个DOM元素，可以使用 ref 来从 DOM 节点中获取表单数据。

<Input defaultValue={x} ref={input}/>

13.何时使用异步组件

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

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

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

17.什么是 PureComponent？

18.react事件和DOM事件有什么区别?

19.react性能优化有哪些?

20.说一下React 和 Vue 的区别

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

第二部分 react hooks

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

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

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

4.如何定义Hook?

5.说一下React Hooks 性能优化

6.使用React Hooks 遇到那些坑?

7.Hooks 相比HOC 和 Render Prop 有哪些优点?

第三部分 webpack面试题

1.前段为何要进行打包和构建?

        1.体积更小，加载更快

        2.编译高级语言和语法

        3.兼容性和错误检查

        4.统一、高效的开发环境

        5.统一的构建流程和产出标准

        6.继承公司构建规范（提测、上线等）

2.module chunk bundle的区别

        1.model - 个个源码文件,webpack中一切皆模块

        2.chunk - 多模块合并成的,如entry import() spitChunk

        3.bundle - 最终输出的文件

3.loader 和 plugin 的区别

        1.loader - 模块转换器,如 less  --> css

        2.plugin - 扩展插件,如HtmlWebpackPlugin

4.常见的loader 和plugin有哪些?

        

5.Babel 和 webpack 的区别?

        1.babel - JS 新语法编译工具,不关心模块化

        2.webpack - 打包构建工具,是多个loader plugin的集合

6.webPack 如何产出一个lib库?

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

        1. babel-polyfill 会污染全局

        2. babel-runtime 不会污染全局

        3.产出第三方lib要用babel-runtime

8.Webpack 如何实现懒加载?

1.import()

2.结合Vue React异步组件

3.结合Vue-router React-router异步加载路由

9.为何Proxy 不能被Polyfill?

1.Class可以用function模拟

2.Promise可以用callback来模拟

3.但Proxy的功能用Object.defineProperty无法模拟

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

1.优化babel-loader

2.IgnorePlugin

3.noParse

4.happyPack

5.ParallelUglifyPlugin

11.Webpack 如何优化产出代码?

1.小图片base64编码

2.bunble 加 hash

3.懒加载

4.提取公共代码

5.使用CDN加速

6.IgnorePlugin

7.使用production

8.Scope Hosting