因为其中考虑考虑到render不可能每次数据一变就去生成新的dom树,所以分节点更新就出现了,解决方法是:
使用react给我们提供的生命周期方法shouldComponentUpdate(SCU) 这个方法来调取render函数的,react在每个class上面都继承了这个方法,很大的优化了整个程序的流程。
同时react也提出来高级组件memo,当使用memo组件的时候可以使用在props 没有变化时不重新渲染,提高性能
import React, { memo } from 'react';
// 普通的函数式组件
const MyComponent = ({ name }) => {
console.log('Component render');
return <div>Hello, {name}!</div>;
}
// 使用 memo 包裹函数式组件
const MemoizedComponent = memo(MyComponent);
// 父组件
const ParentComponent = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<MemoizedComponent name="Alice" />
</div>
);
}