react 相关优化

  • Z时代
  • 2024-01-10
  • 分类：综合

react

① 在声明时一起绑定：

<div onClick={this.OnClick.bind(this)}></div>

② 使用函数式声明事件：

<div onClick={()=>this.OnClick()}></div>

③ 在按钮内声明，在constructor内绑定：

constructor(props) {
     super(props);
     this.OnClick = this.OnClick.bind(this)
}
render(){
    return(
        <div onClick={this.OnClick}></div>
    )
}

结论 三者对性能优化的优先级为③＞②＞① 

比较：①②相对于③，再次执行时都要再渲染一编render()里的bind函数和函数声明式，

　　　而③的绑定函数只执行一次，并不会每次执行时都进行调用，

　　　对于性能方面，显然③方式会比①②更好，而且②相对①对性能的影响会低一点。

二、关于组件传值

① 传值的时候定义对象： 

render() {
        return (<div >
            <Demo name={{ age: 18 }} />
        </div>);
    }

② 传值前定义好对象：

let name={ age: 18 }    
   render() {
        return (<div >
            <Demo name={name} />
        </div>);
    }

结论  两者对性能优化的优先级为②＞① 

　　在父组件向子组件传值时 对象的key和value 在render内先定义在使用 不然每次子组件都会生成新的对象传递;

　  传递props/state时 只需传递需要的参数  大量传值时考虑是否需要引用redux;

三、关于多组件优化

父组件因状态的变化更改，而子组件并没有状态变化时，若子组件随着父组件一起更新，会造成比较大的性能浪费

 ① shouldComponentUpdate(nextProps, nextState)   (可以看周期详细介绍:https://www.cnblogs.com/chen-yi-yi/p/13542476.html)

 ② React.PureComponent 替换 React.Component

​    这比自己写shouldComponentUpdate函数进行比较来的简单且性能更好，但只适用于组件只根据传进来的数据进行渲染而没有内部状态时使用，可以最大限度的提升性能。

 ③ ImmutableJS：()    (Immutable.js 采用了持久化数据结构和结构共享，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，且通过结构共享等方式大幅提高性能。https://github.com/immutable-js/immutable-js)

四、关于神奇的Key

　　对于数组形式的数据，遍历时React会要求你为每一个数据值添加Key,而Key必须时独一无二的，

　　在选取Key值时尽量不要用索引，因为如果当数据的添加方式不是顺序添加，而是以其他方式（逆序，随机等），会导致每一次添加数据，每一个数据值的索引都不一样，

　　这就导致了Key的变化，而当Key变化时，React就会认为这与之前的数据值不相同，会多次执行渲染，会造成大量的性能浪费。所以jin量不要使用将数据的Key设为索引。

以上是 react 相关优化 的全部内容， 来源链接： utcz.com/z/383196.html

回到顶部