如何使用 React.js？

在本文中，我们将探讨掌握 React.js 所需了解的所有内容，并解释为什么 React 是前端开发的未来。由于 Yandex、Netflix、Facebook 等众多知名企业都在使用 React，因此 React 开发人员的需求量很大。
我们将讨论 React.js 的所有基础知识，以及 React 中有哪些技术和工具可用于将其应用于我们的前端设计。

React 基础知识

前端是 Web 中向用户显示的部分，负责向后端（也称为服务器端）发送数据和发出请求。
以下是一些关于 React 的基础知识，在开始 Web 应用开发之前你应该了解一下。

组件：您可以使用 React 组件拆分用户界面，以便每个组件都可以重复使用和单独处理。或者换句话说，您使用 React 创建的任何应用程序都将由所谓的组件构成。使用组件可以大大简化用户界面的创建。您可以将用户界面 (UI) 拆分成几个独立的部分或组件，然后分别处理它们，最后将它们合并到父组件中以创建最终的 UI。React 组件可以是“有状态”的，也可以是“无状态”的。“有状态”组件属于类类型，而“无状态”组件属于函数类型。

无状态组件示例

import React from 'react';
//an example of function type component
const ExampleComponent = (props) => {
    return ( <h1>Welcome to Educative!</h1>);
}

export default class App extends React.Component {
  render() {
    //rendering ExampleComponent component in App Component
    return (
      <div>
        <ExampleComponent/> 
        </div>
    );
  }
}

在上面的示例组件中添加了一个名为 ExampleComponent 的无状态组件。ExampleComponent 中唯一的元素是 h1。

有状态组件示例

import React from 'react';

//an example of class type component
class ExampleComponent extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                heading: "This is an Example Component!"
            }


        }

        render() {
            return ( 
                <div>
                    <h1 > {this.props.welcomeMsg} < /h1> 
                    <h2 > { this.state.heading} < /h2> 
                </div>);

        }

}

export default class App extends React.Component {
  render() {
    const welcomeMsg="Welcome to Educative!";
    return (
      <div>
        <ExampleComponent welcomeMsg={welcomeMsg}/>
      </div>
    );
  }
}

名为 ExampleComponent 的有状态组件被添加到上面示例中的组件中。

Props
React 组件接收称为 Props 的参数。HTML 属性用于将 props 传递给组件。React 组件之间的数据流是单向的（仅从父组件到子组件）。Props
是可选输入，可用于向组件发送数据。由于它们是不可变属性，因此它们是只读的。因此，它们对于显示固定值很有用。
状态
State 是 React 中一个独特的内置对象，它使组件能够生成和管理自己的数据。与 props 相反，组件无法在内部生成或维护状态，尽管它们可以通过状态传递数据。
状态不应直接修改，但可以使用名为 setState() 的特殊方法来修改。

例子

this.state.id = “2020”; // wrong

this.setState({         // correct  
    id: "2020"
});

JSX
JSX 简称 JavaScript XML。借助 JSX，我们可以在 React 中编写 HTML。React 对 JSX 的使用使添加和编写 HTML 更加简单。它是一种 JavaScript 语法增强。它应该与 React 一起使用，以指定用户界面的显示方式。虽然 JSX 可能类似于模板语言，但它具备 JavaScript 的所有功能。
事件
React 能够响应用户事件，就像 HTML DOM 事件一样。相同的 HTML 事件（点击、更改、鼠标悬停等）在 React 中也可用。
事件处理程序决定每次触发事件时要执行的操作。这可能是按钮点击或文本输入的变化。本质上，事件处理程序使用户能够与你的 React 应用进行交互。使用 React 元素处理事件与在 DOM 元素上处理事件类似，但有一些细微的差别。
条件渲染
React 允许我们构建多个组件，每个组件都具有所需的行为。然后，我们可以根据一些因素或应用程序的状态来渲染它们。换句话说，组件会根据一种或多种情况选择返回哪些组件。条件渲染与 JavaScript 条件在 React 中的功能相同。使用 JavaScript 运算符创建反映当前状态的元素，React 组件会更新 UI 以匹配这些元素。
条件渲染的示例：请考虑以下组件，该组件仅在将警告消息作为 props 传递时才渲染警告按钮。

