Browse Source

Added entry for createRef API

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

11
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, and an official context API! This release includes a new class component lifecycle (`getDerivedStateFromProps`), a new `StrictMode` component, an official context API, and a better way for managing refs!
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.
@ -17,6 +17,15 @@ For many years, React has offered an experimental API for context. Although it w
[Learn more about the new context API here.](#) [Learn more about the new context API here.](#)
## `createRef` API
Previously, React provided two ways for managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373) and so our official recomendation was to [use the callback form instead](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs).
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`
[Learn more about the new `createRef` API here.](#)
## Component Lifecycle Changes ## Component Lifecycle Changes
React's class component API has been around for years with little change. However, as we add support for more advanced features (such as [error boundaries](/docs/react-component.html#componentdidcatch) and the upcoming [async rendering mode](#)) we stretch this model in ways that it was not originally intended. React's class component API has been around for years with little change. However, as we add support for more advanced features (such as [error boundaries](/docs/react-component.html#componentdidcatch) and the upcoming [async rendering mode](#)) we stretch this model in ways that it was not originally intended.

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

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