
> 在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

#### 一、Next.js的SEO优势

Next.js提供了多种内置功能，使得开发者能够轻松实现SEO优化。这些功能包括但不限于：

1. **自动处理`<head>`标签**：Next.js提供了`Head`组件，允许开发者动态管理页面的元信息，如标题、描述、canonical等。
2. **预渲染技术**：Next.js支持静态生成（Static Generation, SG）和服务器端渲染（Server-Side Rendering, SSR），这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。
3. **基于文件的路由系统**：Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。
4. **next-seo库**：next-seo是一个专门为Next.js设计的库，它提供了一组React组件，允许开发者轻松地将与SEO相关的元标记添加到页面中。

#### 二、Next.js SEO优化方案

##### 1. 使用`Head`组件管理页面元信息

Next.js的`Head`组件允许开发者在页面中设置和管理`<head>`标签，这些标签对于搜索引擎来说非常重要。通过`Head`组件，可以设置页面的标题、描述信息以及关键词等，从而吸引搜索引擎和用户的关注，提升网站在搜索结果中的点击率。

```jsx
import Head from 'next/head';

const HomePage = () => (
  <>
    <Head>
      <title>Home Page</title>
      <meta name="description" content="This is the description of the Home Page" />
    </Head>
    <h1>Welcome to the Home Page!</h1>
  </>
);

export default HomePage;
```

##### 2. 使用next-seo库添加元标记

next-seo是一个流行的库，它允许开发者轻松地将与SEO相关的元标记添加到Next.js应用程序中。搜索引擎使用这些标签（如标题和描述标签）来了解页面内容并将其显示在搜索结果中。

首先，需要安装next-seo库：

```bash
npm install next-seo
# 或者
yarn add next-seo
```

然后，在页面中导入并使用next-seo组件：

```jsx
import Head from 'next/head';
import { DefaultSeo, SEO } from 'next-seo';

const Home = () => {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <SEO
        title="My Next.js App"
        description="This is my Next.js app, it's awesome!"
        openGraph={{
          title: 'My Next.js App',
          description: 'This is my Next.js app, it\'s awesome!',
          url: 'https://mynextjsapp.com',
          images: [
            {
              url: 'https://mynextjsapp.com/og-image.jpg',
              alt: 'My Next.js App',
            },
          ],
          site_name: 'My Next.js App',
        }}
      />
      <p>Welcome to my Next.js app!</p>
    </div>
  );
};

export default Home;
```

在这个示例中，我们使用了`SEO`组件来设置页面的标题、描述以及OpenGraph标签。同时，`Head`组件中也设置了标题标签，这是Next.js中添加元标签的标准方式。

##### 3. 优化URL结构

合理的URL结构能提升搜索引擎对网站的认可度，从而带来更好的排名和流量。Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。此外，Next.js还支持动态路由，允许开发者创建具有良好结构的URL。

```jsx
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return <p>Post: {id}</p>;
};

export default Post;
```

在这个示例中，我们创建了一个动态路由页面`Post`，通过`useRouter`钩子获取路由参数`id`，并将其显示在页面中。

##### 4. 内容质量和关键词优化

除了技术层面的优化，还需要关注网站的内容质量和关键词优化。Next.js的静态生成和服务端渲染能够帮助实现高质量的内容展示，而在内容中合理地布局关键词，并进行内部链接的优化，也是提升网站SEO的重要策略。

##### 5. 使用预渲染技术提升性能

Next.js提供了静态生成和服务器端渲染两种预渲染技术，这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。同时，预渲染技术还能显著提升页面加载速度和服务器资源利用率。

- **静态生成**：适用于内容相对固定、更新频率较低的页面。

```jsx
export const getStaticProps = async () => {
  const posts = await fetchPostsFromApi(); // 获取静态数据
  return {
    props: { posts },
    revalidate: 60, // 可选，指定数据刷新间隔（秒）
  };
};

function HomePage({ posts }) {
  // 页面渲染逻辑
}
```

- **服务器端渲染**：适用于需要实时数据、个性化内容或动态路由的应用场景。

```jsx
export const getServerSideProps = async (context) => {
  const currentUserId = context.req.user?.id; // 从请求上下文中获取当前用户ID
  const personalizedData = await fetchPersonalizedData(currentUserId); // 获取实时数据
  return {
    props: { personalizedData },
  };
};

function UserProfilePage({ personalizedData }) {
  // 页面渲染逻辑
}
```

##### 6. 图片优化

在网站开发中，图片通常是占用较大资源的内容。Next.js提供了`Image`组件来进行图片优化，包括懒加载、响应式加载等策略，以提升页面的加载速度和性能表现。