function Warning (props) {
 const {warningMessage} = props
 if (!warningMessage) {
 return null
 }
 return (
 <>
 <button>Warning</button>
 </>
 )
}

现在，如果你将 'warning_Message' 传递给组件，将会渲染一个警告按钮。但是，如果你不传入，则会返回 null，并且不会显示该按钮。

<Warning warning_Message="Warning message"/> // the warning button is rendered
<Warning/> // the warning button is not rendered

React UI 框架

Material UI
Material UI 是前端开发者最喜爱的库。为了在 React 应用中开发用户界面，我们只需导入并使用 Material-UI 包中的几个组件即可。因此，开发者无需从头开始创建所有内容，从而节省大量时间。它使用 MIT 许可证，因此即使是商业用途也是免费的。它使用与 React 相同的许可证。参见
Material UI 为我们提供了各种内置模板、组件、图标、API 等，以增强我们的 Web 应用程序。从而使开发人员可以轻松完成工作，就像为我们的项目购买或借用任何组件一样，而不是从头开始构建。有关更多信息，请查看
Ant Design
是蚂蚁金服体验技术部开发的中间件设计语言，旨在标准化中间件项目的用户界面需求，减少不必要的实现和设计成本，并释放设计和前端开发资源。它是 React 开发者第二受欢迎的 UI，它是一款企业级 UI，包含一组专为 Web 应用程序设计的高质量 React 组件。

在开发实际项目时，您可能需要像 Redux 或 MobX 这样的数据流解决方案。

3.Chakra UI
您可以使用 Chakra UI 组件工具包创建 React 应用，该工具包简单易用、灵活易用。Chakra UI 帮助我们为 Web 应用构建创新功能。为了实现最热门的功能，我们使用了 Chakra UI 的 Light 和 Dark UI。Chakra 非常省时，拥有出色的可访问性默认设置，设计精良，文档齐全，开箱即用，外观精美。如果您想了解更多关于 Chakra UI 的信息，请访问Chakra 的 Discord 频道。

4.React Bootstrap
为了构建响应式、基于组件的 UI 组件，ReactJS Bootstrap 被设计为一个前端工具包组件库。作为 JavaScript Bootstrap 的替代品，它提供了易于访问、动态且易于集成的组件，从而加快了我们的开发流程。JavaScript Bootstrap 使用 JQuery 来支持其组件的界面。由于 JavaScript Bootstrap 直接操作文档对象模型 (DOM)，这与 ReactJS 的声明式方法背道而驰。有些 ReactJS 项目使用了 JavaScript Bootstrap，但其支持组件仅使用了基本的 Vanilla Bootstrap 样式表，而没有使用 JQuery。因此，React 开发人员开发了遵循虚拟 DOM 概念且不涉及 JQuery 的组件库。

重要的钩子

在 React 16.8 中，hooks 是一项全新功能。它无需创建类即可提供状态和其他 React 功能。

1.useState
我们可以使用 React 的 useState Hook 来跟踪函数组件中的状态。
通过在函数组件中执行 useState 来初始化状态。UseState 在接受初始状态后会返回两个值：

当前状态
更新当前状态的函数示例

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

2.useEffect
你可以使用此 Hook 指示 React 组件在渲染后执行某个操作。React 会跟踪你提供的函数（我们将其称为“效果”），并在 DOM 调整完成后运行它。

3.UseRef
在渲染之间，你可以使用 useRef Hook 来维护值。它可以用于保存可变的值，当值发生变化时，不需要重新渲染。它也可以用于直接访问 DOM 元素。

4.
使用上下文。使用上下文的主要目的是让你的组件能够访问某些全局数据，并在这些全局数据被修改时进行重新渲染。当你需要将 props 从父组件传递给子组件时，上下文可以解决 props 的重复传递问题。

