m0_71955188的博客

【代码】为什么useState返回的是数组不是对象？

【代码】React的路由的原理是什么？写出其核心代码！

【代码】React生命周期中的坑，演示代码以及解决方案；

2. 虚拟化列表：如果您在页面上有大量的列表数据需要展示，可以考虑使用虚拟化列表来优化性能。虚拟化列表只会渲染可见区域的列表项，而不是渲染整个列表。这样可以提高渲染和滚动性能，减少消耗。在 React 中处理大量数据的虚拟化列表可以使用以下代码技巧：在上述代码中，使用了第三方虚拟化库 的 组件来创建虚拟化列表。通过传入 来指定数据总数， 来指定每行的高度， 来指定渲染每行的函数。同时指定列表的宽度和高度来进行可视区域的渲染。这样可以有效地优化大量数据的展示，只渲染可见区域的内容。在上述代码中，手

传空数组：当第二个参数是空数组[]时，表示useEffect只会在组件爱你挂载和卸载时运行一次。相当于componentDidMount和componentWillUnmount的效果。它告诉React该effect不依赖与任何props和state，因此不需要再重新运行effect。这在那些只需要在组件挂载和卸载时执行一次的场景下非常有用。传依赖数组：当第二个参数是包含依赖的数组的时候，表示useEffect将根据依赖项的变化重新执行effect函数。如果依赖项发生变化，useEffect将在重新渲

同步action：创建方式：同步action是通过调用action创建函数直接返回一个包含type和payload等属性的普通对象。执行方式：同步action会立即执行被发送到reducer，通过reducer更新应用的状态。异步action：创建方式：异步action是通过使用中间件，(例如:Redux-Thunk、Redux-saga )等，来处理的，异步action创建函数返回一个函数，在这个函数中可以进行异步操作，并最终通过dispatch发送一个或者多个action。执行方式：异

Redux-saga：处理方式：Redux-saga使用了Generator函数来处理异步操作，通过监听特定的action类型，可以执行更复杂的异步流程控制，例如：并行请求、取消请求等。使用场景：Redux-saga适用于复杂的异步操作场景，例如：需要处理多个依赖关系，需要取消请求，需要处理复杂的流程控制等。它提供了更强大的工具和语法来处理一哦不操作，单页相对复杂一些。Redux-Thunk：处理方式：Redux-Thunk允许action创建函数返回一个函数，在这个函数中可以执行异步操作，并

使用命名空间：给每个模块或组件action-type添加一个独特的前缀或命名空间，以确保其唯一性，例如：可以在定义action-type常量时候加上模块的名换或路径作为前缀。使用字符串常量拼接：将action-type的各个部分拼接成一个字符串常量，确保其唯一性，可以使用字符串拼接运算或模版字符串字面量来实现。使用工具库：使用工具库来生成唯一的action-type常量。例如：可以使用uuid库来生成唯一标识符作为action-type。

重绘：当元素的外观样式发生改变，但不影响其布局时，浏览器会执行重绘操作。这意味着浏览器会重新绘制受影响的元素，以更新其可见的外观，但不会改变元素在文档流中的位置。回流：当元素的尺寸、布局或其他影响其几何属性的属性发生变化时，浏览器会执行回流操作。回流会导致浏览器重新计算元素的布局和位置，并重新绘制受影响的部分或整个页面。为了避免频繁的重绘和回流，可以采取以下措施：使用 CSS3 动画：CSS3 动画利用 GPU 加速，可以更高效地实现动画效果，减少重绘和回流的次数。批量修改样式：通过改变元素的 cl

状态合并：当调用 setState 时，React 首先将传入的状态对象与当前的状态进行合并。如果传入的是一个对象，React 将会浅合并（Shallow Merge）这两个对象；如果传入的是一个函数，React 将会将当前状态作为参数传递给该函数，并使用函数返回的新状态进行合并。批量更新：React 会将所有的 setState 调用收集起来，并进行批量更新。这样做是为了提高性能，避免频繁的重渲染。触发重新渲染：在组件的生命周期方法或 React 事件处理程序中，React 会根据更新队列中的状

