在Web开发中经常会碰到圆形图像的样式处理。在CSS中我们有很多种方式能实现圆形图形的效果，比如《聊聊CSS中的圆》一文中我们就介绍了很多种技术方案。在这些方案中有大家熟悉的border-radius，也有不熟悉的clip-path。这些制作圆形的方案都可以帮助我们实现圆形头像。在这篇文章中，我们就来看看圆形头像的实现方案。

写CSS有些年头了，经历了不同的时期用不同的姿势来编写CSS，其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼，甚至是效率低下，成本极高。也正因如此，社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS，构建UI组件，但也有令人感到头痛之处，比如冗余的代码，代码的覆盖等。随着功能第一（Utility-First）CSS的出现，让我看到了编写CSS的另一种有效的方式，该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来，我们就来了探讨Tailwind CSS，我们将了解基于组件的样式有哪些问题，以及为什么要基于Utility-First CSS来构建组件。

在《如何使用CSS实现黑暗模式和高亮模式的切换》和《给网站添加暗黑模式指南》主要围绕着如何使用CSS的技术给Web添加Dark Mode的功能。在这篇文章中我们把重点放在了React环境中，详细介绍了如何在React中实现Dark Mode的效果，另外还向大家介绍了一Darkmode.js这样的JavaScript怎样实现Dark Mode的效果。感兴趣的欢迎继续往下阅读。

在《如何检测和修复可访问性》一文中和大家一起探讨了怎么让开发者在开发过程中检测和修复Web应用可访问性的问题。尽管近63%的开发者没有这方成的习惯，但如果我们想构建一个具有高可访问性的Web网站或Web应用就必须考虑可访问性相关的事项。而可访问性的一个关键方面就是审核（Accessibility Auditing）。了解应用程序是否具备可访问性，其最佳方法就是对其进行测试和度量；通过这种方式，可以确定在发布到生产环境之前是否需要进行修改。

在上一节中我们学习了如何使用React的props来改变组件（UI）以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state，而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习，我们了解到props是纯静态的改变UI，而今天要聊的state是动态的，让你的组件真的能动起来，可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state，从而导致对应的UI更改（或内容的重新渲染）。如果你从未接触过或者想学习这方面的知识的话，欢迎继续往下阅读。

组件是React中重要特性之一。我们可以将一个复杂的UI分解成多个基本组件。在开发了基本组件之后，我们可以将所需的组件组合在一起创建一个复杂的UI（也称为复杂的组件）。React中使用props和state控制组件中的数据流。但刚接触React的同学对这些所谓的props和state都会感到困惑，那么要掌握React就有必要掌握props和state。在接下来的内容中我们主要围绕着React的props和state和大家一起讨论。

在上一节中，我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染（在Vue中我们可以使用v-for指令）。因为在实际开发中我们时常要处理一些列表的渲染，比如在《列表渲染和Vue的v-for指令》一文中示例所示。在React中，处理列表渲染和处理条件渲染类似，需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。

在Web中时常需要根据不同的状态来渲染对应状态下的部分内容。在React中也同样有这样的运用场景，只不过在React中可以创建不同的组件来封装各种所需要的行为，然后根据不同状态来渲染对应的内容。如果你熟悉Vue的话，知道他有一个v-if指令可以轻易帮助你根据不同的状态（条件）来渲染所需的组件（或UI），但在React没有这样的指令。虽然在React中没有v-if这样的指令，但它可以使用你熟悉的JavaScript条件语句（比如if...else或switch）。接下来，我们就一起来看看如何在React中实现条件渲染。

在大多的Web页面或Web应用程序中，构建UI仅仅是其中小小的一部分，其中有些UI是纯静态的，但有些UI是会随着用户的操作带来相应变化的。比如，用户通过鼠标点击，键盘按下，视窗大小调整或一系列其他的手势和交互来触发。而这些我们往往称之为事件。在Web中处理事件都是交给JavaScript来完成，同样的，在React中也有相应的事件。在这一节开始，我们就来学习React中的事件。你可能在DOM的世界中对事件的使用有一定的了解。如果没有，也不用担心，我们在开启探讨React的事件之前会对JavaScript中的事件做一个初步的了解。

自从React Hooks的出来，社区讨论Hooks的越来越多。这并不是说React Hooks就优于类组件，但是使用Hooks来构建组件时有一个巨大的可用性提升，特别是因为这些函数组件可以通过React Hooks中的钩子函数来访问状态和生命周期。今天我们就来一起聊聊如何将React的类组件转换为函数组件，用React Hooks中的钩子函数替换类组件中的setState和生命周期方法，比如componentWillMount、componentWillReceiveProps等。因此，让我们首先使用状态和生命周期方法构建一个基于类的React组件。也是大家最为熟悉的ToDoList组件。