【译】利用js原生方法替换react component实现性能提高

原文连接
https://medium.com/missive-ap...
原做者
Philippe Lehoux

利用js原生方法替换react component实现性能提高

如今咱们正在用React实现一个具备邮件收发和即时聊天功能的客户端工具。

如图所示，经过鼠标和键盘的上下箭头能够从左侧的导航栏切换不一样的对话。为了防止用户感受卡顿，全部的动做都须要在毫秒级完成。

一段对话可能包含成千上百条的评论、邮件和各类各样的事件，而全部的这些内容都由各类组件实现。为了提高在不一样对话间切换时的渲染速度，咱们开始着手将一些stateful组件变为stateless组件（此处原文叫作Function component）。

举个栗子，以前的一个组件是这样的：

class Avatar extends React.Component {
  render() {
    return <img src={this.props.url} />;
  }
}

通过转换以后变为：

const Avatar = (props) => {
  return <img src={props.url} />;
}

其实一个Functional component就是一个简单的js函数，这个函数返回要渲染的元素。Functional component也被称为stateless组件。

咱们认为经过将stateful组件变为stateless组件后性能会有立竿见影的提高，由于当咱们使用stateful组件时，在经过导航切换不一样对话时React会不断的进行上百次的mount和unmount处理，而stateless自己只是基础的js函数，它的触发就像触发生命周期函数同样简单，避免了屡次的mount和unmount处理，从而节省了渲染时间。

然而理想是丰满的，现实是残酷的。。。

那么咱们要怎么才能跳过React的内部机制，不将stateless组件的内容经过react componet渲染，而是直接经过调用函数的方式渲染呢？

其实很简单，咱们只须要改变一下调用方式便可：

ReactDOM.render(
   <div>
-    <Avatar url={avatarUrl} />
+    {Avatar({ url: avatarUrl })}
     <div>{commentBody}</div>
   </div>,
   mountNode
 );

 // Compiled JavaScript
 ReactDOM.render(React.createElement(
   'div',
   null,
-  React.createElement(Avatar, { url: avatarUrl }),
+  Avatar({ url: avatarUrl }),
   React.createElement(
     'div',
     null,
     commentBody
   )
 ), mountNode);

经过性能测试能够看出若是只是经过将stateful组件改成stateless组件，而不改变调用方式，渲染速度只提高了6%；而改变调用方式后，速度提高了45%。

就像上面的性能测试中展示出来的同样，这些修改很适用于提高像咱们的应用同样经过普通的stateful组件方式渲染会触发过多的mount和unmount事件的应用场景。