Merge pull request #2335 from jryans/react-style-guide

Update React guide in code style
This commit is contained in:
Matthew Hodgson 2018-12-06 23:12:30 +00:00 committed by GitHub
commit 245c839962
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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