```jsx
import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      <Image
        src={post.featuredImage.url}
        alt={post.title}
        width={800}
        height={450}
        layout="responsive"
      />
      {/* 页面内容 */}
    </>
  );
}
```

##### 7. 代码分割和懒加载

Next.js支持代码分割和按需加载，通过动态导入和懒加载的方式，可以将页面和组件进行分割，按需加载，以减少初始加载时的资源压力，提升页面的响应速度。

```jsx
const SomeComponent = React.lazy(() => import('../components/SomeComponent'));

function MyPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}
```

##### 8. 缓存策略

通过合理地设置HTTP缓存策略、使用CDN加速等手段，可以有效地提升网站的访问速度和性能表现，为用户提供更好的体验。

#### 三、总结

Next.js凭借其强大的静态生成、服务器端渲染以及对SEO的深度支持，已成为构建高性能、高SEO友好Web应用的首选框架之一。通过合理的URL结构、页面标题和描述、内容质量和关键词优化，以及图片优化、代码分割和懒加载、缓存策略等手段，可以提升网站在搜索引擎中的排名，以及网站的加载速度和用户体验。这些策略都是基于Next.js丰富的特性和工具而提供的，可以帮助开发者构建性能优秀、SEO友好的Web应用。

在Next.js的SEO优化过程中，next-seo库是一个不可或缺的工具，它使得添加和管理SEO元标记变得更加容易和高效。同时，Next.js的预渲染技术、动态路由、图片优化等功能也为SEO优化提供了强有力的支持。

作为开发者，我们应该充分利用Next.js的这些功能和工具，不断优化和提升网站的SEO效果，从而为网站带来更多的流量和曝光机会。希望本文能够为你的Next.js SEO优化之路提供一些有用的启示和帮助。

在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

Next.js SEO优化方案全解析


### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run build
```


### 启动服务
```bash
$ pnpm run pm2
```

至此，ReactPress 服务就启动成功了。

### 代码更新启动
当ReactPress代码更新后，可以按照如下Shell重新启动服务：
```js
# 更新代码
git checkout master
git pull

# 安装依赖&构建
pnpm install
pnpm run build

# 启动进程
pm2 delete @reactpress/server
pm2 delete @reactpress/client
pnpm run pm2

# 开机启动
pm2 startup
pm2 save

