react让子组件不渲染的方法：1、通过“shouldcomponentupdate(nextprops,nextstate){...}”实现父组件渲染，子组件不渲染；2、通过“purecomponent”方式让子组件不渲染；3、引入memo，用memo把hooks包裹即可。
本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react怎么让子组件不渲染？
react 父组件重新渲染，子组件不需要渲染的三种性能优化方式(purecomponent,memo,shouldcomponentupdate);
//使用react普通函数时，可以使用两种优化方式，purecomponent和shouldcomponentupdate
//shouldcomponentupdate
//shouldcomponentupdateclass 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
//引入purecomponentimport 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
//引入memoimport 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视频教程》
以上就是react怎么让子组件不渲染的详细内容。