16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
79 lines
1.7 KiB
Plaintext
79 lines
1.7 KiB
Plaintext
== Why is this an issue?
|
|
|
|
The following order represents what is commonly expected by ReactJS developers.
|
|
|
|
Not following this convention has no technical impact, but will reduce the class's readability because most developers are used to this standard order.
|
|
|
|
|
|
1. ``++static++`` methods
|
|
|
|
2. the ``++constructor++``
|
|
|
|
3. ``++getChildContext()++``
|
|
|
|
4. ``++componentWillMount()++``
|
|
|
|
5. ``++componentDidMount()++``
|
|
|
|
6. ``++componentWillReceiveProps()++``
|
|
|
|
7. ``++shouldComponentUpdate()++``
|
|
|
|
8. ``++componentWillUpdate()++``
|
|
|
|
9. ``++componentDidUpdate()++``
|
|
|
|
10. ``++componentWillUnmount()++``
|
|
|
|
11. clickHandlers or eventHandlers such as ``++onClickSubmit()++`` or ``++onChangeDescription()++``
|
|
|
|
12. getter methods for render such as ``++getSelectReason()++`` or ``++getFooterContent()++``
|
|
|
|
13. optional render methods such as ``++renderNavigation()++`` or ``++renderProfilePicture()++``
|
|
|
|
14. ``++render()++``
|
|
|
|
|
|
=== Noncompliant code example
|
|
|
|
[source,javascript]
|
|
----
|
|
export default class MyApp extends React.PureComponent {
|
|
|
|
render() { // Noncompliant
|
|
}
|
|
...
|
|
componentDidMount() {
|
|
}
|
|
}
|
|
----
|
|
|
|
|
|
=== Compliant solution
|
|
|
|
[source,javascript]
|
|
----
|
|
export default class MyApp extends React.PureComponent {
|
|
|
|
componentDidMount() {
|
|
}
|
|
...
|
|
render() {
|
|
}
|
|
}
|
|
----
|
|
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
=== on 7 Feb 2018, 12:53:52 Alexandre Gigleux wrote:
|
|
Reference: \https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0
|
|
|
|
=== on 23 Feb 2018, 11:41:04 Alexandre Gigleux wrote:
|
|
This rule is covered by ESLint for React: \https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/sort-comp.md (react/sort-comp)
|
|
|
|
endif::env-github,rspecator-view[]
|