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

piapia 发布于2019-08-21 12:00 / 1657人阅读

摘要：原文链接原作者利用原生方法替换实现性能提升现在我们正在用实现一个具有邮件收发和即时聊天功能的客户端工具。为了防止用户感觉卡顿，所有的动作都需要在毫秒级完成。然而理想是丰满的，现实是残酷的。。。

原文链接
https://medium.com/missive-ap...
原作者
Philippe Lehoux

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

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

如图所示，通过鼠标和键盘的上下箭头可以从左侧的导航栏切换不同的对话。为了防止用户感觉卡顿，所有的动作都需要在毫秒级完成。

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

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

class Avatar extends React.Component {
  render() {
    return ;
  }
}

经过转换之后变为：

const Avatar = (props) => {
  return ;
}

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

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

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

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

其实很简单，我们只需要改变一下调用方式即可：

ReactDOM.render(
   
-    
+    {Avatar({ url: avatarUrl })}
     {commentBody}
   ,
   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事件的应用场景。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87343.html

react+redux+webpack移动端项目总结

摘要：前言距离我进新公司也有一个多月，这一个月的事件使用写了一个项目，期间断断续续重构了两三次，目前已经完成第一阶段测试，也总结分享一些使用的一些坑。因为他的不可变特点，我们不会在不经意见不小心改变了，而引起不必要的问题。前言距离我进新公司也有一个多月，这一个月的事件使用react写了一个项目，期间断断续续重构了两三次，目前已经完成第一阶段测试，也总结分享一些使用react的一些坑。 s...

garfileo 2019-08-22 10:42 评论0 收藏0
【译】统一样式语言

摘要：原文地址原文作者译文出自掘金翻译计划译者校对者统一样式语言在过去几年中，我们见证了的兴起，尤其是在社区。根本上来说，纯粹用于只是一个命名规范，它要求样式的类名要遵守的模式。原文地址：A Unified Styling Language 原文作者：Mark Dalgleish 译文出自：掘金翻译计划译者：ZhangFe 校对者：JackGit,yifili09 统一样式语言在过...

fjcgreat 2019-08-29 12:49 评论0 收藏0
Taro 简介

摘要：让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来，就伴随着赞誉与争议不断。同时于开发者来说，小程序的生态不断在完善，许多的坑已被踩平，虽然还是存在一些令人诟病的问题，但已经足见微信的诚意了。 Taro 介绍在互联网不断发展的今天，前端程序员们也不断面临着新的挑战，在这个变化多端、不断革新自己的领域，每一年都有新的美好事物在发生。从去年微信小程序的诞生，到今年的逐渐火热，以及...

sixgo 2019-08-23 16:18 评论0 收藏0
前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
(译 & 转载) 2016 JavaScript 后起之秀

摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 评论0 收藏0