React的学习（一）

最新推荐文章于 2024-09-12 13:33:30 发布

东听南阁吹西雨

最新推荐文章于 2024-09-12 13:33:30 发布

阅读量160

点赞数

文章标签： React 学习

本文链接：https://blog.csdn.net/axbiy/article/details/103204471

版权

一、React是什么

React是一个为数据提供渲染为HTML视图的开源JavaScript库【轻量级的视图层框架】
React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染【组件系统】
React为程序员提供了一种子组件不能直接影响外层组件的模型【单向数据流】
数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离【前后端分离的单页面应用】

二、创建React的原因

当项目庞大时，MVC设计模式每添加一项新功能或特性时，系统的复杂成级数的增长

三、React特点

1、Virtual DOM 即VDOM(虚拟DOM)

2、Diff算法

React 16版本之后为React Filber 算法(将耗时很长的任务分片执行，使唯一线程不会被独占)

3、组件系统

4、单向数据流

5、JSX语法

6、函数式编程

四、React流行脚手架（国内）

1、CRA（create-react-app）

I、简介

React应用程序快速创建脚手架：底层：wbpack

创作团队：Facebook

II、全局安装

方法一：

npm i creat-react-app -g

creat-react-app app名字

cd app名字

yarn start

方法二：

cnpm i create-react-app -g

create-react-app app名字

cd app名字

yarn start

III、npx创建CRA项目

npx create-react-app app名字

cd app名字

yarn start

IV、CRA命令

yarn start --表示开发环境下运行整个目录

yarn build --表示生产环境打包，进行变异、压缩等

yarn eject --配置文件抽离，将项目的webpack配置和项目运行文件从node_modules的react-script中抽离到项目根目录（抽离配置文件不可逆，抽离配置文件后会报错，解决方法：缺少什么文件单独安装什么文件 —yarn add 文件名)

V、CRA安装的主要的三个包

react：react顶级库，他为我们提供了使用react的api和jsx的支持

react-dom：解析组件，然后将组件渲染为真实dom，插入到页面

react-scripts: webpack配置文件，主要作用是为项目启动和配置做支持

2、DVA

I、名字由来

守望先锋（>_<）

II、DVA是什么

DVA是一个轻量级的应用框架

III、开发团队

支付宝开发团队

IV、DVA的应用创建

npm install dva-cli -g

dva new app名字

cd app名字

yarn start

3、UMI

I、介绍

umi是一个可插拔的企业级react应用框架

umi是蚂蚁金服的底层前端框架，已直接或间接地服务了600+应用

II、特性

📦 开箱即用，内置 react、react-router 等
🏈 类 next.js 且功能完备的路由约定，同时支持配置的路由方式
🎉 完善的插件体系，覆盖从源码到构建产物的每个生命周期
🚀 高性能，通过插件支持 PWA、以路由为单元的 code splitting 等
💈 支持静态页面导出，适配各种环境，比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
🚄 开发启动快，支持一键开启 dll 等
🐠 一键兼容到 IE9，基于 umi-plugin-polyfills
🍁 完善的 TypeScript 支持，包括 d.ts 定义和 umi test
🌴 与 dva 数据流的深入融合，支持 duck directory、model 的自动加载、code splitting 等等

III、开发团队

蚂蚁金服开发团队

IV、安装Umi

npm install umi -g

mkdir app名字（创建文件夹）

cd app名字

umi g page index

umi gpage user

umi dev

4、直接使用脚手架，而不用cdn进行HTML文件的编写

React使用jsx(全称JavaScript + XML，表示在js中书协dom结构，是对js语法的扩展),浏览器不能直接使用，所以的借助webpack编译，将jsx->js才能用

vue/react都写jsx的原因：对象模型去模拟dom结构

四、React元素

1、元素是构成React应用的最小砖块

2、元素描述了你在屏幕上想看的内容

元素举例:

		const element = <h1>hello,word</h1>;

与浏览器的DOM元素不同，React元素是创建开销极小的普通对象。React DOM会负责更新DOM来与React元素保持一致。

React元素实际创建：

		const element = {
            tag:'div',
            attr:{
                classname:'box'
            },
            content:[
                {
                    tag:'h1',
                    attr:{},
                    content:'hello,word'
                }
            ]
        }