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:
Joe Lencioni
2017-02-14 10:31:45 -08:00
parent 8cab89e792
commit 1841d2fb99

View File

@@ -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.