memo的原理
语法:
React.memo(组件);
使用场景:当父组件重新渲染,没必要重新渲染的子组件可以使用memo
包起来。
function Child(props){
console.log('Child');
return (
<button>Child</button>
)
}
// memo:如果你想让一个函数组件有一个功能,如果属性不变,就不要刷新。
Child=React.memo(Child);
function App() {
let [name,setName]=React.useState('zhufeng');
return (
<div>
/* 在input框中输入内容,会走setName导致App组件重新渲染,但是子组件Child也会进行渲染。 */
/* 解决:子组件使用memo包起来 */
<input type="text" value={name} onChange={ev=>setName(ev.target.value)} />
<Child/>
</div>
)
}
memo的简单实现
function memo(OldComponent) {
return class extends React.PureComponent {
render() {
return <OldComponent {...this.props} />
}
}
}