Browse Source

Minor edits in response to PR feedback

main
Brian Vaughn 7 years ago
parent
commit
935d2a104b
  1. 9
      content/blog/2018-02-07-react-v-16-3.md
  2. 6
      examples/16-3-release-blog-create-ref.js

9
content/blog/2018-02-07-react-v-16-3.md

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

6
examples/16-3-release-blog-create-ref.js

@ -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();
}
}

Loading…
Cancel
Save