Repository navigation
提升 React 函数组件 45% 的性能 #7
Description
今日阅读：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 组件的生命周期函数。
Activity