```

以上就是ReactPress生成环境的完整部署流程。

ReactPress生产环境部署流程,项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库。

ReactPress 服务端部署流程

## 前言
> 近期，阮一峰在[科技爱好者周刊第 325 期](https://www.ruanyifeng.com/blog/2024/11/weekly-issue-325.html)中推荐了一款开源工具——ReactPress，ReactPress一个基于 Next.js 的博客和 CMS 系统，可查看 [demo](https://blog.gaoredu.com/)站点。（@[fecommunity](https://github.com/fecommunity/reactpress) 投稿）

![2024-11-24/RB88NO19NMJGHY35OXTQHO..png](https://api.gaoredu.com/public/uploads/2024-11-24/RB88NO19NMJGHY35OXTQHO..png)


在数字化时代，内容创作与发布已成为连接读者与作者的重要桥梁。而在这个过程中，一个高效、灵活且功能丰富的发布平台显得尤为重要。近期，阮一峰在科技爱好者周刊中推荐了一款开源工具——ReactPress，它凭借其出色的性能和多样化的功能，吸引了众多开发者和内容创作者的目光。


 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
项目地址：https://github.com/fecommunity/reactpress
 



![2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png)

此项目是用于构建博客网站的，包含前台展示、管理后台和后端。


> 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
> 项目地址：<https://github.com/fecommunity/reactpress>

*   前台&管理后台展示: <https://github.com/fecommunity/reactpress/tree/master/client>
*   后端：<https://github.com/fecommunity/reactpress/tree/master/server>
*   ReactPress在线演示站点：<https://blog.gaoredu.com/>


- 前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
- 后端：

## 1. 效果图
### 1.1 前台展示

#### pc 端
![2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ902D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ902D..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ908G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ908G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png)


#### 移动端适配
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png)


### 管理后台
管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png)




## 2. 体验地址

网站首页：https://blog.gaoredu.com/
管理后台：https://blog.gaoredu.com/admin

## 3. 计划
这次是一个完整的全栈式开发，只要部署了这个项目的代码，是完全可以搭建好博客网站的。


### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 4. 收获与感触
学而不用，基本等于没学，因为最近一直在做自己的个人博客网站，所以好久没更新技术文章了；而且是利用业余时间做的，所以经过差不多两个月的搬砖，现在网站终于都上线了。
开发网站的这段时间里，每天晚上几乎都搬砖到接近 11 点，周末的时间大多也在搬砖，每天写完文章，也快 12 点了，搬砖不易啊，喜欢或者觉得不错的，欢迎到 github 上给个 star，谢谢。

## 5. 文档教程
- 项目地址： https://github.com/fecommunity/reactpress
- next.js 源码：https://github.com/vercel/next.js
- nest.js 源码：https://github.com/nestjs/nest



此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。

阮一峰推荐工具：基于React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

<h1>ReactPress</h1>

ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。

## ✨ 特性

- 📦 技术栈：基于 `React` + `MySQL` + `NestJS` + `NextJS` 构建
- 🌈 组件化：基于 `antd` 的交互语言和视觉风格
- 🌍 国际化：支持中英文切换，国际化配置管理能力
- 🌞 黑白主题：支持亮色和暗黑模式主题自由切换
- 🖌️ 创作管理：内置 `MarkDown` 编辑器，支持文章写文章、分类目录管理，标签管理
- 📃 页面管理：支持自定义新页面
- 💬 评论管理：支持内容评论管理
- 📷️ 媒体管理：支持文件本地上传和 `OSS` 文件上传
- ...

## ⌨️ 本地开发

### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=admin // 用户名
DB_PASSWD=admin // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 🔗 链接

- [首页](https://github.com/fecommunity/reactpress)
- [高热度网](https://gaoredu.com)
- [报告问题](https://github.com/fecommunity/reactpress/issues)
- [参与共建](https://github.com/fecommunity/reactpress/pulls) 
- [next.js 源码](https://github.com/vercel/next.js)
- [nest.js 源码](https://github.com/nestjs/nest)


> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

## 👥 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
<img style="width:30%" src="https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG23.jpg">

- 通过 WeChat 联系，可通过搜素微信号 `red_tea_v2` 或扫码加入 ，并备注来源。

- 通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。

- 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `reactpress` 标签。


1. [GitHub Discussions](https://github.com/ant-design/ant-design/discussions)
2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
3. [Segment Fault](https://segmentfault.com/t/antd)（中文）


ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。


什么是ReactPress？

# Webpack性能优化
## 1. 谈一下如何使用Webpack进行性能优化？
> [!NOTE]
 - 有哪些方式可以减少 Webpack 的打包时间
 - 有哪些方式可以让 Webpack 打出来的包更小

### 1.1 减小打包后文件体积
#### 1.1.1 按需加载
如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。

#### 1.1.2 Tree Shaking
Tree Shaking 可以实现删除项目中未被引用的代码，比如
```js
// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'
```

1. 对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。

2. 如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。

#### 1.1.3 Scope Hoisting
> Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。


比如我们希望打包两个文件

```js
// test.js
export const a = 1
// index.js
import { a } from './test.js'
```

对于这种情况，我们打包出来的代码会类似这样
```js
[
  /* 0 */
  function (module, exports, require) {
    //...
  },
  /* 1 */
  function (module, exports, require) {
    //...
  }
]
```
但是如果我们使用 Scope Hoisting 的话，代码就会尽可能的合并到一个函数中去，也就变成了这样的类似代码
```js
[
  /* 0 */
  function (module, exports, require) {
    //...
  }
]
```
样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能，只需要启用 optimization.concatenateModules 就可以了。
```js
module.exports = {
  optimization: {
    concatenateModules: true
  }
}
```

## 1.2 加快打包速度
### 1.2.1 优化 Loader
> [!NOTE]
> 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST（抽象语法树），然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。

首先我们可以**减小 Loader 的文件搜索范围**
```js
module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}
```
还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。
```js
  loader: 'babel-loader?cacheDirectory=true'
```

### 1.2.2 HappyPack
> [!NOTE]
> 受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。

**HappyPack 可以将 Loader 的同步执行转换为并行的**，这样就能充分利用系统资源来加快打包效率了
```js
module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]
```

### 1.2.3 DllPlugin
> DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。

```js
  // 单独配置在一个文件中
  // webpack.dll.conf.js
  const path = require('path')
  const webpack = require('webpack')
  module.exports = {
    entry: {
      // 想统一打包的类库
      vendor: ['react']
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].dll.js',
      library: '[name]-[hash]'
    },
    plugins: [
      new webpack.DllPlugin({
        // name 必须和 output.library 一致
        name: '[name]-[hash]',
        // 该属性需要与 DllReferencePlugin 中一致
        context: __dirname,
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
      })
    ]
  }
