amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 04:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Link to beta in content (#5495)

Browse Source
This commit is contained in:
dan
2023-01-24 07:03:08 +00:00
committed by GitHub
parent 73208820d1
commit 3b0be4fbef
29 changed files with 396 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
content/docs/reference-react.md
View File

@@ -101,6 +101,10 @@ Suspense lets components "wait" for something before rendering. Today, Suspense
### `React.Component` {#reactcomponent}
> Try the new React documentation for [`Component`](https://beta.reactjs.org/reference/react/Component).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes):
```javascript
@@ -117,6 +121,10 @@ See the [React.Component API Reference](/docs/react-component.html) for a list o
### `React.PureComponent` {#reactpurecomponent}
> Try the new React documentation for [`PureComponent`](https://beta.reactjs.org/reference/react/PureComponent).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.PureComponent` is similar to [`React.Component`](#reactcomponent). The difference between them is that [`React.Component`](#reactcomponent) doesn't implement [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate), but `React.PureComponent` implements it with a shallow prop and state comparison.
If your React component's `render()` function renders the same result given the same props and state, you can use `React.PureComponent` for a performance boost in some cases.
@@ -131,6 +139,10 @@ If your React component's `render()` function renders the same result given the
### `React.memo` {#reactmemo}
> Try the new React documentation for [`memo`](https://beta.reactjs.org/reference/react/memo).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
```javascript
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
@@ -169,6 +181,10 @@ This method only exists as a **[performance optimization](/docs/optimizing-perfo
### `createElement()` {#createelement}
> Try the new React documentation for [`createElement`](https://beta.reactjs.org/reference/react/createElement).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
```javascript
React.createElement(
type,
@@ -185,6 +201,10 @@ Code written with [JSX](/docs/introducing-jsx.html) will be converted to use `Re
### `cloneElement()` {#cloneelement}
> Try the new React documentation for [`cloneElement`](https://beta.reactjs.org/reference/react/cloneElement).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
```
React.cloneElement(
element,
@@ -209,6 +229,10 @@ This API was introduced as a replacement of the deprecated `React.addons.cloneWi
### `createFactory()` {#createfactory}
> Try the new React documentation for [`createFactory`](https://beta.reactjs.org/reference/react/createFactory).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
```javascript
React.createFactory(type)
```
@@ -223,6 +247,10 @@ You will not typically invoke `React.createFactory()` directly if you are using
### `isValidElement()` {#isvalidelement}
> Try the new React documentation for [`isValidElement`](https://beta.reactjs.org/reference/react/isValidElement).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
```javascript
React.isValidElement(object)
```
@@ -233,6 +261,10 @@ Verifies the object is a React element. Returns `true` or `false`.
### `React.Children` {#reactchildren}
> Try the new React documentation for [`Children`](https://beta.reactjs.org/reference/react/Children).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
#### `React.Children.map` {#reactchildrenmap}
@@ -291,6 +323,10 @@ Returns the `children` opaque data structure as a flat array with keys assigned
### `React.Fragment` {#reactfragment}
> Try the new React documentation for [`Fragment`](https://beta.reactjs.org/reference/react/Fragment).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
The `React.Fragment` component lets you return multiple elements in a `render()` method without creating an additional DOM element:
```javascript
@@ -309,11 +345,19 @@ You can also use it with the shorthand `<></>` syntax. For more information, see
### `React.createRef` {#reactcreateref}
> Try the new React documentation for [`createRef`](https://beta.reactjs.org/reference/react/createRef).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.createRef` creates a [ref](/docs/refs-and-the-dom.html) that can be attached to React elements via the ref attribute.
`embed:16-3-release-blog-post/create-ref-example.js`
### `React.forwardRef` {#reactforwardref}
> Try the new React documentation for [`forwardRef`](https://beta.reactjs.org/reference/react/forwardRef).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.forwardRef` creates a React component that forwards the [ref](/docs/refs-and-the-dom.html) attribute it receives to another component below in the tree. This technique is not very common but is particularly useful in two scenarios:
* [Forwarding refs to DOM components](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
@@ -331,6 +375,10 @@ For more information, see [forwarding refs](/docs/forwarding-refs.html).
### `React.lazy` {#reactlazy}
> Try the new React documentation for [`lazy`](https://beta.reactjs.org/reference/react/lazy).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.lazy()` lets you define a component that is loaded dynamically. This helps reduce the bundle size to delay loading components that aren't used during the initial render.
You can learn how to use it from our [code splitting documentation](/docs/code-splitting.html#reactlazy). You might also want to check out [this article](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) explaining how to use it in more detail.
@@ -344,6 +392,10 @@ Note that rendering `lazy` components requires that there's a `<React.Suspense>`
### `React.Suspense` {#reactsuspense}
> Try the new React documentation for [`Suspense`](https://beta.reactjs.org/reference/react/Suspense).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
`React.Suspense` lets you specify the loading indicator in case some components in the tree below it are not yet ready to render. In the future we plan to let `Suspense` handle more scenarios such as data fetching. You can read about this in [our roadmap](/blog/2018/11/27/react-16-roadmap.html).
Today, lazy loading components is the **only** use case supported by `<React.Suspense>`:
@@ -379,6 +431,10 @@ Suspense boundaries depend on their parent boundaries being hydrated before they
### `React.startTransition` {#starttransition}
> Try the new React documentation for [`startTransition`](https://beta.reactjs.org/reference/react/startTransition).
>
> The new docs will soon replace this site, which will be archived. [Provide feedback here.](https://github.com/reactjs/reactjs.org/issues/3308)
```js
React.startTransition(callback)
```