四川住房城乡和城乡建设厅网站,济南优化官网公司,网站开发在线培训,网页主题参考PureComponent和Component都是React中的组件类#xff0c;但它们在实现细节和使用上有些差别。
Component是React中定义组件的基类#xff0c;它的shouldComponentUpdate方法默认返回true#xff0c;也就是说#xff0c;每次调用setState或forceUpdate方法都会引发组件重新…PureComponent和Component都是React中的组件类但它们在实现细节和使用上有些差别。
Component是React中定义组件的基类它的shouldComponentUpdate方法默认返回true也就是说每次调用setState或forceUpdate方法都会引发组件重新渲染。如果我们希望在一些情况下避免不必要的渲染例如props或state没有变化就需要在继承自Component的组件中手动实现shouldComponentUpdate方法来进行比较。
PureComponent则提供了一种基于浅比较的优化机制它默认实现了shouldComponentUpdate方法会自动对组件的props和state进行浅比较如果发现props或state没有发生变化则阻止组件的重新渲染提高性能。对于复杂的数据结构需要注意进行引用类型的比较避免误判。
底层处理机制 PureComponent与Component的区别在于对shouldComponentUpdate方法的处理。在React内部实现中当调用setState或forceUpdate方法时会触发更新过程有以下几个步骤 1.修改组件的state和props 2.调用组件的shouldComponentUpdate方法决定是否需要重新渲染组件 3.如果需要重新渲染组件React会根据虚拟DOM的增量更新算法计算出需要更新的节点并将变化应用到DOM上。 因此PureComponent与Component的区别在于第2步的处理机制。对于PureComponent会在默认实现的shouldComponentUpdate方法中自动进行浅比较props和state从而判断是否需要重新渲染组件而对于Component则需要手动实现shouldComponentUpdate方法来进行比较。
需要注意的是虽然PureComponent的默认实现可以避免一些不必要的渲染但它并不是完全自动化的也不能保证在所有情况下都能正确地避免不必要的渲染。在实际应用中还需要根据具体情况来选择合适的组件类来达到最佳的性能和开发效率。
理解浅比较 function isObject(obj) {return obj ! null typeof obj object;
}function shallowEqual(objA, objB) {if (Object.is(objA, objB)) {return true;}if (!isObject(objA) || !isObject(objB)) {return false;}const keysA Reflect.ownKeys(objA);const keysB Reflect.ownKeys(objB);if (keysA.length ! keysB.length) {return false;}for (let i 0; i keysA.length; i) {const key keysA[i];if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {return false;}}return true;
}
注意
1.这里为什么用Object.is,因为我们这里认为nan等于nan所以我们要用 这个方法 2.如果我们的浅比较无法导致更新那么我们可以通过this. forceUpdate(); //跳过默认加的shouldComponentUpdate, 直接更新
如果使用Component但是没有自己实现shouldComponentUpdate怎么办
如果没有自己实现shouldComponentUpdate方法Component会默认返回true也就是每次调用setState或者forceUpdate都会导致组件的重新渲染甚至在组件的props或state没有变化时也会重新渲染。
这在一些情况下可能会导致性能问题因此我们可以通过以下两种方式来优化组件的性能
手动实现shouldComponentUpdate方法对组件的属性进行比较避免不必要的重新渲染。例如在props或者state没有变化时返回false否则返回true。在比较属性时我们可以使用浅比较或者深比较来实现具体方法取决于属性的数据类型和结构。一般来说如果属性比较简单我们可以使用浅比较否则可以使用第二种方式。
使用React.memo高阶组件对组件进行包装将组件包装成具有浅比较优化功能的组件。React.memo的作用是对组件的props进行浅比较如果props没有变化则不会重新渲染组件。使用React.memo的方式非常简单只需要将组件作为React.memo的参数传入即可例如
import React, { memo } from react;const MyComponent ({ name, age }) {return (divspanName: {name}/spanspanAge: {age}/span/div);
};export default memo(MyComponent);
