Refactor move docs (#8108)
* feat: [skip] generate readme script * docs: [skip ci] update READMEs * docs: [skip ci] fix code block type * chore: [skip ci] move generator script
This commit is contained in:
@@ -1,105 +1,19 @@
|
||||
# @babel/plugin-transform-react-constant-elements
|
||||
|
||||
> Treat React JSX elements as value types and hoist them to the highest scope.
|
||||
> Treat React JSX elements as value types and hoist them to the highest scope
|
||||
|
||||
This plugin can speed up reconciliation and reduce garbage collection pressure by hoisting
|
||||
React elements to the highest possible scope, preventing multiple unnecessary reinstantiations.
|
||||
See our website [@babel/plugin-transform-react-constant-elements](https://new.babeljs.io/docs/en/next/babel-plugin-transform-react-constant-elements.html) for more information.
|
||||
|
||||
## Example
|
||||
## Install
|
||||
|
||||
**In**
|
||||
|
||||
```jsx
|
||||
const Hr = () => {
|
||||
return <hr className="hr" />;
|
||||
};
|
||||
```
|
||||
|
||||
**Out**
|
||||
|
||||
```jsx
|
||||
const _ref = <hr className="hr" />;
|
||||
|
||||
const Hr = () => {
|
||||
return _ref;
|
||||
};
|
||||
```
|
||||
|
||||
**Deopts**
|
||||
|
||||
- **Spread Operator**
|
||||
|
||||
```jsx
|
||||
<div {...foobar} />
|
||||
```
|
||||
|
||||
- **Refs**
|
||||
|
||||
```jsx
|
||||
<div ref="foobar" />
|
||||
<div ref={node => this.node = node} />
|
||||
```
|
||||
|
||||
- **Mutable Properties**
|
||||
|
||||
> See https://github.com/facebook/react/issues/3226 for more on this
|
||||
|
||||
```js
|
||||
<div width={{width: 100}} />
|
||||
```
|
||||
|
||||
## Installation
|
||||
Using npm:
|
||||
|
||||
```sh
|
||||
npm install --save-dev @babel/plugin-transform-react-constant-elements
|
||||
npm install --save @babel/plugin-transform-react-constant-elements
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Via `.babelrc` (Recommended)
|
||||
|
||||
**.babelrc**
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": ["@babel/plugin-transform-react-constant-elements"]
|
||||
}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
### `allowMutablePropsOnTags`
|
||||
|
||||
`Array<string>`, defaults to `[]`
|
||||
|
||||
If you are using a particular library (like react-intl) that uses object properties, and you are sure
|
||||
that the element won't modify its own props, you can whitelist the element so that objects are allowed.
|
||||
|
||||
This will skip the `Mutable Properties` deopt.
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
["@babel/plugin-transform-react-constant-elements", {"allowMutablePropsOnTags": ["FormattedMessage"]}],
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Via CLI
|
||||
or using yarn:
|
||||
|
||||
```sh
|
||||
babel --plugins @babel/plugin-transform-react-constant-elements script.js
|
||||
yarn add --save @babel/plugin-transform-react-constant-elements
|
||||
```
|
||||
|
||||
### Via Node API
|
||||
|
||||
```javascript
|
||||
require("@babel/core").transform("code", {
|
||||
plugins: ["@babel/plugin-transform-react-constant-elements"]
|
||||
});
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
* [[facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement](https://github.com/facebook/react/issues/3226)
|
||||
|
||||
Reference in New Issue
Block a user