react-pure-check

react-pure-check

A util of react which would be used to judge whether one react component should be update , it aims to improve rendering performance

Install

	npm install react-pure-check --save-dev

How To Use

Types check

Types could help you to judge the type of a param .

And at this moment , we ONLY support these types , they are

'number'、'string'、'boolean'、'undefined'、'null'、'array'、

'function' 、'object' 、'date' .

BE REMEMBER , the lover letters would return for returns .

	import { Types } from "react-pure-check" ;
	
	Types(0) ; // number
	Types("abc") ; // string
	Types(function(){}) ; // "function"
	Types([]); // array
	Types({}) ; // object
	Types(new Date()); // date

WhetherEqual

WhetherEqual help you to compare two given data deeply ,

which contains type-checking and value-checking .

It should be used in REACT COMPONENT , when you want to judge

your this.state and nextSate in shouldComponent life part during rendering .

Yes , as you understand , It could help you to avoid useless rendering process

in your son components , improving your application's performance .

	import React , { Component } from "react" ;
	import { WhetherEqual } from "react-pure-check" ;

	export defalut class Test extends Component {
	
		constructor(){
			this.state = {
				list : [{a : 1} , {b : 2}]
			}
		}
		shouldComponent(nextProps , nextState){
			if(WhetherEqual(nextState , this.state)){
				return false ;
			}
			return true ;
		}
		handleClick(){
			this.setState({
				list : [{a : 1} , {b : 2}]
			});
		}
		render(){
			console.log("render") ;
			let {list = []} = this.state ;
			<div className="test">
				<button click={ this.handleClick }></button>
				{
					list && list.map((item , index) => {
						return <div key={`t-key-index-${index}`}>{ item } = { index }</div>
					})
				}
			</div>
		}
	}

As your known , when you trigger click event at your button component ,

even if you use setState , but your component would not render again ,

because you had offered the same data .

LINCESE

MIT