在前端开发中，React.js 凭借其高效、灵活的开发方式，以及可维护性和可扩展性高的特点，成为了众多开发者的首选框架之一。而在开发 SPA（Single Page Application） 应用时，React.js 更是能够为我们提供非常丰富的工具和技巧。本文将针对 React.js 开发 SPA 应用的最佳实践，分别介绍文件结构、路由、数据管理和实用技巧，并提供详细的示例代码。
一、文件结构
良好的文件结构可以很好地组织代码，提高代码的可读性、可维护性，让团队合作更加高效。下面是一个较为典型的 React.js SPA 应用的文件结构：
-- -------------------- ---- ------- --- ------- - --- ---------- - --- --- --- ---- - --- ---- - - --- -------- - - --- --- - --- ----------- - - --- ------- - - - --- -------- - - - --- ---------- - - --- ------- - - - --- -------- - - - --- ---------- - - --- --- - --- ------ - - --- ----- - - - --- -------- - - - --- ---------- - - --- ------ - - - --- -------- - - - --- ---------- - - --- --- - --- ------ - --- -------- - --- -------- - --- --- --- ------------
其中，根目录下的 public 文件夹和 src 文件夹是必须的，它们分别用于存放静态资源和源代码。src 文件夹中，则按照功能和组件类型（通用组件、页面组件等）分别创建 api、components、pages 等目录。
api目录：用于存放封装好的 API 接口components目录：用于存放通用组件（Header、Footer、Button 等）的代码pages目录：用于存放页面组件的代码，一般以页面名称命名，如Home、About等
在 components 和 pages 目录下，每个组件的代码应分别存放在一个单独的文件夹中，包含组件本身的 JS、CSS 文件（如果有的话），以及组件所需要的相关文件。
在 src 目录下还有 App.js 文件和 index.js 文件，它们是 React.js 最基本的入口文件。在这两个文件中，你需要实例化一个根组件并将其挂载到指定的 DOM 节点上，以渲染整个应用程序。
同时，为了方便管理和共享全局状态，我们还应该在 src 目录下创建一个 store.js 文件，用于存放所有的全局状态，如 Redux、Mobx 等。
二、路由
在 SPA 应用中，路由是必不可少的。React.js 提供了 react-router 库，为我们提供了一种灵活、可扩展的路由组织方式。下面是一个简单的例子，展示如何在 React.js 中使用 react-router：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- -------------
------ ----- ---- --------------
----------------
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
----------
-------------------------------
--在上面的代码中，我们首先引入了 react-router-dom 中的 BrowserRouter、Route、Switch 等组件，用于搭建路由组织结构。通过 Route 组件的 path 属性指定 URL 地址，通过 component 属性指定对应的页面组件。
同时，我们也可以使用 Link 组件来创建链接，使用户可以直接在应用程序中跳转到指定页面：
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- -------- -
------ -
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
-
-
------ ------- -------在上面的代码中，我们通过 Link 组件创建了一个链接，指向了首页和关于页面，点击该链接即可跳转到对应页面。
三、数据管理
在 SPA 应用开发中，数据管理是一个非常重要的问题。为了方便管理全局状态，我们一般使用 Redux、Mobx 等数据管理库，并将状态集中管理在 store.js 文件中。下面是一个简单的例子，用于展示如何在 React.js 中使用 Redux：
-- -------------------- ---- -------
-- --------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
------ ------- ------在上面的代码中，我们创建了一个初始状态为 { count: 0 } 的 Reducer，并使用 createStore 函数创建了一个 store 对象，将该 Reducer 作为 createStore 函数的参数传入。通过调用 store.dispatch(action) 函数，可以触发一个 Action，进而修改应用程序的状态。
在页面组件中，如何使用 Redux 状态呢？下面是一个简单的例子：
-- -------------------- ---- -------
-- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- ----------- -
----- - ------ -------- - - ------
------ -
--
----------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
---
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
------ ------- -------------------------------在上面的代码中，我们使用 connect 函数将 Home 组件连接到 store 对象上。通过 mapStateToProps 函数，我们将应用程序的状态映射到组件的 props 中，使组件可以访问全局状态。同时，在组件中，我们可以通过 dispatch 函数触发一个 Action，从而更新应用程序的状态。
四、实用技巧
下面是一些常用的 React.js 实用技巧：
（1）使用 React Fragments 包裹多个 JSX 元素
当我们需要返回多个 JSX 元素时，需要使用一个父元素来包裹这些元素，否则会出现语法错误。React.js 提供了 React.Fragment 组件，可以帮助我们包裹多个 JSX 元素，而不需要使用一个额外的父级元素：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------- -
------ -
----------------
--------- ----------
---- -- -------- ---------
-----------------
-
-等同于：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------- -
------ -
--
--------- ----------
---- -- -------- ---------
---
-
-（2）使用 PropTypes 验证组件的传入属性
在开发 React.js 组件时，我们需要验证传入的属性是否符合要求。React.js 提供了 prop-types 库，可以非常方便地对组件属性进行验证，并提示开发者传入的属性不符合要求的错误信息：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
-------- ------------------ -
------ -
--------- -----------------
-
-
--------------------- - -
----- ---------------------------
--
------ ------- ------------在上面的代码中，我们使用 PropTypes 对组件的属性进行了验证，要求必须传入一个字符串类型的 name 属性。如果传入的属性不符合要求，浏览器控制台将会提示错误信息。
（3）使用 Higher-Order Component（HOC）实现逻辑复用
为了复用组件逻辑，我们可以使用 Higher-Order Component（高阶组件）来封装一些通用的逻辑，这样就可以在多个组件中复用该逻辑。下面是一个简单的 HOC 实现：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------------- -
------ -------- ------------------ -
-------- ---------------- -
------ -
--
----------------
----------------- ---------- --
---
-
-
------ ----------
-
-
------ ------- ----------在上面的代码中，我们定义了一个名为 withTitle 的 HOC，它接收一个表示标题的 title 参数，并返回另一个函数。这个函数接收一个组件 WrappedComponent，并返回一个新的包装组件 WithTitle，该组件将 title 和 WrappedComponent 渲染在一起。
使用该 HOC 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------------
-------- ----------- -
------ -
---------- -- ---- ---------
-
-
------ ------- --------------- -------------在上面的代码中，我们首先引入了 withTitle HOC，然后将页面组件 Home 作为参数传入 withTitle 函数，最后导出一个新组件 Home，该组件具有标题为 'Home Page' 的特点。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d7bc1ea941bf7134ddd3c6