69 lines
1.3 KiB
Plaintext
69 lines
1.3 KiB
Plaintext
|
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
|
||
|
|
|
||
|
|
----
|
||
|
|
export default class MyApp extends React.PureComponent {
|
||
|
|
|
||
|
|
render() { // Noncompliant
|
||
|
|
}
|
||
|
|
...
|
||
|
|
componentDidMount() {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
----
|
||
|
|
|
||
|
|
|
||
|
|
== Compliant Solution
|
||
|
|
|
||
|
|
----
|
||
|
|
export default class MyApp extends React.PureComponent {
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
}
|
||
|
|
...
|
||
|
|
render() {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
----
|
||
|
|
|
||
|
|
|
||
|
|
ifdef::env-github,rspecator-view[]
|
||
|
|
== Comments And Links
|
||
|
|
(visible only on this page)
|
||
|
|
|
||
|
|
include::comments-and-links.adoc[]
|
||
|
|
endif::env-github,rspecator-view[]
|