React学习---初识React

React学习—初识React及项目搭建

一、概述

1.React简介

​ React是Facebook开发的一款js库，也就是js插件一个非常大的插件，Facebook为什么要创造React呢，主要为了解决什么问题，通过这个又是如何解决的？

Facebook为什么要创造React呢

​ Facebook 认为 MVC 模式会使他们的项目变得更加复杂，致使代码变得脆弱和不可预 测，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。Facebook公司后期改名为meta。

	React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框 架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这 套东西很好用，就在 2013 年 5 月开源了

主要是为了解决什么问题？

​ 构建那些数据会随时间改变的大型应用（应用越大要管理的数据就越多，数据越多如果数据会随时间而改变，项目是基于组件开发的而组件与组件之间的关系会非常复杂，组件和组件之间如果需要共享数据而且共享的数据随时都在变数据量还非常大，还不能有卡顿，而react就可以解决性能问题：当数据变的时候及时更新以高效的方式更新）

2.React特点

1. 虚拟DOM

   ​ 虚拟DOM就是保存在计算机内存中的一个对象，就是用js内存中的对象来模拟页面中的dom节点。虚拟DOM作用就是避免我们直接操作DOM节点而是操作数据，数据的改变是映射到虚拟DOM身上。

   ​ 我们以前操作 dom 的方式是通过 document.getElementById()的方式，这样的过程实际上是先去读取 html 的 dom 结构，将结构转换成变量，再进行操作而 reactjs 定义了一套变量形式的 dom 模型，一切操作和换算直接在变量中，这样减少了 操作真实 dom，性能真实相当的高，和主流 MVC 框架有本质的区别，并不和 dom 打交道

2. 组件系统（组件化）

   ​ react 最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件

   ​ component 那么什么是组件呢？组件指的就是同时包含了 html、css、js、image 元素的聚合体使用 react 开发的核心就是将页面拆分成若干个组件，并且 react 一个组件中同时耦合了 css、js、image，这种模式整个颠覆了过去的传统的方法

3. 单向数据流

   ​ 如果你有多个组件，多个组件之间有嵌套关系数据应该是由外向内传入，尽量不要有从内向外的流向这样会使数据流向发生混乱。

   ​ 其实 reactjs 的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端 的数据和前端页面绑定好，开发者只关注实现业务就行了

