提升 React 函数组件 45% 的性能

[迷渡]

今日阅读：45% Faster React Functional Components, Now

预计阅读时间为 1 分钟。

---

很多时候对于非常简单的组件，我们通常使用函数组件

// 一个简单的函数组件
const Avatar = (props) => {
  return <img src={props.url} />;
}

但是函数组件也是一个 React 组件，当使用时，也会在内部调用 componentWillMount、componentDidMount、componentWillUnmount 等声明周期函数。

为了提示性能，我们可以把它作为 JavaScript 函数使用，而不是作为 React 组件。

 ReactDOM.render(
   <div>
-    <Avatar url={avatarUrl} />   // <--- 作为 React 组件使用
+    {Avatar({ url: avatarUrl })} // <--- 作为 JavaScript 函数使用
     <div>{commentBody}</div>
   </div>,
   mountNode
 );

 // 编译后的 JavaScript 代码
 ReactDOM.render(React.createElement(
   'div',
   null,
-  React.createElement(Avatar, { url: avatarUrl }), // <--- 作为 React 组件使用
+  Avatar({ url: avatarUrl }),                      // <--- 作为 JavaScript 函数使用
   React.createElement(
     'div',
     null,
     commentBody
   )
 ), mountNode);

改成函数调用后，没有生成 React.createElement，也就没有了 React 组件的生命周期函数。

继续阅读：45% Faster React Functional Components, Now