本文转载自微信公众号《JS每日一问》，作者灰灰。转载本文请联系JS每日一问公众号。一、前言在使用react开发项目的过程中，大家或多或少都会遇到一些“奇怪”的问题。本质上，我们并没有完全理解它。React系列，33个工作日，33个凌晨点亮的台灯，今天圆满结束。比心在系列中列举了很多经典的考题，工作中遇到的问题往往隐藏在其中，只是以不同的形式存在。就这样。今天的问题解决方案不是问题解决方案。准确的说，是贯穿了整个系列。目录摘要：react有什么特点，生命周期有哪些不同阶段？每个阶段对应的方法是什么？state和props有什么区别？super()和super(props)有什么区别？SetState执行机制？React的事件机制？事件绑定有哪些方式？构建组件的方式有哪些？区别？组件如何通信？?应用场景？对Hooks的理解？解决了哪些问题？怎么引入css？redux是如何工作的？什么是redux中间件？什么是反应路由器组件？服务端渲染怎么做？反应有什么特点？主要特性有：JSX语法、单向数据绑定、虚拟DOM、声明式编程、Component。重用率生命周期的不同阶段是什么？每个阶段对应的方法是什么？主要分为新生命周期和旧生命周期：新生命周期整体流程如下图：旧生命周期流程图如下：state和props有什么区别？两者相同：都是JavaScript对象，都是用来保存信息的，props和state都可以触发渲染更新。区别：props是对外传递给组件的，而state是在组件内部传递给组件的，组件是自己管理的。一般在constructor中初始化的props在组件内部是不能修改的，但是state在组件内部是可以修改的。状态是可变的，可以修改super()和super(props）有什么区别？在React中，类组件是基于ES6的，所以在构造函数中必须使用super来调用super进程。无论是否传入props，React都会将porps赋值给组件实例的porps属性。如果只调用super()，那么this.props还是super()到构造函数结束之间的undefinedsetState执行机制？React类组件的状态需要通过setState来改变，对应不同场景下的不同执行顺序：在组件生命周期或者React合成事件中，setState是异步的。在setTimeout或原生DOM事件中，setState是同步的。当我们批量更改状态的值时，React会在内部覆盖它，只有在需要下一个状态时才取上一次的执行结果。在当前状态下，可以在setState中传递一个回调函数，下次更新React的事件机制吗？React基于浏览器的事件机制实现了一套事件机制，包括事件注册、事件合成、事件冒泡、事件派发等组件注册的事件，最终会绑定到文档的DOM，而不是对应的DOMReact组件，从而节省内存开销。它本身实现了一套事件冒泡机制来防止不同时间段的冒泡行为，需要对应事件绑定的不同方法有哪些？react常用的绑定方法有以下几种：在render方法中使用bind在render方法中使用箭头函数在构造函数中使用箭头函数绑定来绑定每个组件中的前两个方法渲染时，会生成新的方法实例。因性能不足而构建组件的方式有哪些？有什么区别？创建组件主要有三种方式：函数式创建、继承React.Component创建、通过React.createClass方法创建，现在一般是前两种方式，对于一些无状态的组件创建，推荐使用函数式方式。比如在hooks机制下，函数式组件可以做类组件相应的事情，所以建议使用函数式的方式创建组件，组件之间如何通信？组件之间的通信可以通过props、传递回调函数、context、redux等方式进行，key的作用是什么？使用key是react性能优化的一种手段，在一系列数据的开头插入元素，如果key没有value，则需要所有元素替换，如果有key，只需要将最新的元素插入到最前面，不涉及删除操作。使用key时要保证：key应该是唯一的key，不要使用随机值（随机数会在下次render时重新生成一个数）避免使用index作为keyrefs的理解？应用场景？Refs允许我们访问在render方法中创建的DOM节点或React元素以下场景对使用refs非常有用：对Dom元素的焦点控制、内容选择、对Dom元素的内容设置和媒体播放的控制Dom元素的操作和操作对组件实例集成第三方DOM库Hooks的理解？解决了哪些问题？Hook是React16.8的新特性它允许你在不编写类的情况下使用状态和其他React特性来解决如下问题：难以在组件中复用和共享状态相关的逻辑逻辑复杂的组件很难开发和维护，当我们的组件需要处理多个时是两个不相关的本地状态，每个生命周期函数可能包含各种不相关的逻辑。类组件中的this增加了学习成本，基于现有工具的类组件优化存在一些问题。由于业务变化，功能组件要改为类组件等，如何引入css？常见的CSS导入方式有：直接在组件中使用组件。组件中导入.css文件组件中导入.module.css文件JS组件中CSS直接使用css会导致代码很多，直接在文件中导入css文件是全局作用域，级联导入.module.css文件可以解决局部作用域的问题，但是动态修改样式不方便，需要通过inline方式在js中css中编写样式的方法可以满足大部分场景的应用。可以类似于预处理器，如样式嵌套、定义、状态修改等。redux的工作原理？Redux要求我们把所有的数据都放在store的公共存储空间中，当一个组件改变store中的数据内容时，其他组件可以感知到store中的变化，然后去取数据，从而间接实现这些数据的功能转移。工作流程图如下：redux中间件有哪些？有很多优秀的redux中间件，例如：redux-thunk：用于异步操作redux-logger：用于日志记录react-router组件有哪些？常用组件有：BrowserRouter、HashRouterRouteLink、NavLinkswitchredirectrender触发时机？在React中，类组件只要执行了setState方法，就一定会触发render函数。执行函数组件useState会判断当前值是否发生变化，从而决定是否执行render方法。一旦父组件渲染，子组件也会渲染。如何减少渲染？父组件的渲染导致子组件的渲染，子组件没有变化。这时候可以避免不必要的渲染。具体实现方法如下：shouldComponentUpdatePureComponentReact.memoJSX转换DOM过程？jsx首先会转化成React.createElement的形式，React.createElement的作用是生成一个虚拟的Dom对象，然后通过ReactDOM.render将其渲染成真实的DOM除了减少render还有哪些性能优化的方法除了渲染之外，还可以也可以通过以下方式进行优化：另外，常见的性能优化方式如下：避免使用内联函数使用ReactFragments避免附加标签使用Immutable懒加载组件事件绑定方式服务端渲染服务端渲染怎么做？节点服务器收到客户端请求，获取当前请求的url路径，然后在已有的路由表中找到对应的组件，获取请求的数据，将数据作为props、context或者storeform传入组件，然后渲染基于React内置的服务器端渲染方法renderToString()将组件作为html字符串。在输出最终的html之前，需要将数据注入到浏览器中。浏览器开始渲染和比较节点，然后完成执行事件绑定和组件内部的一些交互，浏览器复用服务器输出的html节点，整个过程到此结束，整个React系列结束，如果这样系列给你带来一些启发或者帮助，可以点击下方给我们点个赞，下期系列见
