网站建设行业发展,鲜花商城网站设计,linux wordpress lnmp,怎么做抽奖网站1、说说React中setState和replaceState的区别#xff1f; 1、setState用于设置状态对象 2、两个参数#xff1a;nextState#xff0c;将要设置的新状态#xff0c;该状态会和当前的state合并#xff1b;callback#xff0c;可选参数#xff0c;回调函数。该函数会在setS…1、说说React中setState和replaceState的区别 1、setState用于设置状态对象 2、两个参数nextState将要设置的新状态该状态会和当前的state合并callback可选参数回调函数。该函数会在setState设置成功且组件重新渲染后调用。 3、合并nextState和当前state并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。 4、replaceState()方法与setState()类似但是方法只会保留nextState中状态原state不在nextState中的状态都会被删除 5、两个参数nextState将要设置的新状态该状态会替换当前的state。callback可选参数回调函数。该函数会在replaceState设置成功且组件重新渲染后调用。 setState 是修改其中的部分状态相当于 Object. assign只是覆盖不会减少原来的状态replaceState 是完全替换原来的状态相当于赋值将原来的 state 替换为另一个对象如果新状态属性减少那么 state 中就没有这个状态了。 2、说说react中onClick绑定后的工作原理 当组件元素绑定onClick事件之后 1、react会对事件先进行注册将事件统一注册到document上 2、根据组件唯一的表示key来对事件函数进行存储 3、统一的指定dispatchEvent回调函数 4、存储事件回调:react会将click这个事件统一存放在一个对象中回调函数中存储采用键值对的方式存储在对象中key是组件唯一标识idvalue对应的事件就是回调函数通过组件的key就能回到相对应的函数了。 3、useEffect的依赖为引用类型如何处理 1、使用 ‘use-deep-compare-effect’ 他可以进行深比较使用方法也很简单 import useDeepCompareEffect from ‘use-deep-compare-effect’ 之后用useDeepCompareEffect 替换掉 原有的 useEffect 即可。 2、也可以使用 useRef这个钩子来解决上述问题useRef的特性是跨渲染周期保存数据 3、用useRef保存了之前的数据 useEffect中的依赖以然为引用类型 每次obj发生改变都会调用执行函数但是执行函数中多了一个判断 prevObj是上一次渲染时obj的值 用prevObj中的某个key与此次obj中的某个key做对比满足条件后做其他操作 4、知道react里面的createPortal么说说其使用场景 1、Portal 将子节点渲染到存在于父组件以外的 DOM 节点。 2、ReactDOM.createPortal(child, container) 第一个参数child是任何可渲染的 React 子元素例如一个元素字符串或 fragment。第二个参数container是一个 DOM 元素。 2、Portals 适合脱离文档流(out of flow) 的组件特别是 position: absolute 与 position: fixed的组件。比如模态框通知警告goTop 等 5、shouldComponentUpdate有什么作用 1、根据 shouldComponentUpdate() 的返回值判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。 2、eact中props,state值的变化会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。 返回布尔值然后做 Virtual DOM 比较并得出是否需要做真实 DOM 更新 6、在使用redux过程中如何防止定义的action-type的常量重复 ES6引入了一种新的原始数据类型Symbol表示独一无二的值。 Symbol函数前不能使用new命令否则会报错。这是因为生成的Symbol是一个原始类型的值不是对象Symbol函数可以接受一个字符串作为参数表示对Symbol实例的描述主要是为了在控制台显示或者转为字符串时比较容易区分。 7、说说React中的虚拟dom在虚拟dom计算的时候diff和key之间有什么关系 1、实际上它只是一层对真实DOM的抽象以JavaScript对象VNode节点作为基础的树用对象的属性来描述节点最终可以通过一系列操作时这棵树映射到真实环境上创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中所以虚拟DOM对象的节点与真实DOM的属性一一照应 2、通过JS模拟网页文档节点生成JS对象树虚拟DOM然后再进行一步生成真实的DOM树再绘制到屏幕。如果后面有内容发生改变React会重新生成一棵全新的虚拟DOM树再与前面的虚拟DOM树进行比对diff把差异的部分打包成patch再应用到真实DOM然后渲染到屏幕浏览器。 在虚拟dom计算的时候diff和key之间有什么关系 1、React需要同时维护两棵虚拟DOM树一棵表示当前的DOM结构另一棵在React状态变更将要重新渲染时生成。React通过比较这两棵树的差异决定是否需要修改DOM结构以及如何修改。这种算法称作Diff算法。 2、key 当同一层级的某个节点添加了对于其他同级节点唯一的key属性当它在当前层级的位置发生了变化后。react diff算法通过新旧节点比较后如果发现了key值相同的新旧节点就会执行移动操作然后依然按原策略深入节点内部的差异对比更新而不会执行原策略的删除旧节点创建新节点的操作。这无疑大大提高了React性能和渲染效率。 8、React的props.children使用map函数来遍历会收到异常显示为什么应该 如何遍历 1、当前组件没有子节点数据类型就是undefined 2、有一个子节点数据类型就是object 。 3、有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法react资深提供了一个react.children.map()方法可以安全遍历子节点对象。 9、谈谈你对immutable.js的理解 1、Immutable.js就是react中用来做性能优化的 2、在react中使用immutable可以减少页面的一些不必要的渲染不需要像react中进行深度对比而进行渲染 3、immutable可以直接快速的进行对比完成渲染提升了渲染的效率降低了性能的消耗 4、Immutable不可改变的在计算机中即指一旦创建就不能再被更改的数据 对 Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象 Immutable 实现的原理是 Persistent Data Structure持久化数据结构: 1、用一种数据结构来保存数据 2、当数据被修改时会返回一个对象但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费
