标签：reflow 样式 元素 react 改变 代码优化 class 属性

react 代码优化千次阅读 2018-08-19 19:33:37

1.减少setstate：setstate会增加render的次数，从而影响性能。如果涉及到与视图层无关的属性，直接当做class实例的属性，而不是state的状态。这样改变这个属性不会造成页面重新的渲染。

小结：render需要用到的属性放在state和props中。

2.浏览器的repaint和reflow会影响到性能。回流一定是重绘，重绘不一定是回流 重绘（repaint）：对元素的背景颜色，字体样式样式进行设置，如：font-weight、color、background-color. 回流（reflow）：因为元素的尺寸，布局，隐藏等改变而需要重新对其进行构建的操作（重构页面）。

包括： 1、对font-size,margin,padding 等可以改变宽高和布局的style属性（尺寸、内容、距离）的改变。 2、添加、删除（可见元素）的dom操作。 3、用户操作 改变浏览器窗口大小或是字体等 4、对offset**** 、scroll***、client***、width/height的改变（***=Top/Left/Width/Height）

减少repaint和reflow方法: 1、想要改变元素样式，通过改变元素的 class 名 (尽可能在 DOM 树的最末端改变class) 2、避免设置多项内联样式，因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。 3、在操作offset**** 、scroll***、client***、width/height等属性时，先用变量先进行存储，之后进行操作。

class App extends Component {
    record = false
    onm ouseDown = () => {
        this.record = true;
        }
    onm ouseUp = () => {
        this.record = false;
        }
    render() {
        return (
            <div>
            	<button onm ouseDown={this.onMouseDown} onm ouseUp={this.onMouseUp} />
            <div/>);
    }
}

 

 

标签：reflow,样式,元素,react,改变,代码优化,class,属性
来源： https://www.cnblogs.com/sexintercourse/p/16538721.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。