【TinyShare】#0 VS Code的实时共享功能；React的新Context API；浏览器的渲染原理分析等

TinyShare 是一个英文前端技术文章分享博客网站，它有以下特点： 1.推荐的文章，都是我（目前是我一个人）自己仔细阅读过，从中挑选出的优秀的前端相关的文章，绝不为了应付而胡乱推荐； 2.网站会尽量简洁，更多地专注于内容。推荐的文章中，很多都是英文文章，我没有精力每天都去翻译这些文章（我每天也有很多工作要做），所以建议大家直接阅读英文文章，也是一种锻炼。 3.每次推送五篇文章，不多也不少，坚持每天推送。 4.点击文末左下角“ 查看原文 ”，查看分享的文章原文。

VS Code 的实时共享编辑器功能，它能做哪些事情？

软件开发者们在Code Review，代码分享和远程协作等场景下，需要很好地共享他们的代码，而很多时候，还需要分享他们电脑上开发环境。

“VS实时共享”系列，是Visual Studio推出的一个代码共享服务，它可以让开发者在Visual Studio和Visual Studio Code(VS Code)编辑器中，通过安装插件(VS Live Share)的形式来体验这个功能。

（使用VS Code的命令面板开始一个新的实时共享）

该实时共享功能，可以让你共享自己的编辑器、控制台给团队成员，可以设置成“只读”和“读写”模式，使你的共享有一定的可控性。“VS Live Share Audio”插件还可以让你跟团队成员进行语音聊天，还有文字沟通等功能等。

·  ·  ·

React 16.3中新的Context API，可以替换掉你的 Redux 了

React从16.3版本开始，新的Context API中新增了两个特殊的组件： 和 。而Redux从2015年就已经开始利用Context API了，也提供了一个 组件来包裹你的项目组件。

该文介绍了新的Context API和Redux等第三方插件用的旧的Context API之间有哪些区别，并给出示例阐述怎么使用新的Context API替换Redux，且对你的React项目的优化有帮助。

例如在React.PureComponent组件和生命周期函数shouldComponentUpdate()中，组件是否会重绘，是有区别的。旧的Context API的更新不会引起组件的重绘，对于新的Context API， 元素的属性更新，会引起被 组件包裹的组件的重绘。

·  ·  ·

使用Puppeteer和Jest处理端到端测试的异步操作

该文介绍了在做端到端测试时，怎么处理异步操作，使用Puppeteer作为一个web抓取器，使用Jest作为一个断言库。

你将学到怎么讲用户在浏览器上的操作自动化，等待浏览器返回数据，应用程序处理并渲染数据。通过从网页上取到的数据与服务器返回的数据进行比较，确认应用是否真的按照用户特定的操作一样进行处理的。

PS: Puppeteer是由Chrome官方出的一个无头浏览器，可以用它来模拟用户在浏览器上的操作，点击、输入、滚动等，使得前端自动化操作更加方便。Jest是Facebook出的一个JavaScript测试断言库，支持React项目。

·  ·  ·

浏览器是怎么做渲染的？（背后的原理分析）

该文以简单的例子，介绍浏览器是怎么将HTML、CSS和JavaScript文件一步步转化成你可以交互的网站的。

知道浏览器做了哪些处理来将网站呈现出来，也能让你更加了解怎么优化你的网站应用，让你的网站运行的更快，性能更好。

·  ·  ·