web前端开发面试，HTML标签语义化

前言

React生态系统已经发展成为越来越多的开发工具和库。过多的工具是对其流行性的真实证明。对于开发人员而言，导航这种以断颈速度变化的迷宫可能是令人头晕的练习。为了帮助您顺利前进，以下是2020年必备的React工具列表。

Hooks

• 网站：reactjs.org/docs/hooks-intro.html
• 仓库：github.com/facebook/react
• GitHub星级：140,000+
• 开发人员：Facebook
• 版本：16.8
• 贡献者：1,300+

从16.8版本开始，钩子是React的新增功能。它们解锁了无类组件中的有用功能。使用Hooks，React不再需要生命周期方法（例如componentDidMount管理状态）。这鼓励了关注点的分离，因为组件无法管理自己的状态。在类组件中放置大量状态管理会增加复杂性。这使得有状态组件更难以维护。Hooks试图通过提供关键功能来缓解此问题。

以下是基本的挂钩：

• useState：用于在无生命周期方法的情况下更改无类组件中的状态
• useEffect：用于执行渲染后的功能，对于触发Ajax请求非常有用
• useContext：用于切换组件上下文数据，甚至在组件外部

优点：

• 减轻状态管理的复杂性
• 支持功能组件
• 鼓励分离关注点

缺点：

• 上下文数据切换可以指数化认知负荷

功能组件（Functional Components）

• 网站：reactjs.org
• 仓库：github.com/facebook/react
• GitHub星级：140,000+
• 开发人员：Facebook
• 当前版本：16.12
• 贡献者：1,300+

功能组件是一种无需类组件即可创建JSX标记的声明方式。它们包含功能范式，因为它们不管理生命周期方法中的状态。这强调了没有太多逻辑的UI标记。由于组件依赖道具，因此变得更容易测试。道具与渲染输出具有一对一的关系。

这是React中功能组件的样子：

const SimpleComponent = ({isInit, data}) =>
<>
  {useEffect(() => {!isInt && loadAjaxData()})}
  {data}
</>

优点：

• 仅关注UI
• 可测试的组件
• 考虑组件时减少认知负荷

缺点：

• 没有生命周期方法

创建React应用（Create React App）

• 网站：create-react-app.dev
• 仓库：github.com/facebook/create-react-app
• GitHub星级：76,000+
• 开发人员：Facebook
• 当前版本：3.4
• 贡献者：700+

触发新的React项目的典型工具。这通过单个npm软件包管理所有React依赖项。不再需要处理Babel，webpack等。整个依赖项工具链都使用react-scriptsin 进行了升级package.json。有一种方法可以将Create React App与任何服务器端渲染工具集成在一起。工具输出文件夹中的index.html静态资产public。此公用文件夹是静态资产准备好进行集成的接触点。

很容易上手：

npx create-react-app my-killer-app

而且以后升级更容易：

npm i react-scripts@latest

优点：

• 容易上手
• 容易升级
• 单一元依赖性

缺点：

• 没有服务器端渲染，但允许集成

代理服务器（Proxy Server）

• 网站：create-react-app.dev/docs/proxying-api-requests-in-development
• 仓库：github.com/facebook/create-react-app
• GitHub星级：76,000+
• 开发人员：Facebook
• 版本：0.2.3
• 贡献者：700+

从版本react-scripts@0.2.3或更高版本开始，可以代理API请求。这允许后端API和本地Create React App项目共存。从客户端发出请求，以/my-killer-api/get-data通过代理服务器路由请求。这种无缝集成在本地开发人员和后期构建中均有效。如果本地开发人员在port上运行localhost:3000，则API请求将通过代理服务器。部署静态资产后，它将经过托管这些资产的任何后端。

要在中设置代理服务器package.json：

"proxy": "http://localhost/my-killer-api-base-url"

如果后端API是通过相对路径托管的，请设置主页：

"homepage": "/relative-path"

优点：

• 与后端API无缝集成
• 消除了CORS问题
• 易于设置

道具类型（PropTypes）

• 网站：npmjs.com/package/prop-types
• 仓库：github.com/facebook/prop-types
• GitHub星：3,000+