20个基本的React工具 (详细指南）

热门技术勘探工
288 阅读8分钟

20 Essential React Tools for 2020

React生态系统已经发展成为一个不断增长的开发工具和库的列表。大量的工具是React流行的真正证明。对于开发者来说，要在这个以惊人的速度变化的迷宫中导航，可能是一个令人头晕目眩的工作。为了帮助你导航，下面是一份2020年React基本工具、技术和技能的清单。

钩子

虽然不是严格意义上的工具，但任何在2020年使用React的开发者都需要熟悉钩子。这些钩子是React从16.8版本开始新增的功能，它可以解锁函数组件中的有用功能。例如，useState 钩子允许一个功能组件拥有自己的状态，而useEffect 允许你在初始渲染后执行副作用--例如，操作DOM或数据获取。钩子可以用来复制功能组件中的生命周期方法，并允许你在组件之间共享代码。

以下的基本钩子是可用的。

  • useState：用于在一个没有生命周期方法的功能组件中突变状态
  • useEffect：用于执行渲染后的函数，对发射Ajax请求很有用。
  • useContext：用于访问组件的上下文数据，甚至在组件道具之外。

优点。

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

缺点。

  • 上下文数据切换会增加认知负荷

如果你想了解更多关于钩子的信息，那么请看我们的教程，"React钩子。如何开始和建立你自己的钩子"。

功能组件

随着钩子的出现，函数组件--一种无需使用类就能创建JSX标记的声明性方式--正变得比以往任何时候都更受欢迎。它们拥护功能范式，因为它们不在生命周期方法中管理状态。这强调了对UI标记的关注，而没有太多的逻辑。因为组件依赖于道具，它变得更容易测试。Props与渲染的输出有一对一的关系。

这就是React中的功能性组件的样子。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

优点。

  • 专注于用户界面
  • 可测试的组件
  • 在思考组件的时候，认知负荷较小

缺点。

  • 没有生命周期方法

创建React应用程序

Create React App是启动一个新的React项目的典型工具。它通过一个npm包管理所有的React依赖项。不再需要处理Babel、webpack和其他东西。只需要一个命令就可以建立一个本地开发环境，并支持React、JSX和ES6。但这还不是全部。Create React App还提供了热模块重载（开发时你的变化会立即反映在浏览器中）、自动代码提示、测试运行器和构建脚本，以捆绑JS、CSS和图像用于生产。

这很容易上手。

npx create-react-app my-killer-app

以后升级就更容易了。整个依赖性工具链会随着react-scripts ，在package.json 。

npm i react-scripts@latest

优点是。

  • 容易上手
  • 容易升级
  • 单一的元依赖关系

缺点。

  • 没有服务器端的渲染，但可以进行整合

如果你想了解更多关于使用Create React App的信息，请参考我们的教程，"Create React App - 快速准备好React项目"。

代理服务器

从react-scripts@0.2.3 或更高的版本开始，可以代理API请求。这允许后端API和本地创建React App项目共存。从客户端来看，向/my-killer-api/get-data 发出请求时，会通过代理服务器进行路由。这种无缝集成在本地开发和后期构建中都能发挥作用。如果本地开发运行在端口localhost:3000 ，那么API请求会通过代理服务器。一旦你部署了静态资产，它就会通过托管这些资产的任何后端。

要在package.json 中设置一个代理服务器。

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

如果后端API是用相对路径托管的，则设置主页。

"homepage": "/relative-path"

优点。

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

缺点

  • 可能需要一个具有多个API的服务器端代理层

种类（PropTypes

PropTypes声明了用于React组件的类型并记录了其意图。如果类型不匹配，会在本地开发中显示一个警告。它支持所有的JavaScript原语，如Boolean,Number, 和String 。它可以通过isRequired 来记录哪些道具是必需的。

比如说。

import PropTypes;

MyComponent.propTypes = {
  boolProperty: PropTypes.bool,
  numberProperty: PropTypes.number,
  requiredProperty: PropTypes.string.isRequired
};

Pros:

  • 记录组件的意图
  • 显示本地开发中的警告
  • 支持所有的JavaScript原语

缺点。

  • 没有编译类型检查

TypeScript

为React项目扩展的JavaScript，具有编译类型检查功能。它支持所有具有类型声明的React库和工具。这是一个JavaScript的超集，所以可以选择不使用类型检查器。这既记录了意图，又在不匹配的情况下导致构建失败。在Create React App项目中，在创建你的应用程序时，通过传递--template typescript 来打开它。TypeScript支持从react-script@2.1.0 版本开始。

要声明一个道具类型。

interface MyComponentProps {
  boolProp?: boolean; // optional
  numberProp?: number; // optional
  requiredProp: string;
}

Pros:

  • 编译类型检查
  • 支持所有 React 工具和库，包括 Create React App
  • 提高你的JavaScript技能的好方法

缺点。

  • 有一个学习曲线，但也可以选择退出

如果你想了解更多关于使用TypeScript与React的信息，请查看《React与TypeScript。最佳实践"。

Redux

用于JavaScript应用程序的可预测的状态管理容器。这个工具自带一个管理状态数据的存储空间。状态突变只能通过调度消息来实现。消息对象包含一个类型，向还原器发出信号，以启动哪种突变。建议将应用中的所有东西都放在一个存储中。Redux支持单个存储中的多个还原器。还原器在输入参数和输出状态之间有一对一的关系。这使得还原器成为纯函数。

一个典型的变异状态的还原器可能看起来像这样。

const simpleReducer = (state = {}, action) => {
  switch (action.type) {
    case 'SIMPLE_UPDATE_DATA':
      return {...state, data: action.payload};

    default:
      return state;
  }
};

优点是。

  • 可预测的状态管理
  • 在一个商店里有多个还原器
  • 减速器是纯函数

缺点。

  • 从头开始设置可能有点痛苦

React-Redux

如果你想在你的React应用程序中使用Redux，你会很快发现Redux的官方React绑定。这有两个主要模块：Provider 和connect 。Provider 是一个React组件，有一个store 的道具。这个道具是一个单一的商店如何与JSX标记挂钩的。connect 函数接收两个参数。mapStateToProps，和mapDispatchToProps 。这就是Redux的状态管理与组件道具的关系。当状态发生变化，或调度发生时，绑定会负责在React中设置状态。

这就是一个连接可能的样子。

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

const mapStateToProps = (state) => state.simple;
const mapDispatchToProps = (dispatch) =>
  bindActionCreators({() => ({type: 'SIMPLE_UPDATE_DATA'})}, dispatch);

connect(mapStateToProps, mapDispatchToProps)(SimpleComponent);

优点。

  • Redux的官方React绑定
  • 用JSX标记进行绑定
  • 将组件连接到一个单一的商店

缺点。

  • 学习曲线有些陡峭

还应该注意的是，随着钩子和React的Context API的引入，有可能在一些React应用中取代Redux。你可以在 "如何用React钩子和Context API替换Redux"中了解更多信息。

React Router

React Router是React事实上的标准路由库。当你需要在一个有多个视图的React应用程序中进行导航时，你需要一个路由器来管理URLs。React Router负责处理这个问题，使你的应用UI和URL保持同步。

该库包括三个包：react-router、react-router-dom和react-router-native。路由器的核心包是react-router ，而其他两个包是特定环境的。如果你正在构建一个网站，你应该使用react-router-dom ，如果你正在构建一个React Native应用，你应该使用react-router-native 。

最近的React Router版本引入了钩子，让你可以访问路由器的状态，并从你的组件内部执行导航，以及一个更新的路由渲染模式。

<Route path="/">
  <Home />
</Route>

如果你想了解更多关于React Router的功能，请看《React Router v5：完整指南》。

优点。

  • 组件之间的路由是快速的
  • 可以轻松实现动画和转换
  • 将组件连接到一个单一的商店

缺点。

  • 如果没有额外的配置，就会为用户可能不会访问的视图下载数据
  • 客户端路由（JavaScript被转换为HTML）对SEO有影响。

继续阅读SitePoint上的20个基本React工具。

avatar
文章
阅读
粉丝