性能优化：React.Component 是基础组件类，它通过实现 shouldComponentUpdate 方法来决定是否重新渲染组件。React.PureComponent 是 React.Component 的一个变种，它自动实现了 shouldComponentUpdate 方法，当组件接收到新的 props 或 state 时，只有在这些数据和之前的数据不相等时，才会触发重新渲染。实现方式：React.Component 需要手动实现 shouldComponentUpdate 方法来进

加载占位图：在页面中的图片标签()的src属性中设置一个占位图，可以十一章小图或者是一段base64编码的图片。获取图片信息：遍历页面上的所有图片标签，获取每个标签的位置、大小以及真实图片的URL。监听滚动事件：监听页面的滚动事件，在滚动是触发懒加载函数。判断可见性：在懒加载函数中，判断图片是否进入了可见区域。可以通过比较图片的位置与当前可视窗口的位置来判断是否进入可见区域。替换图片源：当图片机内可见区域的时候，将图片标签的src属性替换成为真实的图片的URL。这样浏览器会开始加载图片资源。

代码优化和压缩：实用工具(如：Webpack、Parcel等)对代码进行打包、压缩和混淆，减少文件大小，提高加载速度。同时，使用代码分割(Code Splitting)将应用拆分为多个小模块，按需加载，减少初始加载的资源量。懒加载和预加载：通过懒加载(Lazy Loading)将页面中的某些组件或模块延迟加载，只在需要时才加载，减少初始加载的负担。另外，可以使用预加载(Preloading)技术，在页面加载完成后，提前加载将来肯呢个需要的资源，以缩短后续页面的加载时间。缓存策略：利用合理浏览器缓存

语法和模版就方式：React使用javaScript的语法，通常使用JSX(javaScript XML)编写组件模版，它将HTML结构和javaScript代码结合在一起。而Vue使用基于HTML的模版语法，可以在HTML代码中直接书写Vue模版命令，使得模版更加可读性强且易于理解。组件化开发：React和Vue都支持组件化开发。React使用类组件或者函数式组件来定义和管理组件，通过props和状态(state)来管理组件之间的数据传递和通信。Vue也通过组件实现了类似的功能，但它提供了更多的选项

【代码】放大镜图片放大（淘宝图片放大）

【代码】图片放大（点击放大）

【代码】react 瀑布流。

【代码】react 电话本列表、触底加载。

在react中，render()方法是组件类的一个生命周期，用于定义组件的UI结构。它的原理是将组件的虚拟dom(vlrtual dom)表示转化为真实的DOM元素，并将其插入到页面中。当满足以下情况之一时，React会触发组件的render()方法：组件初始化：在组件第一次被创建和渲染时，会调用render()方法来生成的虚拟dom，并将其转化为真实的DOM元素。组件更新：当组件更新的状态(state)或属性(props)发生变化时，React会根据新的状态或属性重新执行render()方法，生成新

@redux.js/toolkit是Redux官方提供的一个官方工具包，只在简化和改进使用Redux的开发流程。它提供了一系列功能和工具，可以更轻松的定义Redux的状态管理和操作逻辑。以下是对@redux.js/toolkit的理解：简化的API：@redux.js/toolkit提供了一些简化的API，例如createSlice用于生成Redux的slice(包含reducer和action)；configgureSstore用于创建Redux的store；createAsyncThunk用于处理异

react的virtual DOM diff算法是用于比较两个虚拟dom树之间的差异，并且值更新需要更新的部分，以减少DOM操作的次数，提高性能。react的diff算法基于一下三个基本原则：1.比较同级的两个节点：React会首先比较两个同级节点的类型（标签名）是否相同，如果不同，则完全替换该节点及其子节点；如果类型相同，则继续比较节点的属性个时间监听器。2.递归比较子节点：如果两个同级节点类型相同，React会对他们的子节点进行递归比较。React使用key属性来优化子节点的比较过程，在更新过程中

