react如何让子组件不渲染

//shouldComponentUpdate
classFooextendsComponent{
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count===this.props.count){//传入的count与组件当前props的count比较,count没改变，returnfalse，不渲染
returnfalse//不渲染
}
returntrue;//渲染
}
render(){
console.log("组件渲染");//可以看到，当父组件的name改变时，子组件不会打印，只有count改变，才会打印，优化性能
returnnull
}
}

classAppextendsComponent{
state={
count:0,
name:0
}
render(){
return(


{this.setState(()=>({count:this.state.count+1}))}}>加count
{this.setState(()=>({name:this.state.count+1}))}}>加name


)
}
}

//引入PureComponent
importReact,{Component,Fragment,PureComponent}from'react';
//PureComponent，自动比较组件数据是否改变，注意只能比较一层，比如一个对象，对象中的属性改变，他不会重新渲染，只有对象改变，才重新渲染。
classFooextendsPureComponent{
render(){
console.log("组件渲染");
returnnull
}
}

classAppextendsComponent{
state={
count:0,
name:0
}
render(){
return(


{this.setState(()=>({count:this.state.count+1}))}}>加count
{this.setState(()=>({name:this.state.count+1}))}}>加name


)
}
}

//引入memo
importReact,{Co免费云主机、域名mponent,Fragment,memo}from'react';
//用memo把hooks包裹即可
constFoo=memo(functionFoo(props){
console.log("组件渲染");
return
count:{props.count}
})

classAppextendsComponent{
state={
count:0,
name:0
}
render(){
return(


{this.setState(()=>({count:this.state.count+1}))}}>加count
{this.setState(()=>({name:this.state.count+1}))}}>加name


)
}
}