```
然后我们需要执行这个配置文件生成依赖文件，接下来我们需要使用 **DllReferencePlugin** 将依赖文件引入项目中
```js
// webpack.conf.js
module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}
```

#### 1.2.4 代码压缩
在 Webpack3 中，我们一般使用 UglifyJS 来压缩代码，但是这个是单线程运行的，为了加快效率，我们可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。

> [!NOTE]
> Webpack4新特性：在 Webpack4 中，我们就不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。


#### 1.2.5 一些小的优化点

 - `resolve.extensions` 用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
 - `resolve.alias`  可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
 - `module.noParse`  如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助

#### 1.2.6 Webpack长缓存优化
> [!NOTE]
> 浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。

##### Webpack3配置
```js
// foo.js
import react from 'react'
console.lg('hello world')

//webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        main: './src/foo',
        // 如果要把vendor和业务代码区分开
        // 独立的给vendor建一个entry就可以了
        vendor: ['react']
    },
     
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkHash].js'
    },
    plugins: [
        // 单个模块打包优化
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        })
      // 引入新模块，模块顺序变化，vendor hash变化的打包优化
        new webpack.NamedChunksPlugin(),
        new webpack.NamedModulesPlugin(),
    ]   
}
```

这时会有三个文件，vendor、main、manifest，这时再修改代码，再加一个！此时manifest和main发生变化，但是vendor没有发生变化，manifest发生变化是因为代码发生改变，要重新编译，这就达到了改变业务代码，但不改变vendor。

如果不用这种方法，就算vendor的代码不修改，打包出来的文件名的hash值也会发生改变。
##### Webpack4配置
```js
optimization: {
    splitChunks: {      // 打包 node_modules里的代码
        chunks: 'all'
     },
     runtimeChunk: true,  // 打包 runtime 代码
}
```

性能优化前后对比：vendor的hash值并没有发生改变。
![webpack性能优化](../../img/webpack-性能优化.png)



**参考文章**
- https://www.cnblogs.com/weihuan/p/9643095.html

【性能优化】Webpack性能优化

1. 谈一下如何使用Webpack进行性能优化？

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

# 腾讯面经系列
1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
5. 有一个 字符串里面有很多is 请写一个方法只保留一个is          
6. 问了sql注入和防御，我说我有点忘了，把话题转移到了xss
7. 问了node 问了如何用experess搭建服务器
8. js 的event-loop
9. 有3个-10--10之间的整数，写一个方法这三个数一共有多少可能想加等于10 
10. redux
11. react vue 的一些基础
12. 说一下思路，如何把一个图片的地址，传到服务器，并保存在服务器 
13. 用js中的正则表达式去掉两边的空格                           
14. 堆和栈的区别
15. 快排，怎么判断快排排好了
16. dom操作，怎么遍历所有dom节点，根div下有两div(A与B)，每个div下面又有两个span(A1,A2)与span(B1、B2)，怎么将spanA1与A2存在一个数组，B1与B2存在一个数组，树的遍历算法，这个题应该用深度优先还是广度优先，用什么数据结构。
17. tcp慢启动
18. tcp三次、四次握手
19. https握手，加密方式是对称还是非对称
20. 强缓存、弱缓存
21. 修改this的方法，apply和call区别
22. 对JS闭包的理解
23. 原型链
24. 事件冒泡与捕获
25. 原生ajax请求 带cookie
26. jsonp怎么反回后台数据
27. 跨域后台怎么设置
28. es6 class怎么用es5实现
29. 怎么实现动画，canvas动画与svg区别
30. css动画优化
31. promise原理怎么实现
32. `水平垂直居中`
33. 从浏览器输入URL会发生什么
34. 浏览器渲染 ，css、js会阻塞dom树加载吗
35. xss怎么防御
36. 前端怎么实现富文本编辑器
37. PWA（Progressive Web App）
38. Service Worker
39. 后台广播
40. http 长、短轮训
41. 前端缓存，很长的数据缓存怎么选择
42. 301与302区别，什么时候返回304
43. http1.1和http2.0的区别
44. CDN有没有了解
45. 怎样判断Object和Array，Object有父对象么
46. CSS positon的属性有常见三个值 absolute fixed relative 这三个值有什么区别 是怎么用的，这三个跟文档流的关系？
47. 两个单位em和rem，是怎么用的，有什么区别
48. js中的类数组
49. 能不能改写一个数组的push方法，不是重写，也不是新写，保持原来的逻辑之外，再添加一个consle.log（arguements）在控制台打印出来，比如pushA。在工作台把A打印出来，push什么就打印什么。原来的逻辑不能改？
50. 学习前端的方式有哪些？看哪些博客？看过哪些书？
51. JS如何改变函数上下文
52. bind/call/apply有什么区别？
53. bind调用时传入一个参数，此参数跟函数原有的参数什么关系？
54. CSS继承属性有哪些？列举3个
55. 块级元素有哪些？
56. CSS position有哪些取值？
57. 一个div,position设置为absolute,再用JS设置div.style.position=""，问这时div的表现？怎么去判断？
58. 如何检测浏览器所支持的最小字体大小？
59. 怎么做JS代码Error统计？
60. 一张高清图片，怎么保证其在不同移动端设备上的显示效果？
61. html中一进入就一直页面缓冲不出来组件怎么办
62. 怎么使用纯css实现一个三角形
63. html不同页面之间怎么共享数据
64. 垃圾回收机制是怎么样
65. 一个5升瓶子和一个6升瓶子怎么装3升水
66. 为什么js是单线程？怎么解决
67. 如何定义私有字段
68. git add commit 区别 commit到哪？
69. 用过webpack吗？怎么用的？css文件
70. HTTP 如何标记缓存
71. etag和exprises 哪个用得比较多 为什么
72. 35分时针分针夹角几度
73. 实现一个input输入框，实现在一个arr数组查询命中和自动补齐效果
74. 实现一个函数，完成超过范围的两个大整数相加功能
75. diff算法，树的深搜广搜
76. 缓存机制，如何缓存图片
77. 非递归便利二叉树
78. web性能优化
79. 浏览器连接限制，编码怎么解决，http2.0
80. 网络安全, xss, csrf
81. 有一个数组，对这个数组按顺序进行异步处理，一个处理完才开始下一个，然后问用foreach行不行。
82. 介绍发一个Ajax请求的链路全过程。IP地址怎样获取？
83. 如何让一个cookie同时用于a.qq.com和b.qq.com？
84. 有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？
85. 快排原理，时间空间复杂度，为什么空间复杂度是log2n？
86. Vue响应式原理。
87. 介绍项目，说其中的难点。
88. 介绍归并排序原理。
89. 说一下nodejs的原理（？？？不会，只说了事件驱动balabala）
90. https（又是https）
91.  从海量十亿个数选最大的一百个，你有什么方法？
92.  除了Vue还会什么？
93.  React-router和路由的实现的方式有哪些？
94.  移动端的适配问题？字体大小一致？
95.  移动端的30ms点击延迟问题?如何解决？
96.  node和ES6规范的差别？
97.  module.exports和exports 的区别，与CommonJS的联系？
98.  export 和 export default 的区别？
99.  Canvas的性能如何优化？
100. JS的原型是什么？
101. webpack的底层实现原理，懒加载的配置
102. CSS雪碧图和Base64编码的选择？Base64编码原理？
103. get请求的url地址如何通过post方式发送？
104. 浏览器的缓存策略？
105. 将一个div容器移动到另外一个div容器的过程？
106. 实现一个原生的ajax封装？
107. 浏览器路由的实现方式有哪些?
108. 输入URL到内容完全展示出来的过程？
109. HTTPS和HTTP的原理和区别？
110. Webpack和Gulp的区别
111. URL请求的过程
112. 首页渲染问题如何优化, 前端的性能优化方式有哪些？
113. 网站首页白屏错误如何排查？实时监控？
114. 如何解决JS的回调地狱问题?
115. CSS的margin重叠问题如何解决？
116. mvvm  mvc；
117. 单页应用 多页应用的优缺点；
118. 前后分离 不分离 哪一个更安全 区别  页面的响应是前端还是后端；
119. typeScript；
120. this指针；
121. 原型链；
122. https；
123. 维持登录状态；
124. es6常用；
125. ccs3用过什么；
126. 浏览器怎么适配；
127. 你封装过什么组件；
128. js怎么优化；
129. 工程化。webpack；
130. webpack工作原理；
131. 和同事关系不好，怎么办；
132. 一个5升  一个6升  空瓶子  怎么弄出来2l水；
133. 上海高铁到杭州 杭州飞机到老家 现在高铁晚点了  怎么办  （今天必须回家）；
134. react生命周期
135. url的整个过程，越多越好；
136. 跨域的方式，越多越好；
137. web优化的方式，越多越好；
138. react生命周期，和vue比较，要求多说；
139. rsa算法，esa算法；
140. linux查看进程的命令；
141. 一个很大的数据集包括192.168.0.1 -24/32/30 给一个ip地址怎么知道在不在这个数据集中；
142. 给一亿个长度不一样的字符串，怎么判断一个随机长度的字符串在不在这个里面（字典树）；
143. 给一堆整数，怎么判断这个整数在不在这一堆数里面（位图）；
144. 一个表有姓名年龄课程，sql数据库找每个人的最高成绩，课程名，姓名。
145. 说一下url；
146. xss怎么预防；
147. http说一下；
148. get post区别；
149. tcp三次握手和四次分手，都有什么标志；
150. pv uv是啥；
151. h5用过什么；
152. xml json区别；
153. web优化；
154. mysql引擎；
155. 浏览器引擎有什么；
156. 页面渲染的过程；
157. http劫持怎么预防；
158. ngnix反向代理服务器

1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
…

【面经系列】腾讯面经

# 虚拟滚动技术
## 1. 插入几万个 DOM，如何实现页面不卡顿？（面试加分项）

1. 肯定不能一次性把几万个 DOM 全部插入，这样肯定会造成卡顿，所以解决问题的重点应该是如何分批次部分渲染 DOM。部分人应该可以想到通过 `requestAnimationFrame` 的方式去循环的插入 DOM，其实还有种方式去解决这个问题：**虚拟滚动**（virtualized scroller）。

2. 这种技术的原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容。


![滚动](../../img/vScroll.png)


3. 从上图中我们可以发现，即使列表很长，但是渲染的 DOM 元素永远只有那么几个，当我们滚动页面的时候就会实时去更新 DOM，这个技术就能顺利解决这发问题。如果你想了解更多的内容可以了解下这个 [react-virtualized](https://github.com/bvaughn/react-virtualized)。


【性能优化】其他技术

1. 插入几万个 DOM，如何实现页面不卡顿？（面试加分项）

【流行框架】Vue相关

2.3.4 vm._c是什么，render函数返回了什么？

3. Vue的整个实现流程源码解读？？？（总结点）

3.3 首次渲染，显示页面，且绑定依赖

3.4 为何要监听get, 直接监听set不行吗？

3.5 data属性变化，触发rerender函数

4. 说一下从使用jQuery和使用框架的区别？

9. vue的数据劫持以及操作数组的坑？

12. defineReactive的实现(响应式手写实现)?

12.3 vue 的双向绑定的原理是什么(常考)

15. 请详细说下你对 vue 生命周期的理解？

17.1 active-class 是哪个组件的属性？

17.4 懒加载（按需加载路由）（常考）

17.4.1 不进行页面按需加载引入方式

17.4.2 进行页面按需加载的引入方式

17.5 vue-router 有哪几种导航钩子?

18.1 vuex 是什么？怎么使用？哪种功能场景使用它？

18.6 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

18.9.1 使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

18.9.2  state 内部支持模块配置和模块嵌套，如何实现的？

18.9.3 在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

18.9.4 Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

18.9.5 调试时的"时空穿梭"功能是如何实现的？

19.1 自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

19.2 说出至少 4 种 vue 当中的指令和它的用法

20.1 axios 是什么？怎么使用？描述使用它实现登录功能的流程

20.2 axios与ajax, fetch的区别和优缺点？

【JS相关】ES6专题系列

1.如何搭建ES6的webpack开发环境？

3.class和JS普通构造函数的区别？

5.4 Es6中箭头函数与普通函数的区别？

6. 箭头函数和普通函数的8点区别？

# 百度面经系列
1. react和vue的区别
2. JS的数据类型
3. null和undefined的区别
4. ![]的结果
5. 闭包的使用场景
6. 微任务和宏任务
7. 实现JSONP
8. 手写节流
9. 路由两种模式使用场景
10. 数组和链表区别
11. 链表的使用场景
12. 实现点击按钮输出input中字符串的反转
13. PWA
14. 跨域
15. 缓存策略
16. 缓存位置
17. 前端安全
18. 白屏的处理
19. 按需加载
20. HTTP
21. 闭包
22. websocket
23. socket
24. 写一个函数判断页面两个矩形是否相交
25. 介绍项目，介绍项目的难点与创新点
26. 前端项目打包方式
27. 项目前端方面引用技术
28. React的生命周期
29. React的虚拟DOM
30. 事件循环（EventLoop）
31. 解构赋值
32. 箭头函数
33. Promise（写一个promise的实例）
34. 写Promise.all的实现源码
35. 跨域及实现的方式，及比较
36. 同源策略在浏览器具体的表现
37. 回流与重绘，以及如何避免
38. 浏览器的缓存机制
39. 介绍强缓存与协商缓存
40. 对前端工程化方面的理解
41. 介绍一个你自己的项目？
42. 说一下Vue的缺点有哪些？
43. Eventloop循环说一下？
44. Node中的Worker说一下？Node中如何创建多个线程？Node中如何实现开启守护进程？
45. 说一下Express的架构和实现原理？
46. 说一下中间件的实现原理？
47. Express和Koa的区别呢？
48. 说一下Diff算法的本质？abc, acb是如何改变的呢？
49. 说一下红黑树和他的应用场景？
50. Nginx的应用场景说一下？
51. app.use和app.get的区别？
52. node的路由实现原理？
53. Node如何读取大数据量下的数据？
54. 介绍一下项目，项目中的用到的一些技术
55. 移动端的性能优化，rem的原理
56. 点透事件：H5开发中可能遇到的特有的问题
57. 项目后台用的技术栈是什么
58. 跨域问题
59. 常见的http状态码
60. $documnent.ready()  VS  window.onload() 两种方式的区别（哪个先执行）
61. ES6的新特性
62. 箭头函数与普通函数的区别
63. let与var的区别
64. 对vue熟悉吗？（不能算是熟悉，所以vue是硬伤）
65. vue的生命周期
66. 对闭包的理解
68. 常见的git命令
69. 项目中所有人都在master分支上开发吗？还是都有自己的分支？
70. http状态码
71. 输入一个URL的过程
72. es6，promise讲一下
73. 冒泡算法、二分查找、快排，以及时间复杂度、最坏情况
74. 同源策略
75. 跨域
76. xss攻击和预防
77. import和link的区别
78. 水平居中的方式，包括块和文本
79. css3的新特性，说一下单行文本溢出和多行文本溢出
80. less了解吗
81. 设计模式，实现一个登录框，不让用户重复点击弹出多个登录框（使用单例模式）
82. 原型链
83. 优化方法
84. git提交冲突如何解决
85. 实现一个repeat(str,count)函数，str是一个字符串，count是重复的次数。
86. 三个盒子里有一块糖，你挑了一个盒子，然后拿走一个空盒子，问是否更换盒子？
87. 一个为n的台阶，小明可以一次走一步、两步或者五步，问一共几种走法？

【面经系列】百度面经

# 组件化和React
## 1. 说一下使用jQuery和使用框架的区别？
1. 数据和视图的分离，（jQuery数据和视图混在一起，代码耦合）-------开放封闭原则
2. 以数据驱动视图（只关注数据变化，DOM操作被封装）

## 2.说一下对MVVM的理解？
1. 先说MVC：Model, View, Controller（主要用于后端）
2. MVVM: Model, View, ViewModel[中间连接者，连接view和和model]
3. 关于ViewModel

#### MVVM在React中对应关系
________________________________________
+ 1） M(odel)：对应组件的方法或生命周期函数中实现的业务逻辑和this.state中保存的本地数据，如果React集成了redux +react-redux，那么组件中的业务逻辑和本地数据可以完全被解耦出来单独存放当做M层，如业务逻辑放在Reducer和Action中。
+ 2） V(iew)-M(odel)：对应组件中的JSX，它实质上是Virtual DOM的语法糖。React负责维护 Virtual DOM以及对其进行diff运算，而React-dom 会把Virtual DOM渲染成浏览器中的真实DOM
+ 3） View：对应框架在浏览器中基于虚拟DOM生成的真实DOM（并不需要我们自己书写）以及我们书写的CSS
+ 4）绑定器：对应JSX中的命令以及绑定的数据，如className={ this.props.xxx }、{this.props.xxx}等等

#### MVVM的双绑和单绑区别
________________________________________
+ 1） 一般，只有UI表单控件才存在双向数据绑定，非UI表单控件只有单向数据绑定。
+ 2） 单向数据绑定是指：M的变化可以自动更新到ViewModel，但ViewModel的变化需要手动更新到M（通过给表单控件设置事件监听）
+ 3） 双向数据绑定是指念：M的变化可以自动更新到ViewModel，ViewModel的变化也可以自动更新到M
+ 4） 双向绑定 = 单向绑定 + UI事件监听。双向和单向只不过是框架封装程度上的差异，本质上两者是可以相互转换的。
+ 5） 优缺点：在表单交互较多的情况下，单向数据绑定的优点是数据更易于跟踪管理和维护，缺点是代码量较多比较啰嗦，双向数据绑定的优缺点和单向绑定正好相反。

## 3.说一下对组件化的理解？
1. 组件的封装
   - a. 视图的封装
   - b. 数据的封装
   - c. 变化逻辑（数据驱动视图变化，setState）
2. 组件的复用
   - a. 使用props来传递数据（同一个组件传递不同飞数据）
   - b. 组件的复用（同一个组件使用不同的数据）

## 4.JSX的本质是什么？
> [!NOTE]
> 1. JSX语法（标签、JS表达式，判断，循环，事件绑定）
> 2. JSX是语法糖, 需要被解析成JS才能运行（h函数的使用）
> 3. JSX是独立的标准，可以被其他项目使用

```js
   // 下面的代码实际执行流程：
    // JSX 代码
    const user = {
        firstName : 'xiugang',
        lastName : 'zhang'
    }
    var profile = <div>
        <img src="a.jpg" className='profile'/>
        <h3>{[user.firstName, user.lastName].join(' ')}</h3>
    </div>

    // 解析结果(重点掌握)，关键点：是使用了一个React.createElement来创建节点的
    var profile = React.createElement('div', null, [
        React.createElement('img', {src : 'a.jpg', className : 'profile'}),
        React.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])
])

