Update React guide in code style
This updates React guidance to prefer JS classes and adds additional info about how to handle specific situations when using them. Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
parent
31b7a0ddcb
commit
757181c322
1 changed files with 30 additions and 4 deletions
|
@ -165,7 +165,6 @@ ECMAScript
|
|||
|
||||
React
|
||||
-----
|
||||
- Use React.createClass rather than ES6 classes for components, as the boilerplate is way too heavy on ES6 currently. ES7 might improve it.
|
||||
- Pull out functions in props to the class, generally as specific event handlers:
|
||||
|
||||
```jsx
|
||||
|
@ -174,11 +173,38 @@ React
|
|||
<Foo onClick={this.doStuff}> // Better
|
||||
<Foo onClick={this.onFooClick}> // Best, if onFooClick would do anything other than directly calling doStuff
|
||||
```
|
||||
|
||||
Not doing so is acceptable in a single case; in function-refs:
|
||||
|
||||
|
||||
Not doing so is acceptable in a single case: in function-refs:
|
||||
|
||||
```jsx
|
||||
<Foo ref={(self) => this.component = self}>
|
||||
```
|
||||
|
||||
- Prefer classes that extend `React.Component` (or `React.PureComponent`) instead of `React.createClass`
|
||||
- You can avoid the need to bind handler functions by using [property initializers](https://reactjs.org/docs/react-component.html#constructor):
|
||||
|
||||
```js
|
||||
class Widget extends React.Component
|
||||
onFooClick = () => {
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
- To define `propTypes`, use a static property:
|
||||
```js
|
||||
class Widget extends React.Component
|
||||
static propTypes = {
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
- If you need to specify initial component state, [assign it](https://reactjs.org/docs/react-component.html#constructor) to `this.state` in the constructor:
|
||||
```js
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// Don't call this.setState() here!
|
||||
this.state = { counter: 0 };
|
||||
}
|
||||
```
|
||||
- Think about whether your component really needs state: are you duplicating
|
||||
information in component state that could be derived from the model?
|
||||
|
|
Loading…
Reference in a new issue