Minor edits in response to PR feedback

This commit is contained in:
Brian Vaughn
2018-02-06 11:08:37 -08:00
parent a55480bc8e
commit 935d2a104b
2 changed files with 10 additions and 5 deletions

View File

@@ -3,7 +3,7 @@ title: "React v16.3.0: New lifecycles and context"
author: [bvaughn]
---
This release includes a new class component lifecycle (`getDerivedStateFromProps`), a new `StrictMode` component, an official context API, and a better way for managing refs!
This release includes a new class component lifecycle (`getDerivedStateFromProps`), a new `StrictMode` component, an official context API, and a new ergonomic ref API!
For the past few months, the React team has been working on support for [asynchronous rendering](#). We are excited about the new features this will enable, and we've learned that some changes will be required to the way we write React components.
@@ -24,6 +24,12 @@ Previously, React provided two ways for managing refs: the legacy string ref API
Version 16.3 adds a new option for managing refs that offers the convenience of a string ref without any of the downsides:
`embed:16-3-release-blog-create-ref.js`
> **Note:**
>
> Callback refs will continue to be supported in addition to the new `createRef` API.
>
> You don't need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature.
[Learn more about the new `createRef` API here.](#)
## Component Lifecycle Changes
@@ -50,7 +56,6 @@ We are also adding a new static lifecycle, `getDerivedStateFromProps`, as a safe
`StrictMode` is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode` does not render any visible UI. It simply activates additional checks and warnings for its descendants.
> **Note:**
>
> `StrictMode` checks are run in development mode only; they do not impact the production build.

View File

@@ -1,19 +1,19 @@
class MyComponent extends React.Component {
// highlight-next-line
_divRef = React.createRef();
divRef = React.createRef();
render() {
// highlight-range{4}
return (
<input
type="text"
ref={this._divRef}
ref={this.divRef}
/>
);
}
componentDidMount() {
// highlight-next-line
this._divRef.value.focus();
this.divRef.value.focus();
}
}