React： 10 篇

这几天我把 Docusaurus 升级到了 3.6，主要是因为这个版本引入了 Rspack 和 SWC 等库，把打包速度提升了好几倍。以前打包大概要一两分钟，现在只需要五六秒就搞定了！

升级过程其实很简单，就是在 package.json 里把版本号改成最新的 3.6.1（当下最新版）。

在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。

React 框架简介​

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发模式，使得开发者可以将一个 Web 应用程序拆分成多个组件，每个组件负责不同的功能，从而使得开发、测试和维护变得更加容易。

React 的主要特点是高效、可重用和灵活。它采用了 Virtual DOM 技术，可以最小化 DOM 操作，从而提高性能。另外，React 还拥有丰富的生态系统，包括 React Router、Redux、React Native 等等，可以帮助开发者更加高效地构建 Web 应用程序、移动应用程序和桌面应用程序等等。

自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。

前端组件化发展历史​

在讨论组件化开发之前，我们先看看前端组件化开发的发展历史。网页开发刚起步时，并没有『前端』这个概念，更不用提组件化了。当时，网页只是作为可以在浏览器中浏览的富文本文件，开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言，网页中的代码没有办法复用，即使是类似的页面，都需要复制粘贴大量的重复代码：

在做完网站之后，我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑，在它上面安装服务器程序后，可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有：

• 阿里云。
• 腾讯云。
• 华为云等。

它们的服务基本上都差不多，这里就以阿里云为例来看一下，如何购买一台适合自己的服务器。 选择服务器最重要的是 **CPU、内存和带宽，**需要根据网站的用户量、所占的空间（例如图片、数据的大小）来选择对应的配置。

• 如果性能太差，就无法应对大量用户的访问，比如说 1000 人同时访问。
• 如果带宽比较小，对于大访问量也会造成页面响应延迟。

假如你要搭建的是个人网站、博客之类的，那么可以选择一个比较基础的配置，这样也比较便宜。

微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神，我就想看看能不能实现一个类似的特效。折腾许久之后，做出来的效果如下：

前后端数据的交换一般是基于 HTTP 协议。HTTP 协议包括客户端和服务端两个实体，客户端发送请求给服务端，服务端返回响应给客户端。在 HTTP 中，数据称为资源，可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。

在 CSS flexbox 布局出现以前，如果要控制 HTML 元素的布局，要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐，稍一不注意，就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了：要么手动计算高度然后算出中心点，要么用 line-height 和 height 的结合，要么用十之八九不生效的 vertical-align 属性等等等等。自从 flex-box 出现以后，一切似乎就豁然开朗了，水平垂直各种花式对齐，空间分配由你做主。当然，要用好它，用对它也不是一件容易的事，今天就给你说说 flex-box 布局，看完之后你也能熟练的运用它！（博客中的示例都是真实的 HTML 代码，可以使用 chrome 开发者工具查看属性。(此文为了演示某些 flex 示例，在小屏幕下会有横向滚动条)

Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state，状态管理，还有事件处理。这个小工具提供了两个颜色选择器，分别可以选择渐变的两个颜色，渐变的角度是 75 度，线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。

你在写 HTML 页面的时候肯定知道，html 标签的属性都是固定的，比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的，不方便扩展和复用。而用 React 创建组件的话，可以给它定义一些更符合语义和逻辑的属性，比如颜色、尺寸等。

Hello! 今天来带你走进 React 的大门！我第一次听说 React 是我在美国读研的时候，室友选了 web programming 这节课，然后遇到了关于 react 的好多问题，就是总也配置不好。我看他那个时候 React 的配置特别麻烦，要引入一堆依赖，像 bower, babel 等等... 还有文档写的也不清楚。有一次他刚开始做一个作业，问了我一个问题，大概是有一个组件显示不出来，结果看了半天我也不知道是怎么回事啊，因为我也没学过。后来他自己研究出来了，是因为这个组件在使用的时候没有大写。