4. JSX

   ​ 在 vue 中，我们使用 render 函数来构建组件的 dom 结构性能较高，因为省去了 查找和编译模板的过程，但是在 render 中利用 createElement 创建结构的时候代码可读性较低，较为复杂，此时可以利用 jsx 语法来在 render 中创建 dom，解决这个问 题，但是前提是需要使用工具来编译 jsx

   ​ render函数和template一样都是创建html模板的，但是有些场景中用template实现起来代码冗长，这时候就可以用render函数

   import Vue from 'vue'
   import App from './App'
   
   Vue.config.productionTip = false
   
   new Vue({
         
         
     el: '#app',
     render: h => h(App)
   })
   

   ​ render函数即渲染函数，它的参数createElement也是个函数。上边的代码中 render: h => h(App) ，这是 ES6的箭头函数的写法，可以把 h 当作 createElement 的别名。

   render: function (createElement) {
         
         
       return createElement(App)
   }
   

   这些问题是如何解决的 - React 的主要原理

   ​ 传统的 web 应用，操作 DOM 一般是直接更新操作的，但是我们知道 DOM 更新通常 是比较昂贵的。而 React 为了尽可能减少对 DOM 的操作，提供了一种不同的而又强大的 方式来更新 DOM，代替直接的 DOM 操作。就是 Virtual DOM,一个轻量级的虚拟的 DOM， 就是 React 抽象出来的一个对象，描述 dom 应该什么样子的，应该如何呈现。通过这个 Virtual DOM 去更新真实的 DOM，由这个 Virtual DOM 管理真实 DOM 的更新。

   ​ 为什么通过这多一层的 Virtual DOM 操作就能更快呢？ 这是因为 React 有个 diff 算 法，更新 Virtual DOM 并不保证马上影响真实的 DOM，React 会等到事件循环结束，然后 利用这个 diff 算法，通过当前新的 dom 表述与之前的作比较，计算出用最小的步骤更新真实的 DOM。

   ​ 特点可以概括为: 虚拟 DOM, diff 算法

   ​ 在 react 16 之后发布的一种 react 核心算法，React Fiber 是对核心算法的一次重新 实现(官网说法)。之前用的是 diff 算法。在之前 React 中，更新过程是同步的，这可能会 导致性能问题。当 React 决定要加载或者更新组件树时，会做很多事，比如调用各个组 件的生命周期函数，计算和比对 Virtual DOM，最后更新 DOM 树，这整个过程是同步进 行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为 JavaScript 单线程 的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿。

   ​ React Fiber 的方法其实很简单——分片。把一个耗时长的任务（这里的任务指的是单个任务）分成很多小片，每一 个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他 任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

   总结：diff算法做了什么，它会对比虚拟DOM和真实DOM，先对比整颗树整颗树没有变化再对比里面的组件，组件没有变化就对比组件内的dom节点，如果节点有变化就找到有变化的位置，哪里变化了就更新哪里，以此来用最小的代价完成页面更新，新的虚拟DOM还会和旧的虚拟DOM进行对比 ，这个更新是异步的对比完之后生成一个异步更新函数会放入到任务队列中，根据事件循环每隔一次循环它会从任务队列中取一个更新函数来完成更新，由于事件循环速度非常快效率非常高我们就感觉不到放置的过程。

   React Fiber 算法解决的问题是单个任务耗时很长时会造成卡顿问题。（vue中没有这个思想）

3.React与传统MVC的关系

MVC模式

​ mvc是一种使用mvc（model view controller 模型-视图-控制器）设计创建web应用程序的模式

​ MVC 是包括 view 视图层、controller 控制层、model 数据层。各部分之间的通信都是单向的。

​ model（模型）表示应用程序核心数据（比如数据记录列表）

​ view（视图）负责显示数据

​ controller（控制器）处理输入（写入数据库记录）（react 主要放在控制器里，适合 开发中大型项目）

​ View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈

​ 轻量级的视图层库！A JavaScript library for building user interfacesReact

​ react 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React 并不非常认可 MVC 开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就 成了我们的页面。

4.vscode插件的安装

Reactjs code snippets

5.React初识

5.1React.createElement

React.createElement( type, [props], [...children] )

第一个参数是必填，传入的是似 HTML 标签名称，eg: ul, li, div

第二个参数是选填，表示的是属性，eg: className

第三个参数是选填, 子节点，eg: 要显示的文本内容, 其他标签

5.2 ReactDOM.render

ReactDOM.render( template, container,[ callback])

第一个参数: 模版的渲染内容(HTML 形式)

第二个参数: 模板插入的 DOM 节点

第三个参数, 选填: 渲染后的回调(一般用不到,可以省略)

5.3 渲染 h1 节点