/* @jsx h*/
// 1. 使用插件：cnpm install babel-plugin-transform-react-jsx
// 2. 开始编译JSX： babel --plugins transform-react-jsx demo.js
// 3. 可以自定义React.createElement变为一个h函数： /* @jsx h*/

```

## 5.JSX和VDOM的关系？
### 5.1 分析为何需要VDOM
1. VDOM是React初次推广开来的，结合JSX
2. JSX就是模板渲染成HTML
3. 初次渲染 + 修改state之后的re-render
4. 正好符合VDOM的应用场景
### 5.2 React.createElement和h函数
### 5.3 何时patch？
1. 初次渲染----
    ```js
      ReactDOM.render(<App/>, container)
    ```
2. 会触发patch(container, vnode)函数
3. re-render-- setState
4. 会触发patch(vNode, newVNode)
### 5.4	自定义组件的解析？

#### 5.4.1 自定义组件的解析（TODOInput和TODOList组件的解析）
1. ‘div’可以直接渲染<div>即可，vdom可以实现
2. TodoInput和TodoList是自定义组件（class），vdom不认识
3. 因此Input和List定义的时候必须声明render函数
4. 根据props属性初始化实例，然后执行实例的render函数
5. render函数返回的还是vnode的对象
  
```js
React.createElement(TodoInput, { addTitle: this.addTitle.bind(this) }),
    React.createElement(TodoList, { data: this.state.list })

    // 上面的代码相当于是先去创建一个TodoList实例对象
    var list = new TodoList({ data: this.state.list });
    // 然后再去调用这个函数的render方法（返回的是一个JSX，然后对当前的这个JSX渲染为VDOM）
    var vnode = list.render();
