TinyShare
是一个英文前端技术文章分享博客网站：
1.推荐的文章，都是我（目前是我一个人）自己仔细阅读过，从中挑选出的优秀的前端相关的文章，绝不为了应付而胡乱推荐；
2.网站会尽量简洁，更多地专注于内容。推荐的文章中，很多都是英文文章，我没有精力每天都去翻译这些文章（我每天也有很多工作要做），所以建议大家直接阅读英文文章，也是一种锻炼。
3.每次推送五篇文章，不多也不少，坚持每天推送。
4.点击文末左下角“
查看原文
”，查看分享的文章原文。
5.更多分享，欢迎访问：
https://tinyshare.cn
· · ·
“网站无障碍”介绍
你对“网站无障碍”了解多少？是不是觉得只有残疾人士才需要网站无障碍的功能支持？
文中阐述，网络无障碍是影响所有用户的，很多通用特殊场景下都会需要网络无障碍：
1. 老年人；
2. 医疗慢性病，比如关节炎；
3. 户外严重眩光；
4. 药物性认识损伤或睡眠不足；
5. 网站适配多个设备；
6. WiFi信号差影响资源加载；
网站无障碍的四个关键点：
1. 可感知。可感知意味着不管什么特殊场景下，都不影响用户阅读，观看或者聆听网站的内容这个特性，涵盖网页上的排版、图片、音频和视频。
2. 可运行。可运行意味着，不管什么特殊场景下，都不影响用户查看所有的页面，也不影响填充表单。这个特性，一般包含接口和导航、键盘导航以及渐进式增强等。
3. 易懂性。易懂表示不管在什么特殊场景下，都不影响用户理解网站预期的目的。这个特性需要网站简单且明确、避免假设。
4. 健壮性。健壮性表示不管在任何特殊场景下，用户都可以在大量的设备上运行。语义化加成包含语义化标签、使用aria标签、有逻辑的DOM元素排序、服务器端渲染以及自适应设计。
文中还介绍了如何测试网站无障碍，希望这篇文章对你有所启发，让你对网络无障碍有更好的理解。
· · ·
在React 16.6中使用组件的懒加载
在React 16.6之前的版本中，要想实现React项目的代码分割和组件的懒加载，需要借助于ES6、Babel和Webpack或Browserify等工具来做代码分割，或者使用Webpack、react-loadable插件来实现组件的懒加载。
现在，从React 16.6版本开始，不需要借助外部工具，就可以实现组件的懒加载，这里要介绍16.6版本中新引入的两个特性：
React.lazy()
和
React.Suspense
。
React.lazy() 使得创建一个动态import且懒加载的组件非常容易，使得组件真正需要渲染的时候才会被引入。它将一个函数当做参数，这个函数必须返回一个通过import加载组件的Promise对象。下图是示例。
React.Suspense 是一个高阶组件，它用来包裹着由React.lazy() 创建的组件，且可以将多个不同层次级别的React.lazy()组件包裹在一个Suspense组件内。而且，Suspense组件还有一个
fallback
属性接受一个React元素，用来作为懒加载组件被加载过程中的占位符（比如：loading提示）。示例见下图。
作者在文中，通过一个简单的示例，很清楚地讲解了如何使用React.lazy()和React.Suspense来创建基于React-Router的多路由懒加载组件。代码如下图。
希望这篇文章能够给你启发，让你更好地理解React.lazy() 和React.Suspense，要使用这些新特性，就赶紧将你的React版本更新到16.6吧。
· · ·
为什么说React的新Hooks API是游戏改变者
React Hooks是一个很受争议的API，自从alpha版发布以来，有支持者，也有反对者，支持的人觉得它很好，很大程度上改变了React的开发模式，反对的人对这个API很抵制，表现出很多负面的情绪。
作者从React最初ES5语法里的
mixins
，到ES6的class语法里完全抛弃
mixins
，以及高阶组件来解决跨组件传递数据的方案。列出了一些高阶组件的问题：
1. 配置很复杂；
2. 不容易区分数据是来自于高阶组件，还是被传递过来的数据；
3. 高阶组件包围着组件，且组件是依赖于高阶组件的。如果组件依赖于高阶组件的数据，要移除高阶组件，这个组件就不能正常运行；
React Hooks是为了解决高阶组件和render props过期的问题，它可以让你使用state来驱动公用的行为，而且：
1. 提供一种方法来state管理的驱动，可以轻易地跟随state所定义的地方；
2. 无感知props。向JSX组件内传递的就是你用props中取到的；
3. 让JSX简单化，将关注点更多地放在组件的渲染上，减少行为上的关注；
当然，这个心API也有缺点，就是在组件被渲染之后，hooks函数必须在函数式组件级别上运行，所以如果你的函数式组件内有块级作用域或循环是不能调用hooks函数的。
希望这篇文章能给你启发，让你更好地理解React Hooks。
· · ·
维护CSS代码的关键：排序（order)
CSS作为软件开发中的二等公民，它被设计用来显示内容并设定样式排版。然而开发者们经常会为了一堆杂乱的CSS代码头疼，维护这种CSS代码的时候，有时候不知道如何下手，生怕改一个属性就会引起不知道的bug。
文中讲述了一种写出可维护的CSS代码的方法，就是为CSS属性进行排序。作者排序的规则是对CSS属性进行分类，按照分类进行编写CSS代码，可以使得代码更加整洁易懂。示例如下图：
