• 技术文章 >web前端 >前端问答

    react怎么让子组件不渲染

    藏色散人藏色散人2023-01-05 09:29:17原创109

    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

    //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视频教程

    以上就是react怎么让子组件不渲染的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:组件 React
    上一篇:html流星雨代码怎么实现 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react怎么修改对象的属性值• react项目怎么改标题• react路由返回时不刷新怎么办• react启动无法访问怎么办• react native 怎么捕捉错误
    1/1

    PHP中文网