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] 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. 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: 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` `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.](#) [Learn more about the new `createRef` API here.](#)
## Component Lifecycle Changes ## 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. `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:** > **Note:**
> >
> `StrictMode` checks are run in development mode only; they do not impact the production build. > `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 { class MyComponent extends React.Component {
// highlight-next-line // highlight-next-line
_divRef = React.createRef(); divRef = React.createRef();
render() { render() {
// highlight-range{4} // highlight-range{4}
return ( return (
<input <input
type="text" type="text"
ref={this._divRef} ref={this.divRef}
/> />
); );
} }
componentDidMount() { componentDidMount() {
// highlight-next-line // highlight-next-line
this._divRef.value.focus(); this.divRef.value.focus();
} }
} }

Loading…
Cancel
Save