const divVD = React.createElement('h1', { title: 'hello react' }, 'Hello 
React！！！')
ReactDOM.render(divVD, document.getElementById('app'))

6.React原始语法

<body>
    <div id="app"></div>

    <!-- react.xx.js会给Window对象添加一个React属性 -->
    <!-- React属性中包含了React的所有核心语法，负责定义组件 -->
    <script src="./react.16.8.6.js"></script>
    <!-- react-dom.xx.js会给Window对象添加一个ReactDOM属性 -->
    <!-- ReactDOM属性 中包含了将React属性定义的组件渲染到页面的所有的核心算法 -->
    <script src="./react-dom.16.8.6.js"></script>

    <script>
        // React.createElement()创建React元素(组件)
        var span = React.createElement('span', {
    
    }, '!!!!')
        var h1 = React.createElement('h1', {
    
     id: 'title', className: 't1 t2' }, span)
        // ReactDOM.render()渲染React元素到页面
        ReactDOM.render(h1, document.querySelector('#app'));
    </script>
</body>

 <div id="app"></div>

    <!-- react.xx.js会给Window对象添加一个React属性 -->
    <!-- React属性中包含了React的所有核心语法，负责定义组件 -->
    <script src="./react.16.8.6.js"></script>
    <!-- react-dom.xx.js会给Window对象添加一个ReactDOM属性 -->
    <!-- ReactDOM属性 中包含了将React属性定义的组件渲染到页面的所有的核心算法 -->
    <script src="./react-dom.16.8.6.js"></script>

    <script>
        // React.createElement()创建React元素(组件)
        // var span = React.createElement('span', {}, '!!!!')
        // var h1 = React.createElement('h1', { id: 'title', className: 't1 t2' }, span)
        // ReactDOM.render()渲染React元素到页面
        // ReactDOM.render(h1, document.querySelector('#app'));

        // 使用jsx语法写组件模板
        // var h1 = <h1>学习reactjs！</h1>//报错，要将代码转化
        // jsx语法的特点：可以直接在js代码中写标签，最终执行时需要转换为js才不会报错
        // babel插件可以将无法直接在浏览器中运行的jsx语法转换为js
        // 自己用原生的写会很费劲，所有需要脚手架，脚手架中会提供好多个插件
        // var h1 = <h1 id="title" class="t1 t2">学习reactjs！</h1>最终会转换为React.createElement('h1', { id: 'title', className: 't1 t2' }, span)
        var h1 = <h1 id="title" class="t1 t2">学习reactjs!</h1>
		//之所以这么写是因为直观高效
        
    </script>

自己用原生的写会很费劲，所有需要脚手架，脚手架中会提供好多个插件

原始语法写代码效率低，jsx可以改善这一缺点

用jsx语法写组件每一个标签最终会转换为什么，转换为React.createElement函数调用

7.严格模式

 /*  <React.StrictMode> */
    <App />
  /* </React.StrictMode> */

React.StrictMode严格模式组件会使组件默认进行两次更新是为了将组件中存在的小问题放大，也可以关闭严格模式

二、项目构建

1.搭建脚手架环境步骤

1. 全局安装create-react-app(又可以简称为cra，用create-react-app脚手架创建的项目又称为是基于cra脚手架创建的项目)

   安装命令：npm i create-react-app –g

2. 打印版本号

   create-react-app --version

3. 使用create-react-app命令创建项目

   create-react-app 项目名称

4. 进入项目目录

   cd 项目名

5. 启动项目

   npm start

2.目录结构

app

node_modules

public

src

3.配置@路径别名，让脚手架工具能识别@

​ CRA(create-react-app) 将所有工程化配置，都隐藏在了 react-scripts 包中，所以， 项目中看不到任何配置信息或者是配置文件。

​ 如果要修改 CRA 的默认配置，有以下几种方案：

1. 【推荐】通过第三方库来修改，比如，@craco/craco
2. 通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中（注意：该 操作不可逆！！！）

craco的使用步骤

1. 安装包 npm i -D @craco/craco

2. 在项目根目录下，创建配置文件：craco.config.js。在配置文件中就可以做自定义的 修改了。craco.config.js 中配置路径别名

   const path = require('path')
   module.exports = {
         
         
    webpack: {
         
         
    alias: {
         
         
    '@': path.join(__dirname, 'src')
    }
    }
   }
   

3. 修改 package.json 中的脚本命令

   package.json 中：将 start/build/test 三个命令修改为 craco 方式

   “scripts”: {

   ​ “start”: “craco start”,

   ​ “build”: “craco build”,

   ​ “test”: “craco test”,

   ​ “eject”: “react-scripts eject”

   ​ },

4. 重启项目，让配置生效

5. 在代码中，就可以通过 @ 来表示 src 目录的绝对路径