mirror of
https://github.com/airbnb/javascript.git
synced 2026-04-25 03:00:19 -04:00
Add guidance around not using mixins
Mixins will hopefully be removed from React eventually. In the meantime, we can avoid the damage they cause by not using them. Most of this was borrowed from @gaearon's blog post "Mixins Considered Harmful". https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
This commit is contained in:
@@ -28,7 +28,7 @@
|
||||
|
||||
## Class vs `React.createClass` vs stateless
|
||||
|
||||
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
|
||||
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -69,6 +69,12 @@
|
||||
}
|
||||
```
|
||||
|
||||
## Mixins
|
||||
|
||||
- [Do not use mixins](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html).
|
||||
|
||||
> Why? Mixins introduce implicit dependencies, cause name clashes, and cause snowballing complexity. Most use cases for mixins can be accomplished in better ways via components, higher-order components, or utility modules.
|
||||
|
||||
## Naming
|
||||
|
||||
- **Extensions**: Use `.jsx` extension for React components.
|
||||
|
||||
Reference in New Issue
Block a user