Reactjs-你必须要知道的事

Posted 2021-04-25 工程师内参

React正在吞噬web开发世界——作为现代用户界面的库学习它可以带来很多好处。

在本文中，我们将向您介绍成为一名成功的React开发人员所需要知道的所有内容，这并不是一篇深入的教程，而是对所有需要的概念的介绍。你会在这里找到额外的资源链接，可以帮助你深入了解某些主题。

下面让我们开始吧！

现代JS开发环境

React代码的目标环境是浏览器(大多数时候，我们也可以编写移动应用程序或在服务器上渲染应用程序)。因为浏览器不能理解我前面提到的所有最新的JS特性——我们需要一个代码汇编器和一个代码编译器——提前了解更多信息。我们还需要一个包管理器来下载我们想要使用的所有库——包括React、response - dom、Router等等。

如果你刚刚开始，你不需要非常深入地理解它们，但是你对它们有所了解的话总是利大于弊的

• 我们的开发环境是一个Node.js环境。我们的工具——如Webpack、Babel或Create React App——都是Node.js程序。我们使用Node.js来启动我们的开发环境，为生产构建，运行测试等等。

• 包管理(npm、yarn)——用于安装我们在开发环境中需要的所有东西(React, Router, Babel, Webpack，等等)

• ESLint——查看我们的代码中常见的编程错误或不良实践——一个好的linter配置将会为您节省许多编码错误和bug。当你做了一些违反lint规则的事情(比如没有正确使用React钩子)，lint配置会抛出错误或警告

• Babel编译器——将现代JS转换为浏览器可以理解的代码

  Webpack——获取我们所有的代码模块(我们所有的文件和依赖项)——并输出一个(或多个)浏览器可以理解的JS文件。我们可以在Webpack中使用不同的插件来实现不同的功能(缩小代码，捆绑和优化CSS，等等)

  把你的ui抽离成可重用的组件

  在React开发中最重要的事情是组件的概念。我们将有许多组成UI的组件。下面是一个简单的Dev.to接口分解为组件的例子:

  较大的UI块将由许多较小的块组成。例如，我没有分解左面板的所有部分。你可以看到它，想象它包含一个头像组件，它也包含一个图片，标题和文本组件。下面是一个侧边导航组件

• 路由

  除非你是在构建一些非常小的应用程序，否则你会意识到你需要在你的应用程序中渲染多个页面。

  路由的工作方式是在一个路由下呈现一组特定的react组件:

• '/' -呈现主页组件

• '/about' -渲染关于页面的组件

  当我们接受我们的路由时，路由会变得更加复杂:

• URI参数例如:/employee/{employeeID}

• 查询参数例如:/employee?{employeeID=1}

  
  

学会使用hooks

React hooks是编写React应用程序的现代方法。有几个钩子，你将需要在你的项目中用的

• useState 或 useReducer

• useEffect 

全局状态管理

全局或者应用级别的数据为了方便多个组件访问是需要进行全局式存储的比如语言 当前用户 主题等等 这主要涉及到 useReducer content 和redux等，当然我们要尽可能的使用组件本身的状态代替全局数据

与HTTP服务交互

现在我们知道了如何将ui分割成组件、进行路由和状态管理，下一步是管理从应用程序中的api中获取数据。

对HTTP和Web api有基本的了解是很重要的。您将使用fetch API或axios这样的库与API交互，所以请学习如何使用这两者之一

组件库

您可能并不总是希望从头开始为一个复杂的UI构建所有组件——因此了解预构建组件库是很有用的。使用这些工具可以加速开发，因为你不需要从头开始编写基本的UI组件，如按钮、下拉菜单、表格等。

• Material UI

• Reactstrap

• Semantic UI

• Chakra

• Ant Design

你当然不需要熟悉所有——只要知道他们就在那里，而且你可以在需要的时候可以想到他们即可

好啦到此为止 如果你把上面提到的都做到的话 我相信你会成为一个合格的开发者的 当然构建一个优秀的应用仅靠上面提到的东西可能还不够 比如部署，测试等等如果你想深入的了解