1、React库核心思想的理解

1.1 mvvm模式的理解

:::info

  • Vue的工作原理 mvvm模式（model、view、viewModel）
    • model：模型—数据交互的地方、与视图的交互、与服务端的交互都要依靠这个模型
    • view：视图—所有的页面数据都是以视图的形式进行展示
    • viewModel：视图模型—负责视图和模型数据的交互，监听dom对象和数据绑定进行交互
    • 原理：双向数据绑定原理 :::

:::info react的工作原理：

  • react的工作原理 mvc模式（model、view、control控制器）

原理：单向数据绑定原理、数据更新—调用内部的方法、重新高效的渲染视图、自动渲染视图—开发者通知视图渲染、重新更新页面

  • react完成的工作：监听数据的更新、当数据发生更新后（特定的方法）、会主动帮助我们重新去渲染视图、dom diff算法、将虚拟dom对象变为真实的dom对象 :::

:::info Vue的工作原理：
视图更新并没有改变数据（mvc是单向的），如果需要数据的更新，则需要自己在controll层中单独的处理
使用Vue/React让我们告别了操作dom的时代，都是基于数据驱动，数据的改变驱动视图的更新。
React比Vue少实现了v-model具备的功能。
Vue是渐进式框架 vue/vuex/vue-router/axios(fetch)/UI框架(element-ui) :::

1.2 React库的特点

  • react是用于构建用户界面的javascript库(library)
  • react、react-dom（react-native）移动端的框架
  • 组件/jsx语法/dom diff/事件、组件
  • react-router-dom: hash/history模式
  • redux: react-redux、dva、redux-saga、mobx 用来作状态管理库
  • axios/fetch 发送网络请求
  • antd UI框架
  • 开发模式：工程化、组件化、模块化 以脚手架的模式进行开发 create-react-app

2、React脚手架

特点: react是mvc框架（model view controler）

  1. // 全局安装脚手架
  2. $ npm install -g create-react-app  
  4. // 基于脚手架快速构建工程化的项目
  6. // 创建项目 项目名 如果电脑上安装了yarn 默认基于yarn进行安装
  7. $ create-react-app projectName
  9. 查看脚手架的版本 不用进行过多的选择
  10. $ create-react-app --version

不想安装在全局，可以基于npx一步到位(npm 5.0版本自带的npmx 在局部进行安装)

  1. // 创建项目
  2. $ npx create-react-app my-app
  4. // 进入项目
  5. $ cd my-app
  7. // 启动项目
  8. $ npm start or yarn start

2.1 脚手架创建的项目目录

目录结构分析：

  • node_modules 项目所有依赖的模块
  • public
    • index.html SPA单页面应用中，各组件最后合并渲染完成的结果都会放入到页面的#root盒子中呈现
    • xxx.html MPA/SPA 这里存放的是最后编译页面的模板
    • 我们还可以在此处放一些公共资源，把这些资源直接基于src/link的方式调入到页面模板中，而不是基于webpac最后合并在一起（不建议：但是项目中可能存在一些模块不支持commonjs/es6 modules规范，此时我们只能在这里直接引用使用了）

  • src 整个项目的大部分源码都在此目录下面

    • index.js 项目的入口文件 webpack从这个文件开始导入打包（MPA需要创建多个入口文件）
      1. import React from 'react' // react核心库 核心语法
      2. import reactDOM from 'react-dom' // 构建web页面的核心库

  • store redux公共状态管理

  • api 数据处理
  • assets 存储公共资源的
  • routes 进行路由管理
  • utils 公共的工具类方法
  • components 公共的组件
  • …..其余的相关数据
  • package.json 项目上线所依赖的库

2.2 默认的配置清单

  • 生产依赖项
    • react框架的核心，提供了状态、属性、组件、生命周期
    • react-dom 将jsx语法渲染为真实dom, 最后显示在浏览器中
    • react-scripts 包含了当工程化项目webpack配置的东西 打包的相关命令（嫌弃把webpack放置于西安蒙古中，显得太繁琐，脚手架把所有的webpack命令的配置项和相关的依赖都隐藏到node_modules里面，react-scripts这个react脚本执行命令，会通知webpack打包编译）
  • scripts 当前项可执行的脚本命令（$ yarn start/build/eject） ```bash // 开发环境、启动项目（默认会基于webpack-dev-serve创建一个服务来随时编译和渲染开发的内容）

    yarn start

// 生产环境下的项目进行编译、压缩、打包，然后生成压缩文件放到build文件目录下（进行服务器的部署）

yarn build

// 将所有隐藏在node_modules中的webpack配置项都暴露出来（方便自己根据项目需求，二次更改webpack配置）这个方法是不可逆 一旦将我们的配置选项弹射出来之后 就无法回复原始的配置

yarn eject

```

2.3 yarn eject 暴露webpack相关的配置文件

  • babel-preset-react-app：解析jsx语法，将jsx的语法解析为虚拟的dom节点
  • scripts配置文件
    • start.js —> yarn start 编译
    • build.js —> yarn build 打包
  • config 配置文件
    • 这里存储的就是webpack的配置项

3、React的核心思想

react的核心思想： 组件化和模块化的思想。
原因：各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦的来回查找某个dom元素，然后操作dom去更改UI。