Update React transform READMEs from babel.github.io [skip ci] (#4903)

* Update React transform READMEs from babel.github.io [skip ci]

* Drop inline-elements polyfill message (move to website)
This commit is contained in:
Brian Ng
2016-11-28 19:50:17 -06:00
committed by Henry Zhu
parent 51e8fd1868
commit 4a14202e92
7 changed files with 182 additions and 20 deletions

View File

@@ -1,11 +1,54 @@
# babel-plugin-transform-react-constant-elements
Treat React JSX elements as value types and hoist them to the highest scope
Hoists element creation to the top level for subtrees that are fully static, which reduces both allocations and calls to `React.createElement`. More importantly, it tells React that the subtree hasn't changed so React can completely skip it when reconciling.
This transform **should be enabled only in production** (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic.
## Example
**In**
```js
const Hr = () => {
return <hr className="hr" />;
};
```
**Out**
```js
const _ref = <hr className="hr" />;
const Hr = () => {
return _ref;
};
```
**Deopts**
- **Spread Operator**
```js
<div {...foobar} />
```
- **Refs**
```js
<div ref="foobar" />
<div ref={node => this.node = node} />
```
- **Composite Components**
```js
const ComponentA = () => <div><MyCustomComponent /></div>;
```
## Installation
```sh
$ npm install babel-plugin-transform-react-constant-elements
npm install babel-plugin-transform-react-constant-elements
```
## Usage
@@ -23,7 +66,7 @@ $ npm install babel-plugin-transform-react-constant-elements
### Via CLI
```sh
$ babel --plugins transform-react-constant-elements script.js
babel --plugins transform-react-constant-elements script.js
```
### Via Node API
@@ -33,3 +76,7 @@ require("babel-core").transform("code", {
plugins: ["transform-react-constant-elements"]
});
```
## References
* [[facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement](https://github.com/facebook/react/issues/3226)