https://github.com/nadimtuhin/react-pure-component

React es6, es7 pure component without purerender mixin
https://github.com/nadimtuhin/react-pure-component

Last synced: 25 days ago
JSON representation

React es6, es7 pure component without purerender mixin

• Host: GitHub
• URL: https://github.com/nadimtuhin/react-pure-component
• Owner: nadimtuhin
• Created: 2015-12-03T01:36:39.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-04T12:15:22.000Z (over 7 years ago)
• Last Synced: 2024-10-03T23:06:04.133Z (about 1 month ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 13
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Pure Component

Mixins are no longer usable in es6, es7 land. So we can not use pure render mixin in classes. Higher Order Components can help us mitigate this problem.

- [Mixins are dead]( https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)

- [React Mixins are on their way out](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins)

> Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.

> There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn’t help that effort.

- [Composition to the rescue](https://github.com/facebook/react/issues/1380#issue-31121026)

> To be clear, mixins is an escape hatch to work around reusability limitations in the system. It’s not idiomatic React. Making composition easier is a higher priority than making arbitrary mixins work. I’ll focus on making composition easier so we can get rid of mixins.

## Installation

```bash

npm i react.pure.component --save

```

### es7

```js

import {Component} from 'react';

import PureComponent from 'react.pure.component';

@PureComponent

class App extends Component {

  render() {

    return (

      
 Hello Pure World 

    );

  }

}


export default App;

```

### es6

```js

import {Component} from 'react';

import PureComponent from 'react.pure.component';

class App extends Component {

  render() {

    return (

      
 Hello Pure World 

    );

  }

}


export default PureComponent(App);

```

### es5

```js

const React = require('react');

import PureComponent from 'react.pure.component';

const App = React.createClass({

  render() {

    return (

      
 Hello Pure World 

    );

  }

})


module.exports = PureComponent(App);

```