React组件性能优化

KaltZK 发布于2019-08-20 18:31 / 982人阅读

摘要：纯函数是组件开发中一个重要的概念中的指的就是组件满足纯函数的条件即组件的渲染是被相同的和渲染进而得到相同的结果插件其原理为重新实现了生命周期方法让当前传入的和与之前的作浅比较如果返回那么组件就不会执行方法这里讲到了用来做性能优化的方

纯函数

1.PureRender是React组件开发中一个重要的概念,PureRender中的Pure指的就是组件满足纯函数的条件,
即组件的渲染是被相同的props和state渲染进而得到相同的结果.
2.react-addons-pure-render-mixin插件,其原理为重新实现了shouldComponentUpdate生命周期方法,
让当前传入的props和state与之前的作浅比较,如果返回false,那么组件就不会执行render方法.
这里讲到了用shouldComponentUpdate来做性能优化的方法,在理想情况下,不考虑props和state的类型,
那么要做到充分比较,只能通过深比较,但它实在是太昂贵了.
然后PureRender对object只做了引用比较,并没有做值比较.

shallowEqual(obj, newObj) {
    if (obj === newObj) {
        return true;
    }

    const objKeys = Object.keys(obj);
    const newObjKeys = Object.keys(newObj);

    if (objKeys.length !== newObjKeys.length) {
        return false;
    }

    // 关键代码,
}

shouldComponentUpdate(props, state) {
    console.log(props);
    console.log(state);

    if (state.a === 3) {
        return false;
    }

    return true;
}

key

1.写动态子组件的时候,如果没有给动态子项添加key prop,则会报一个警告.
这个警告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有一个唯一的key prop.
key用来标识当前项的唯一性的props.
如过key={ index },把key设成了序号,这么做的确不会报警了,但这是非常低效的做法.
我们在生产环境下常常犯这样的错误,这个key是每次用来做Virtual DOM diff的,每一位同学都用序号
来更新的问题是它没有和同学的唯一信息相匹配,相当于用了一个随机键,那么无论有没有相同的项,
更新都会被渲染.
因此,对key有一个原则,那就是独一无二,且能不用遍历或随机值就不用,除非列表内容也并不是唯一的表示,
且没有可以相匹配的属性.

class Collections extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1,
            array: [{
                sid: "1",
                name: "aaa"
            }, {
                sid: "2",
                name: "bbb"
            }, {
                sid: "3",
                name: "ccc"
            }]
        }
    }

    render() {
        return (
            
            {
                this.state.array.map((item, index) => {
                    return (
                        { item.name }
                    )
                })
            }
            
        );
    }
}

混合云 idc机房托管性能优化优化系统性能网站性能优化页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84619.html

4、React组件之性能优化

摘要：组件的性能优化高德纳我们应该忘记忽略很小的性能优化，可以说的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外的代码。对多个组件的性能优化当一个组件被装载更新和卸载时，组件的一序列生命周期函数会被调用。 React组件的性能优化高德纳: 我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。...

陈伟 2019-08-22 15:01 评论0 收藏0
React-Redux性能优化

摘要：但是和一起使用还需要一个工具，这一篇就说一下在使用上的一些性能优化建议。如果的改变会引起值变化，那么会调用转换函数，传入作为参数，并返回结果。如果的值和前一次的一样，它将会直接返回前一次计算的数据，而不会再调用一次转换函数。前面写了两篇文章《React组件性能优化》《Redux性能优化》，分别针对React和Redux在使用上的性能优化给了一些建议。但是React和Redux一起使用...

JouyPub 2019-08-21 10:57 评论0 收藏0
使用React.memo()来优化函数组件的性能

摘要：函数组件上面我们探讨了如何使用和的方法优化类组件的性能。它的作用和类似，是用来控制函数组件的重新渲染的。其实就是函数组件的。原文链接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 译者: 进击的大葱推荐理由: 本文讲述了开发React应用时如...

BetaRabbit 2019-08-23 16:04 评论0 收藏0
React组件性能优化

摘要：如果组件是纯函数的，就是给组件相同的和组件就会展现同样的，可以使用这个来优化组件的性能。仅用于拥有简单和的组件。虽然提供简单的来提升性能，但是如果有更特殊的需求时怎么办如果组件有复杂的和怎么办这个时候就可使用来进行更加定制化的性能优化。 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层；它使用虚拟DOM技术，以保证它UI的高速渲染；它使用单向数据...

oysun 2019-08-21 10:56 评论0 收藏0
个人常用JavaScript及React常用优化总结

摘要：插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合，它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作，有时是会产生视觉变化...

yuanxin 2019-08-20 15:07 评论0 收藏0
React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

摘要：但是强迫症犯了，为了使得性能达到极致，再次进行了深度的优化。把移动中心设置在物体的重力中心，最为舒适。你可以狠狠的点击预览地址到此，组件，无论从性能，还是手感上来说，都已经相当的符合我们的需求了。仓库地址：Dragact手感丝滑的拖拽布局组件预览地址：支持手机端噢～上回我们说到，Dragact组件已经进行了一系列的性能优化，然而面对大量数据的时候，依旧比较吃力，让我们来看看，优化...

fizz 2019-08-01 18:39 评论0 收藏0