```

## 6.说一下setState的过程？
```js
    // 1. 每个组件实例，都有renderComponent方法
    class Component {
        constructor(){

        }

        // 每个组件都有这个函数
        renderComponent(){
            // 获取上一次的vNode
            const prevVnode = this._vnode;

            // render函数只需之后，得到的还是一个新的node
            const newVnode = this.render();

            // 开始对比，找出差异
            patch(prevVnode, newVnode);

            // 更新node为最新的node
            this._vnode = newVnode;
        }
    }

    // 2. 执行renderComponent会重新执行实例的render方法
    // 3. render函数返回newVnode，然后拿到prevNode（也就是上次的vnode）----多次执行setState视图最终也只会渲染一次
    // 4. 执行patch（preVnode, newVNode）
```
> [!NOTE]
> 1. setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state很后放入状态队列，而不会立即更新this.state，队列机制可以高效地批量更新state。如果不通过setState而直接修改this.state的值	
> 2. 那么该state将不会被放入状态队列中。当下次调用setState并对状态队列进行合并时，就会忽略之前修改的state，造成不可预知的错误
> 3. 同时，也利用了队列机制实现了setState的异步更新，避免了频繁的重复更新state


## 7.7.	阐述自己对React和Vue的认识？
1. 两者的本质区别：
  + vue本质是MVVM框架，由MVC发展而来
  + React本质是前端组件化框架，由后端组件化发展而来
  + 并不妨碍两者都能实现相同的功能
2. 模板的区别
  + vue-使用模板（最初由angular提出）
  + React-使用JSX
  + 模板语法上，我更倾向于JSX
  + 模板分离上，我更倾向于Vue
  + 模板应该和JS逻辑分离
  + “开放封闭原则”
3. 组件化的区别
  + React本身就是组件化，没有组件哈就不是React
  + vue也支持组件化，不过是在MVVM上的扩展
  + 查阅vue组件化的文档
  + 组件化更适合选择React
4. 两者的共同点
  + 都支持组件化
  + 都是数据驱动视图
5. 如何选择
  + 国内使用，首推vue。文档更易读，易学，社区够大
  + 如果团队水平较高，推荐使用React，组件化和JSX



【JS相关】组件化和React

1. 说一下使用jQuery和使用框架的区别？

5.4.1 自定义组件的解析（TODOInput和TODOList组件的解析）

7.7. 阐述自己对React和Vue的认识？