• 机构投资者应合理审慎报价 2019-07-16
  • “2018上影之夜”姜文等为“谢晋经典电影回顾展”揭幕 2019-07-10
  • 交大钱学森学院举行毕业典礼 14毕业生赴世界排名前百大学读研 2019-07-10
  • 西安市:构建“五方联动”社会治理新格局 2019-06-23
  • IP定向--云南频道--人民网 2019-06-23
  • 育儿十大坎 新手妈妈快快get起来 2019-06-21
  • 吉林:让更多农村孩子参加少年宫活动 2019-06-21
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 频道栏目
    神奇公式秒杀全国11选5 > 程序开发 > web前端 > HTML/CSS > 正文
    React优化子组件render-个人文章-SegmentFault思否
    2019-05-11 22:05:10           
    收藏   我要投稿

    在react中,父组件的重新render会引发子组件的重新render,但是一些情况下我们会觉得这样做有些多余,比如:

    父组件并未传递props给子组件 新传递的props渲染结果不变
    class A extends React.Component {
        render() {
            console.log('render')
            return <p>这是A组件</p>
        }
    }
    
    class Main extends React.Component {
        render() {
            return (
                <p>
                    // 点击button会让A不断调用render
                    <button onClick={() => this.setState({ a: 1 })}>Main</button>
                    <A />
                </p>
            )
        }
    }

    为了解决这个问题,需要分为ES6类组件和函数式组件两种:

    类组件

    神奇公式秒杀全国11选5 www.2zfa.com 使用shouldComponentUpdate来对props和state进行判断以此决定是否进行render

    class A extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            //两次props对比
            return nextProps.a === this.props.a ? false : true
        }
        render() {
            console.log('render')
            return <p>这是A组件</p>
        }
    }
    
    class Main extends React.Component {
        // ...
        render() {
            return (
                <p>
                    <button onClick={() => this.setState({ a: 1 })}>Main</button>
                    <A a={this.state.a} />
                </p>
            )
        }
    }

    通过返回false来跳过这次更新

    使用React.PureComponent,它与React.Component区别在于它已经内置了shouldComponentUpdate来对props和state进行浅对比,并跳过更新

    //PureComponent
    class A extends React.PureComponent {
        render() {
            console.log('render')
            return <p>这是A组件</p>
        }
    }
    
    class Main extends React.Component {
        state = {
            a: 1
        }
        render() {
            return (
                <p>
                    <button onClick={() => this.setState({ a: 1 })}>Main</button>
                    <A a={this.state.a} />
                </p>
            )
        }
    }

    函数组件

    使用高阶组件React.memo来包裹函数式组件,它和类组件的PureComponent类似,也是对对props进行浅比较决定是否更新

    const A = props => {
        console.log('render A')
        return <p>这是A组件</p>
    }
    // React.memo包裹A
    const B = React.memo(A)
    
    const Main = props => {
        const [a, setA] = useState(1)
        console.log('render Main')
    
        return (
            <p>
                // 通过setA(a + 1)让父组件重新render
                <button onClick={() => setA(a + 1)}>Main</button>
                // 一直传入相同的props不会让子组件重新render
                <B a={1} />
            </p>
        )
    }

    它的第二个参数接受一个两次props作为参数的函数,返回true则禁止子组件更新

    其他

    上面提到的浅比较就是根据内存地址判断是否相同:

    // extends React.Component
    class A extends React.Component {
        render() {
            console.log('render A')
            console.log(this.props)
            return <p>这是组件A</p>
        }
    }
    
    class Main extends React.Component {
        test = [1, 2, 3]
        render() {
            console.log('render Main')
            return (
                <p>
                    <button
                        onClick={() => {
                            // 父组件render
                            this.setState({})
                            this.test.push(4)
                        }}
                    >
                        Main
                    </button>
                    <A test={this.test} />
                </p>
            )
        }
    }

    结果是:
    使用React.component:
    使用React.component
    使用React.PureComponent:
    使用React.PureComponent

    使用React.component,点击之后子组件重新render。改为React.PureComponent之后,点击button子组件并不会render。也因此,PureComponent根据前后内存地址判断是否相等,所以向子组件传递函数作为props时,使用内联箭头函数的形式将会导致子组件的重新render;所以可以用箭头函数作为成员变量的形式再将函数引用作为props传递。

    点击复制链接 与好友分享!回本站首页
    相关TAG标签
    上一篇:【前端刷题笔记02】字节跳动2019面试题-一只想做全栈的猫-SegmentFault思否
    下一篇:积梦前端的路由方案ruled-router-题叶-SegmentFault思否
    相关文章
    图文推荐
    点击排行

    关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 神奇公式秒杀全国11选5

    版权所有: 神奇公式秒杀全国11选5--致力于做实用的IT技术学习网站

  • 机构投资者应合理审慎报价 2019-07-16
  • “2018上影之夜”姜文等为“谢晋经典电影回顾展”揭幕 2019-07-10
  • 交大钱学森学院举行毕业典礼 14毕业生赴世界排名前百大学读研 2019-07-10
  • 西安市:构建“五方联动”社会治理新格局 2019-06-23
  • IP定向--云南频道--人民网 2019-06-23
  • 育儿十大坎 新手妈妈快快get起来 2019-06-21
  • 吉林:让更多农村孩子参加少年宫活动 2019-06-21
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 彩票走势图咋看 上海时时彩开奖号码 冰球滑行如何蹬冰 六合彩历史记录 网络双色球彩票投注 2019南粤36选7开奖结果 福彩幸运武林直播 极速快3历史开奖结果 香港赛马会心水论坛 四川时时彩走势图开奖 五子棋25连消布局 快乐12中奖概率 足彩红人馆 华龙区有彩票中心吗 老虎机大乐透游戏