react怎么让子组件不渲染
短信预约 -IT技能 免费直播动态提醒
本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react怎么让子组件不渲染？
React 父组件重新渲染，子组件不需要渲染的三种性能优化方式(PureComponent,memo,shouldComponentUpdate);
//使用React普通函数时，可以使用两种优化方式，PureComponent和shouldComponentUpdate
//shouldComponentUpdate
//shouldComponentUpdate
class Foo extends Component {
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count===this.props.count){ //传入的count与组件当前props的count比较,count没改变，return false，不渲染
return false //不渲染
}
return true; //渲染
}
render() {
console.log("组件渲染"); //可以看到，当父组件的name改变时，子组件不会打印，只有count改变，才会打印，优化性能
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}//PureComponent
//引入PureComponent
import React, { Component, Fragment, PureComponent} from 'react';
//PureComponent，自动比较组件数据是否改变，注意只能比较一层，比如一个对象，对象中的属性改变，他不会重新渲染，只有对象改变，才重新渲染。
class Foo extends PureComponent {
render() {
console.log("组件渲染");
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}//hooks 独有优化方式memo
//引入memo
import React, { Component, Fragment, memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
console.log("组件渲染");
return <div>count:{props.count}</div>
})
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}以上就是react怎么让子组件不渲染的详细内容，更多请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