5.UseReducer
useReducer Hook 接受两个参数。自定义状态逻辑包含在 Reducer 函数中，initialState 可以是一个简单的值，通常也可以是一个对象。dispatch 方法和当前状态由 useReducer Hook 返回。Redux
应该用于具有多种功能的应用程序。这些功能共享相同的信息块。使用 useContext 和 useReducer 时，可以重现 Redux 的功能。

6.UseCallback
当组件的子组件无故重复渲染时，会使用 useCallback hook。传入一个依赖项数组和一个内联回调函数。如果其中一个依赖项发生更改，useCallback 将仅返回该回调函数的记忆版本。

状态管理工具

开发人员可以使用状态管理来检查应用程序的状态，以确保修改能够正确反映业务流程和实际环境。React
中用于状态管理的工具包括：

1.Redux
Redux 是一种设计模式和框架，它使用“动作”（或事件）来管理和更新应用程序状态。通过规则保证状态只能以可预测的方式更改，它充当了整个程序必须使用的状态的中央存储库。它是全栈开发人员最常用的工具之一。

Redux 适用于任何高度重视可预测状态存储能力的应用程序。需要明确的是，Redux 也适用于包含用户界面的客户端（前端）。

2.Mobx
MobX 是一个简单易用、可扩展且无需样板代码的状态管理解决方案。它的代码解耦、可移植，最重要的是易于测试，因为它可以独立于任何 UI 框架维护应用程序状态。它使用发布/订阅设计范式来实现可观察数据。Redux
在流行度、可扩展性和开发社区方面都优于 MobX。但是，如果您想快速上手并使用最少的样板代码创建简洁的应用程序，MobX 可能是您的最佳选择。

3.Hookstate
声明式 React useState 概念通过 Hookstate 包进行了扩展，新增了功能，并被封装为全局版本。其主要特性包括：一个插件系统，用于通过状态验证和持久化功能增强库的功能。Hookstate 默认支持 TypeScript 中的状态管理。

React.JS 包

这些文件是应用程序的一种清单文件。此文件在 React 应用程序开发和部署中起着非常重要的作用。简而言之，我们可以说，Package.json = 与项目关联的元数据 + 所有依赖项及其版本 + 脚本。
您应该熟悉的一些最有用的软件包是
1.React RouterReact
router 是用于 React 中路由的常用库。它允许在不同 React 应用程序组件的视图之间切换，允许更改浏览器 URL，并使 UI 与 URL 保持同步。
对于某些只需要基本导航和路由功能的项目来说，React router 可能有点大材小用。在这种情况下，React Router 根本没有必要。了解 React Hooks 如何取代 React Router

2.Axios
是当今构建高效且用户友好的应用程序最常用的包之一。它是一个流行的库，主要用于向 REST 端点发送异步 HTTP 请求。Axios 是一个 JavaScript 库，它实现了 JS ES6 原生的 Promise API，可用于通过 node.js 或浏览器的 XMLHttpRequests 发出 HTTP 请求。它支持客户端 XSRF 保护，并可用于拦截 HTTP 请求和响应。此外，它还可以取消请求。

3.React Query
React Query 经常被称为 React 缺失的数据获取库。然而，从更技术的角度来说，它简化了 React 应用中检索、缓存、同步和更新服务器数据的过程。Facebook
在其主页的一小部分中使用了 React Query。有些应用完全使用 React 构建。
由于 React Query 的获取机制完全基于 Promises 构建，因此您可以将 React Query 与几乎任何异步数据获取客户端（包括 GraphQL）一起使用！

4.Storybook
一个用于 UI 组件的开发环境叫做 Storybook。
您可以使用它来探索组件库，查看每个组件的多种状态，并实时设计和测试组件。
通过分离组件，它可以加速并简化开发过程。这使您可以一次专注于一个元素。无需启动复杂的开发堆栈、强制将特定数据导入数据库或使用应用程序的导航功能，您就可以创建完整的用户界面。

这些是当今前端开发中最基本的工具和技术。因此，要想成为一名成功的 React.js 前端开发者，你必须熟悉这些技术。我希望本文能够为 React.js 的专业知识提供正确的指导。

文章来源：https://dev.to/sujeshgathe/how-to-reactjs-4kl6