power-component v0.0.3

PowerComponent

优化react组件渲染

安装

npm i power-component --save

使用

import React from 'react'
import ReactDOM from 'react-dom'
import { UnPowerComponent } from 'some/component'
import { PowerComponent, withPower } from 'power-component'

const WithPowerComponent = withPower(UnPowerComponent)

class Index extends PowerComponent {
	render (){
		return (
			<div>
				<WithPowerComponent />
			</div>
		)
	}
}

说明

• PowerComponent

  重写了shouldComponentUpdate方法，对组件是否渲染进行了优化

  1. 对象类型属性进行了深度判断，精确判断是否更新（此处遍历最多10层，避免循环引用的情况）
  2. 对于函数类型属性，我们一般不会进行更改，但对于直接定义在render中的函数属性，每次都会触发更新，对于此种情况的更新进行了忽略
  3. 对比PureComponent，组件自动保存了最近一次的props和state（深度克隆），使用者即使直接修改state或者props（当然不建议直接修改），PowerComponent也可以正常更新

• withPower

  该方法可以对已创建的组件进行改造，支持上述特性，我们可以对第三方库提供的组件进行改造

  使用方法：const WithPowerComponent = withPower(UnPowerComponent)