qq_52563729的博客

封装

【代码】react-redux。

Redux提供的模式和工具使您更容易理解应用程序中的状态何时、何地、为什么以及如何更新，以及当这些更改发生时，您的应用程序逻辑将如何表现!React-Redux：官方库，让React组件与Redux有了交互，可以从store读取些state，可以通过dispatch actions来更新store!index.jsx的后代组件，基于上下文方案，获取在上下文中存储的store就可以。为了在各个组件中，都可以把创建的store获取到，我们可以基于上下文的方。浅拷贝，每次都是第一次产生的那个闭包！

新组件有时被称为包装组件，它可以在原始组件的基础上添加一些新的逻辑或功能，从而增强原始组件的能力，实现代码的复用和可拓展性。柯里化函数（Currying Function）是指将一个接受多个参数的函数转化成一系列只接受单个参数的函数，并且返回接受单个参数的函数，达到简化函数调用和提高可读性的目的。简单来说，柯里化即将接收多个参数的函数转换成为接收单个参数的函数，并返回一个新的函数，新函数可以在后续的调用中继续接收参数，直到参数全部传递完成后返回最终的结果。函数返回一个函数，这个函数只接受一个参数。

需要注意的是，CSS Modules 和 CSS in JS 都是比较新的技术，需要在开发中谨慎使用。以 CSS Modules 的形式使用 css-loader 和 style-loader，css-loader 负责处理样式表，并使用唯一的类名代替类名，避免直接暴露类名。CSS in JS：通过使用一些 CSS in JS 的库，如 styled-components、emotion 等，可以将组件的样式直接写入组件代码中，从而避免类名冲突的问题。因此，可以避免类名问题，并且具有更好的动态控制能力。

当点击支持/反对的时候，把祖先放在上下文中，用来修改状态的方法执行，这样就可以修改祖先组件的状态!祖先组件更新:会把最新的状态信息，重新放在上下文中!后代组件也会跟着更新，从而获取最新的上下文信息进行绑定!二.基于上下文方案实现祖先和后代的传递。

在函数组件中，React 在内部使用钩子函数来管理组件状态和生命周期，而在类组件中则使用生命周期方法来实现这些功能。通常情况下，使用 Ref 可以获取某个组件的实例或者 DOM 元素，但是如果要只暴露组件的部分实例或者方法，或者对 Ref 进行值转换，就可以使用。** 6.函数子组件内部，可以有自己的状态和方法了﹔如何实现∶基于forwardRef实现ref转发的同时，获取函数子组件内部的状态或者方法呢?属性，我们可以在函数式组件中使用它来保存任何可变值，包括 DOM 元素或组件实例的引用。

多！！！

累

移动端的click是单击事件，单击事件:第一次点击后，监测300ms, 看是否有第二次点击操作，如果有就是单击，如果有就是双击。函数中，我们计算了当前的触摸坐标和起始坐标之间的位移，并判断是否在一定的范围内，以确定当前的触摸事件是否有效。单手指事件模型: touch模拟！事件，并在其中记录下当前的时间戳timestamp2和离开的坐标coordinate2。函数中，我们记录了当前触摸事件的时间戳和坐标，用来在后续计算双击事件是否有效。变量来记录上一次的触摸事件的时间戳，以判断当前的触摸事件是否为双击事件。

猛的1p

如果你在网络请求代码块中使用对象方式更新状态，那么在请求还没有返回前，React 会将多个状态更新操作合并成一个更新操作，这可能会导致页面显示不正确或者渲染出错的问题。这就好比是在对象方式更新状态时，由于每次更新操作都会合并状态，所以在异步操作中可能会产生干扰，导致最终更新的状态并不是预期的状态。在更新 lastTick 和 total 状态时，我们使用了函数方式，并且将计算 total 的逻辑也放到了函数中，以确保只更新 lastTick，不影响 count 的更新，不会出现状态合并的问题。

ref

的默认实现可以避免一些不必要的渲染，但它并不是完全自动化的，也不能保证在所有情况下都能正确地避免不必要的渲染。在比较属性时，我们可以使用浅比较或者深比较来实现，具体方法取决于属性的数据类型和结构。3.如果需要重新渲染组件，React会根据虚拟DOM的增量更新算法计算出需要更新的节点，并将变化应用到DOM上。没有发生变化，则阻止组件的重新渲染，提高性能。高阶组件对组件进行包装，将组件包装成具有浅比较优化功能的组件。方法，对组件的属性进行比较，避免不必要的重新渲染。都会导致组件的重新渲染，甚至在组件的。

类组件

作用：和属性一样，让组件具备更强的复用性，传递数据值用属性，传递HTML结构用插槽。插槽必须用双闭合调用，传过去的数据都在children。在index.js中!

作用：父组件(index.jsx)调用子组件(DemoOne.jsx)的时候，可以基于属性，把不同的信息传递给子组件；子组件接收相应的属性值，呈现出不同的效果，让组件的复用性更强！传递进来的属性，首先会经历规则的校验，不管校验成功还是失败，最后都会把属性给形参props，只不过如果不符合设定的规则，控制台会抛出警告错误{不影响属性值的获取}！被冻结的对象，即是不可扩展的，也是密封的！同理，被密封的对象，也是不可扩展的！被密封的对象：可以修改成员的值，但也不能删、不能新增、不能劫持！属性props的处理。

它首先会根据虚拟 DOM 中的 type 属性创建一个对应的 HTML 元素，然后根据虚拟 DOM 中的 props 属性设置元素的属性和子元素，最后将该元素插入到指定的 container 容器中。虚拟DON对象∶框架自己内部构建的一套对象体系（对象的相关成员都是React内部规定的)，基于这些属性描述出，我们所构建视图中的，DOM节点的相关特征!不对，1.数组对象可以渲染，2.style的行内样式属性可以渲染，3.可以直接通过createElement来渲染！多闭合调用可以传入其他标签！

几个简单的需求

第一篇