mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
Minor edits in response to PR feedback
This commit is contained in:
@@ -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.
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user