上节课呢我们对public目录中的文件做了简单的介绍，但是我们发现public中的文件仿佛并没有那么重要，其实不是说不重要，也重要，只不过不那么需要我们关注，因为这个文件夹中存放的通常都是一些静态文件，比如图标啦，图片啦什么的。那么我们这节课来介绍一下需要我们重点关注的一个模块，src目录，因为我们绝大多数的精力都在这里面，我们要把我们的代码都在这个目录里面来编写。

回顾

在介绍src目录中的文件之前呢，我们来对上节课的内容来做一个简单的回顾。

  • favicon.ico浏览器标签页那一栏中的logo
  • index.html项目应用的主页面永远渲染多个组件
  • logo192.png logo图片
  • logo512.png logo图片
  • manifest.json应用加壳配置文件
  • robots.txt爬虫规则文件

以上便是上节课我们对public目录的介绍，接下来我们来看一下src目录

App.*

我们首先先看文件列表中的前两个App.css，App.js这两个东西是什么呢？其实这是一个组件。还记不记得我们之前说过组件是什么？是不是用来实现局部功能效果的代码和资源集合(HTML，CSS，JS，img，font,viedo等等)。所以说我说APP.css和App.js是一个组件大家不要觉得很惊讶，为什么CSS文件也是组件，CSS文件不是组件，但它是组件的一部分。因为我们这个组件的所有样式都在这个CSS文件中。

我们来看这个组件的定义部分：

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a className="App-link" href="https://reactjs.org" target="_blank"
          rel="noopener noreferrer">Learn React</a>
      </header>
    </div>
  );
}
export default App;

这是不是一个函数式组件，而且，组件名称就叫App，可能有人要问是不是我这个组件些什么名字，我的js文件就得用什么名字？倒也不必，主要组件名和文件名同名的话更方便我们维护代码，挑理更清晰。

我们看App.js文件中，虽然说定义了组件，但是也没有看见渲染组件啊，为啥页面上可以展示呢？虽然没有渲染，但是最后一行是不是把这个组件类给导出了？那么我不就可以在其他js文件里来导入并调用到这个类组件了吗？那么好前面这两个文件我们就算是了解了。

再来看下面有一个App.test.js这个文件是干什么的都写了test了那还能是干吗的呢，用来做测试用得被，而且是只单单来测试App组件的，当然了这个测试的方式我们几乎不用，我们不需要单单去测试一个组件。我们可以通过启动一个测试服务来对页面进行测试。

index.*

我们继续往下看，有一个index.css和index.js这两个文件是干什么的呢？是不是也是一个组件呢？我们看一下代码不就知道了。CSS文件不需要太关注，就是样式呗，没有什么可说的，但是这个文件是谁的样式？我们App组件用得是App.css，那么index.css是不是应该就是我们这个web的一个公共的CSS。

好我们再来看我们来看index.js文件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

这些代码都是啥呀？导入了一些库，也导入了样式，还有我们的组件，还有我们不认识的东西，紧接着后面呢调用了ReactDOM.render方法。并没有定义组件，所以说这里的index并不是一个组件，那么是什么呢？这里的index其实就是webpack的一个入口，当找到index之后webpack才会开始工作。

这个文件是一个很重要的，因为我们之前在App组件中说也没有渲染啊，但是导出了，现在我们在index.js中导入了我们的组件。然后还渲染了。但是渲染的时候我们好像没看过这个东西啊，这个React.StrictMode标签是什么意思啊？这个是我们所说的js中的严格模式吗？这个其实没有任何关系，那么是干什么的呢？这个标签可以检查我们要渲染的组件里面代码写得是否合理。比如我们写了字符串形式的ref，那么就会有警告提示我们说这种形式的ref已经不推荐了。

其他文件

在往下看，logo.svg这个是干什么的呢，这就是一个图片。没有什么可说的，只不过这个图片是一个代码形式的。

然后我们看到了reportWebVitals.js这个玩意儿。这个是干什么的？而且在index.js中也用了这个，这到底是什么呢？这个文件就是用于记录页面上面的性能的，就是我这个页面渲染里面的各项性能怎么样呢？我想做个分析，就可以通过这个文件来记录下来。但是我们必须要在这个文件中做相应的详细配置才能够按照我们的预期来工作。我们做一个了解就可以了。

然后，在往下我们看见了setupTests.js文件。这个文件呢适用于做整个项目的测试用的。当然这个东西我们几乎也用不上。只要做一个简单的了解就可以了

总结

以上便是这节课对src目录文件的介绍。那么我们来分析一下，页面渲染的流程吧：

  1. 当我们启动项目，webpack会去找入口，那么就会找到src/index.js
  2. 然后执行入口文件，引入React、ReactDOM、样式、组件
  3. 调用ReactDOM.render方法来渲染组件到页面

以上便是页面渲染的流程

  • App.css组件样式
  • App.js组件定义文件
  • App.test.js组件测试文件
  • index.css共用样式文件
  • index.js入口文件，通常组件渲染的操作会在该文件中编写
  • logo.svg页面展示的图片
  • reportWebVitals.js用于记录页面性能
  • setupTests.js用于做组件测试

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/src_file_of_pjc/