Doc updates for React 16 + blog post (#10824)

* Doc updates for React 16 + blog post

* Add link to Sophie's post
This commit is contained in:
Andrew Clark
2017-09-26 09:04:14 -07:00
committed by GitHub
parent 4404015197
commit 0e43ef2682
9 changed files with 461 additions and 62 deletions

View File

@@ -91,9 +91,15 @@ render()
The `render()` method is required.
When called, it should examine `this.props` and `this.state` and return a single React element. This element can be either a representation of a native DOM component, such as `<div />`, or another composite component that you've defined yourself.
When called, it should examine `this.props` and `this.state` and return one of the following types:
You can also return `null` or `false` to indicate that you don't want anything rendered. When returning `null` or `false`, `ReactDOM.findDOMNode(this)` will return `null`.
- **React elements.** Typically created via JSX. A element can either be a representation of a native DOM component (`<div />`), or a user-defined composite component (`<MyComponent />`).
- **String and numbers.** These are rendered as text nodes in the DOM.
- **Portals**. Created with [`ReactDOM.createPortal`](/react/docs/portals.html).
- `null`. Renders nothing.
- **Booleans**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)
When returning `null` or `false`, `ReactDOM.findDOMNode(this)` will return `null`.
The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes components easier to think about.
@@ -101,6 +107,24 @@ The `render()` function should be pure, meaning that it does not modify componen
>
> `render()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
#### Fragments
You can also return multiple items from `render()` using an array:
```javascript
render() {
return [
<li key="A"/>First item</li>,
<li key="B"/>Second item</li>,
<li key="C"/>Third item</li>,
];
}
```
> Note:
>
> Don't forget to [add keys](https://facebook.github.io/react/docs/lists-and-keys.html#keys) to elements in a fragment to avoid the key warning.
* * *
### `constructor()`