https://github.com/steamerjs/pure-render-deepcompare-decorator

https://github.com/steamerjs/pure-render-deepcompare-decorator

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/steamerjs/pure-render-deepcompare-decorator
• Owner: steamerjs
• Created: 2016-05-29T16:15:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-10T09:20:17.000Z (almost 8 years ago)
• Last Synced: 2024-10-31T18:56:52.965Z (about 2 months ago)
• Language: JavaScript
• Size: 271 KB
• Stars: 30
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
## pure-render-deepCompare-decorator

compare props and state automatically

### Install

```

$ npm install pure-render-deepcompare-decorator --save

```

### Usage

If you don't care the data in `shouldComponentUpdate`, you can just use the decorator way. But you have to install `babel-plugin-transform-decorators-legacy` plugin for compilation.

```js

import pureRender from "pure-render-deepcompare-decorator";

@pureRender

class List extends Component {

	constructor(props, context) {

		super(props, context);

	}

	render() {

		return (

			


		);

	}

}


```

If you need to modify logic in `shouldComponentUpdate`, you can use it like this:

```js

import { deepCompare } from "pure-render-deepcompare-decorator";

class List extends Component {

	constructor(props, context) {

		super(props, context);

	}

	shouldComponentUpdate(nextProps, nextState) {

		// some logic

		var shouldUpdate = /* some logic */

		return deepCompare(this, nextProps, nextState) && shouldUpdate;

	}

	render() {

		return (

			


		);

	}

}


```

### Immutable Version

* [pure-render-immutable-decorator](https://github.com/SteamerTeam/pure-render-immutable-decorator)