Original

An basic Avatar Component:

1
2
3
4
5
class Avatar extends React.Component {
  render () {
    return <img src={this.props.url} />
  }
}

And its functional component style is:

1
const Avatar = ({ url }) => <img src={url} />

As you can see, it’s just a simple js function returning an element.

React still does a lot of stuff on functional components that, by nature, will never be used.

But we can skip React internals for these functional component.

They are just plain JavaScritp functions, which means we can call it in the render function.

1
2
3
4
5
6
7
ReactDOM.render(
  <div>
    {Avatar({ url: avatarUrl })}
    <div>{commentBody}</div>
  </div>,
  mountNode,
)

As we know, the traditional usage:

1
<Avatar url={avatarUrl} />

will be compiled into

1
React.createElement(Avatar, { url: avatarUrl })

It will cost a lifecycle of a React Component.

But with direct calling of plain JavaScritp Function, all these consumption can be eliminated.

By the way, transform-react-inline-elements does the same as a bebel transform, so there’s no need to change the source code.