Open linwu-hi opened 1 year ago
在使用react开发项目过程中，每个人或多或少都会遇到一些"奇怪"的问题，本质上都是我们对其理解的不够透彻
react
react 系列，33个工作日，33次凌晨还在亮起的台灯，到今天就圆满画上句号了，比心
在系列中我们列出了很多比较经典的考题，工作中遇到的问题也往往就藏中其中，只是以不同的表现形式存在罢了
今天的题解不算题解，准确来说是对整个系列的一次贯穿，总结
目录:
主要的特性分为：
借助这些特性，react整体使用起来更加简单高效，组件式开发提高了代码的复用率
主要分成了新的生命周期和旧的生命周期：
旧的生命周期流程图如下：
两者相同点：
区别：
在React中，类组件基于ES6，所以在constructor中必须使用super
React
ES6
constructor
super
在调用super过程，无论是否传入props，React内部都会将porps赋值给组件实例porps属性中
props
porps
如果只调用了super()，那么this.props在super()和构造函数结束之间仍是undefined
super()
this.props
undefined
在react类组件的状态需要通过setState进行更改，在不同场景下对应不同的执行顺序：
setState
当我们批量更改state的值的时候，react内部会将其进行覆盖，只取最后一次的执行结果
state
当需要下一个state依赖当前state的时候，则可以在setState中传递一个回调函数进行下次更新
React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等
组件注册的事件最终会绑定在document这个 DOM上，而不是 React组件对应的 DOM，从而节省内存开销
document
DOM
自身实现了一套事件冒泡机制，阻止不同时间段的冒泡行为，需要对应使用不同的方法
react常见的绑定方式有如下：
前两种方式在每次组件render的时候都会生成新的方法实例，性能问题欠缺
render
组件的创建主要分成了三种方式：
如今一般都是前两种方式，对于一些无状态的组件创建，建议使用函数式创建的方式，再比如hooks的机制下，函数式组件能做类组件对应的事情，所以建议都使用函数式的方式来创建组件
hooks
组件间通信可以通过props、传递回调函数、context、redux等形式进行组件之间通讯
context
redux
使用key是react性能优化的手段，在一系列数据最前面插入元素，如果没有key的值，则所有的元素都需要进行更换，而有key的情况只需要将最新元素插入到前面，不涉及删除操作
key
在使用key的时候应保证：
Refs允许我们访问 DOM节点或在 render方法中创建的 React元素
Refs
下面的场景使用refs非常有用：
refs
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
Hook
class
解决问题如下：
常见的CSS引入方式有以下：
CSS
组件内直接使用css会导致大量的代码，而文件中直接引入css文件是全局作用域，发生层叠
css
引入.module.css文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写
.module.css
css in js这种方法，可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等
css in js
redux要求我们把数据都放在 store公共存储空间
store
一个组件改变了 store 里的数据内容，其他组件就能感知到 store的变化，再来取数据，从而间接的实现了这些数据传递的功能
工作流程图如下所示：
市面上有很多优秀的redux中间件，如：
常见的组件有：
在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行
函数组件useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染
useState
父组件渲染导致子组件渲染，子组件并没有发生任何改变，这时候就可以从避免无谓的渲染，具体实现的方式有如下：
jsx首先会转化成React.createElement这种形式，React.createElement作用是生成一个虚拟Dom对象，然后会通过ReactDOM.render进行渲染成真实DOM
jsx
React.createElement
Dom
ReactDOM.render
除了减少render的渲染之外，还可以通过以下手段进行优化：
除此之外， 常见性能优化常见的手段有如下：
node server 接收客户端请求，得到当前的请求url 路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props、context或者store 形式传入组件
node server
url
然后基于 react 内置的服务端渲染方法 renderToString()把组件渲染为 html字符串在把最终的 html进行输出前需要将数据注入到浏览器端
renderToString()
html
浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html 节点，整个流程结束
面试官：说说你在使用React 过程中遇到的常见问题？如何解决?
一、前言
在使用
react开发项目过程中，每个人或多或少都会遇到一些"奇怪"的问题，本质上都是我们对其理解的不够透彻react系列，33个工作日，33次凌晨还在亮起的台灯，到今天就圆满画上句号了，比心在系列中我们列出了很多比较经典的考题，工作中遇到的问题也往往就藏中其中，只是以不同的表现形式存在罢了
今天的题解不算题解，准确来说是对整个系列的一次贯穿，总结
目录:
react 有什么特性
主要的特性分为：
借助这些特性，
react整体使用起来更加简单高效，组件式开发提高了代码的复用率生命周期有哪些不同阶段？每个阶段对应的方法是？
主要分成了新的生命周期和旧的生命周期：
旧的生命周期流程图如下：
state 和 props有什么区别？
两者相同点：
区别：
super()和super(props)有什么区别？
在
React中，类组件基于ES6，所以在constructor中必须使用super在调用
super过程，无论是否传入props，React内部都会将porps赋值给组件实例porps属性中如果只调用了
super()，那么this.props在super()和构造函数结束之间仍是undefinedsetState执行机制？
在
react类组件的状态需要通过setState进行更改，在不同场景下对应不同的执行顺序：当我们批量更改
state的值的时候，react内部会将其进行覆盖，只取最后一次的执行结果当需要下一个
state依赖当前state的时候，则可以在setState中传递一个回调函数进行下次更新React的事件机制？
React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等组件注册的事件最终会绑定在
document这个DOM上，而不是React组件对应的DOM，从而节省内存开销自身实现了一套事件冒泡机制，阻止不同时间段的冒泡行为，需要对应使用不同的方法
事件绑定的方式有哪些？
react常见的绑定方式有如下：前两种方式在每次组件
render的时候都会生成新的方法实例，性能问题欠缺构建组件的方式有哪些？区别？
组件的创建主要分成了三种方式：
如今一般都是前两种方式，对于一些无状态的组件创建，建议使用函数式创建的方式，再比如
hooks的机制下，函数式组件能做类组件对应的事情，所以建议都使用函数式的方式来创建组件组件之间如何通信？
组件间通信可以通过
props、传递回调函数、context、redux等形式进行组件之间通讯key有什么作用？
使用
key是react性能优化的手段，在一系列数据最前面插入元素，如果没有key的值，则所有的元素都需要进行更换，而有key的情况只需要将最新元素插入到前面，不涉及删除操作在使用
key的时候应保证：refs 的理解？应用场景？
Refs允许我们访问DOM节点或在render方法中创建的React元素下面的场景使用
refs非常有用：Hooks的理解？解决了什么问题？
Hook是 React 16.8 的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性解决问题如下：
如何引入css？
常见的
CSS引入方式有以下：组件内直接使用
css会导致大量的代码，而文件中直接引入css文件是全局作用域，发生层叠引入
.module.css文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写css in js这种方法，可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等redux工作原理？
redux要求我们把数据都放在store公共存储空间一个组件改变了
store里的数据内容，其他组件就能感知到store的变化，再来取数据，从而间接的实现了这些数据传递的功能工作流程图如下所示：
redux中间件有哪些？
市面上有很多优秀的
redux中间件，如：react-router组件有哪些？
常见的组件有：
render触发时机？
在
React中，类组件只要执行了setState方法，就一定会触发render函数执行函数组件
useState会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染如何减少render？
父组件渲染导致子组件渲染，子组件并没有发生任何改变，这时候就可以从避免无谓的渲染，具体实现的方式有如下：
JSX转化DOM过程？
jsx首先会转化成React.createElement这种形式，React.createElement作用是生成一个虚拟Dom对象，然后会通过ReactDOM.render进行渲染成真实DOM性能优化手段有哪些
除了减少
render的渲染之外，还可以通过以下手段进行优化：除此之外， 常见性能优化常见的手段有如下：
如何做服务端渲染？
node server接收客户端请求，得到当前的请求url路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为props、context或者store形式传入组件然后基于
react内置的服务端渲染方法renderToString()把组件渲染为html字符串在把最终的html进行输出前需要将数据注入到浏览器端浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的
html节点，整个流程结束