1.使用组件shouldComponentUpdate方法：通过在组件爱你中实现shouldComponentUpdate方法，可以手动控制组件的更新，在该方法中，可以根据组件的属性和状态进行比较，判断是否需要进行更新。避免不必要的更新可以提高性能。2.使用PurComponent或react.mome：可以使用PurComponent类型的组件或使用React.memo包裹函数组件来自动进行浅比较。他们会在组件的属性或状态发生变化时进行比较，只有发横变化的部分才会触发更新。3.使用列表的key属性

1.选择器：css引入了一系列新的选择器，使得选择器元素更加灵活和准确2.边框样式：css3允许开发人员使用border-image属性来讲图象作为边框3.盒模型：引入box-shadow属性，使得可以为元素加阴影效果4.渐变：引入渐变属性通过linear-gradient()和radial-gradient()可以创建线性渐变和径向渐变的背景效果。这使得在背景上实现哦清华的过度效果成为可能5.文本效果：新增了一些文本效果属性，如text-shadow用于给文本添加阴影效果，text-overflo

在react中，调和阶段是指通过对组件的更新来计算/重新计算并渲染页面的阶段，在这个阶段setState方法的主要作用是触发组件的重新渲染，并将需要更新的状态合并到组件爱你的状态队列中1）更新状态队列：当调用setState方法时，react会将状态更新添加到组件爱你的状态队列中，而不是立即更新组件的状态，通过批量处理状态更新，可以减少不必要的重复渲染操作2）标记组件需要更新：setState方法会标记为“脏组件”，即需要进行重新渲染。react会在当前调和阶段结束后，根据状态队列中的更新重新计算组件的

real diff算法是react在虚拟dom层进行性能优化的一部分，他通过比较两个虚拟dom树的差异更新必要的部分，减少dom操作和提升渲染效率1）tree层：首先进行的是tree层的比较，在这一层，react会遍历整个组件树的虚拟dom，对每个节点进行比较，如果两个节点的类型不同，则替换掉几点及其子节点。如果节点类型相同且具有唯一的key属性，react会尽可能的复用自己已经存在的节点2）Component层：如果tree层比较重发现某个组件的实例已改变，react会调用该组件的componen

1）错误使用setState：在组件更新时，使用setState方法可能会导致一些问题，例如，在react方法中调用setState会导致无限循环更新，或者在异步更新毁掉中调用setState，可能会出现状态更新不及时的情况，解决问题的方法是使用componentDidupdate生命周期方法来处理异步数据，并确保在适当的时机调用setState2）不正确使用componentDidmount和componentDidupdate：在这两个生命周期方法中执行副作用操作，在这里发送网络请求或者修改Dom

在使用setState更新数据的时候，setState的更新类型分成:同步更新，异步更新在组件生命周期或React合成事件中，setState是异步在setTimeout或者原生dom事件中，setState是同步对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行结果。setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据。

防抖节流都是为了组织操作高频繁触发，从而浪费性能。

常用的React生命周期函数及其意义：constructor：组件实例化时调用的函数，用于初始化状态和绑定方法。componentDidMount：组件已经被渲染到DOM树上后调用的函数。通常在这个函数中进行异步请求、订阅事件或进行一些初始化操作。componentDidUpdate：组件更新后被调用的函数。可以在这个函数中根据新的props或state执行一些操作。

useReducer：用于在函数组件中使用Reducer逻辑处理复杂的状态。该Hook接收一个Reducer函数和初始状态，并返回一个包含当前状态值和触发状态更新的dispatch函数的数组。示例：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useCallback：用于在函数组件中缓存回调函数，防止函数重新创建。该Hook接收一个回调函数和依赖项数组，仅当依赖项变化时才创建新的回调函数。