React.js基础知识总结一
React是什么?
React是FaceBook(脸书)公司研发的一款JS框架(MVC)
React是一款框架:具备自己开发的独立思想(MVC:Model View Controller)
-> 划分组件开发
-> 基于路由的SPA单页面开发
-> 基于ES6来编写代码(最后部署上线的时候,我们需要把ES6编译成ES5 =>基于Babel来完成编译)
-> 可能用到Less/Sass等,我们也需要使用对应的插件把他们进行预编译
-> 最后为了优化性能(减少HTTP请求次数),我们需要把JS或者CSS进行合并压缩
-> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
React.js怎么运行(一般不会自己配置WebPack,太麻烦了)
一般需要使用官方脚手架
1、安装 npm i create-react-app -g 安装这个就可以命令安装项目了
2、使用:creact-react-app 【项目名称】
脚手架生成目录主要内容
node_modules 当前项目中依赖的包都安装在这里
.bin 本地项目中可执行命令,在package.json的scripts中配置对应的脚本即可(其中有一个就是:react-scripts命令)
public 存放的是当前项目的HTML页面(单页面应用放一个index.html即可,多页面根据自己需求放置需要的页面)
在REACT框架中,所有的逻辑都是在JS中完成的(包括页面结构的创建),如果想给当前的页面导入一些CSS样式或者IMG图片等内容,我们有两种方式:
1.在JS中基于ES6 Module模块规范,使用import导入,这样webpack在编译合并JS的时候,会把导入的资源文件等插入到页面的结构中(绝对不能在JS管控的结构中通过相对目录./或者…/,导入资源,因为在webpack编译的时候,地址就不在是之前的相对地址了)
2.如果不想在JS中导入(JS中导入的资源最后都会基于WEBPACK编译),我们也可以把资源手动的在HTML中导入,但是HTML最后也要基于WEBPACK编译,导入的地址也不建议写相对地址,而是使用 %PUBLIC_URL% 写成绝对地址
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
src 项目结构中最主要的目录,因为后期所有的JS、路由、组件等都是放到这里面(包括需要编写的CSS或者图片等)
index.js 是当前项目的入口文件
.gitignore Git提交时候的忽略提交文件配置项
package.json 当前项目的配置清单
“dependencies”: {
“react”: “^16.4.1”,
“react-dom”: “^16.4.1”,
“react-scripts”: “1.1.4”
}
基于脚手架生成工程目录,自动帮我们安装了三个模块:react/react-dom/react-scripts
react-scripts集成了webpack需要的内容
->Babel一套
->CSS处理的一套
->eslint一套
->webpack一套
->其它的
有sass css 处理器,最新版本有 的处理内容(项目中使用less,我们需要自己额外的安装)
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test --env=jsdom”,
“eject”: “react-scripts eject”
}
可执行的脚本“$ npm run start / $ yarn start”
start:开发环境下,基于webpack编译处理,最后可以预览当前开发的项目成果(在webpack中安装了webpack-dev-server插件,基于这个插件会自动创建一个WEB服务[端口号默认是3000],webpack会帮我们自动打开浏览器,并且展示我们的页面,并且能够监听我们代码的改变,如果代码改变了,webpack会自动重新编译,并且刷新浏览器来完成重新渲染)
build:项目需要部署到服务器上,我们先执行 yarn build,把项目整体编译打包(完成后会在项目中生成一个build文件夹,这个文件夹中包含了所有编译后的内容,我们把它上传到服务器即可);而且在服务上进行部署的时候,不需要安装任何模块了(因为webpack已经把需要的内容都打包到一个JS中了
React脚手架的深入剖析
create-react-app脚手架为了让结构目录清晰,把安装的webpack及配置文件都集成在了react-scripts模块中,放到了node_modules中
但是真实项目中,我们需要在脚手架默认安装的基础上,额外安装一些我们需要的模块,例如:react-router-dom/axios… 再比如:less/less-loader…
情况一:如果我们安装其它的组件,但是安装成功后不需要修改webpack的配置项,此时我们直接的安装,并且调取使用即可
情况二:我们安装的插件是基于webpack处理的,也就是需要把安装的模块配置到webpack中(重新修改webpack配置项了)
=>首先需要把隐藏到node_modules中的配置项暴露到项目中
> $ yarn eject
首先会提示确认是否执行eject操作,这个操作是不可逆转的,一但暴露出来配置项,就无法在隐藏回去了
如果当前的项目基于GIT管理,在执行eject的时候,如果还有没有提交到历史的区的内容,需要先提交到历史区,然后在eject才可以,否则报错:This git repository has untracked files or uncommitted changes…
=>再去修改对应的配置项即可
一但暴露后,项目目录中多了两个文件夹:
config 存放的是webpack的配置文件
webpack.config.js 开发环境下的配置项(yarn start)
scripts 存放的是可执行脚本的JS文件
start.js yarn start执行的就是这个JS
build.js yarn build执行的就是这个JS
package.json中的内容也改了
【举个栗子:需要配置LESS,下面的文章总结的很好,我就不再写一遍了】
https://blog.csdn.net/qq_25520603/article/details/90206399
我们预览项目的时候,也是先基于webpack编译,把编译后的内容放到浏览器中运行,所以如果项目中使用了less,我们需要修改webpack配置项,在配置项中加入less的编译工作,这样后期预览项目,首先基于webpack把less编译为css,然后在呈现在页面中.
$ set HTTPS=true&&npm start 开启HTTPS协议模式(设置环境变量HTTPS的值)
$ set PORT=63341 修改端口号
====================================
react & react-dom
【渐进式框架】
一种最流行的框架设计思想,一般框架中都包含很多内容,这样导致框架的体积过于臃肿,拖慢加载的速度。真实项目中,我们使用一个框架,不一定用到所有的功能,此时我们应该把框架的功能进行拆分,用户想用什么,让其自己自由组合即可。
全家桶:渐进式框架N多部分的组合
VUE全家桶:vue-cli/vue/vue-router/vuex/axios(fetch)/vue element(vant)
REACT全家桶:create-react-app/react/react-dom/react-router/redux/react-redux/axios/ant/dva/saga/mobx…
- react:REACT框架的核心部分,提供了Component类可以供我们进行组件开发,提供了钩子函数(生命周期函数:所有的生命周期函数都是基于回调函数完成的)
- react-dom:把JSX语法(REACT独有的语法)渲染为真实DOM(能够放到页面中展示的结构都叫做真实的DOM)的组件
ReactDOM.render(JSX,CONTAINER,CALLBACK)
- ReactDOM.render([JSX],[CONTAINER],[CALLBACK]):把JSX元素渲染到页面中
- JSX:REACT虚拟元素变为真实的dom
- CONTAINER:容器,我们想把元素放到页面中的哪个容器中
- CALLBACK:当把内容放到页面中呈现触发的回调函数
- JSX:REACT独有的语法 JAVASCRIPT+XML(HTML)
- 和我们之前自己拼接的HTML字符串类似,都是把HTML结构代码和JS代码或者数据混合在一起了,但是它不是字符串
- 1.不建议我们把JSX直接渲染到BODY中,而是放在自己创建一个容器中,一般我们都放在一个ID为ROOT的DIV中即可
- 2.在JSX中出现的{}是存放JS的,但是要求JS代码指执行完成有返回结果(JS表达式)
->不能直接放一个对象数据类型的值(对象(除了给style赋值)、数组(数组中如有没有对象,都是基本值或者是JSX元素,这样是可以的)、函数都不行)
->可以是基本类型的值(布尔类型什么都不显示、null、undefined也是JSX元素,代表的是空)
->循环判断的语句都不支持,但是支持三元运算符
- 3.循环数组创建JSX元素(一般都基于数组的MAP方法完成迭代),需要给创建的元素设置唯一的KEY值(当前本次循环内唯一即可)
- 4.只能出现一个根元素
- 5.给元素设置样式类用的是className而不是class
- 6.style中不能直接的写样式字符串,需要基于一个样式对象来遍历赋值
JSX是虚拟的dom 那它怎么渲染到页面成为真实的dom呢 (diff diff)
<h1 id="id">hello world</h1>,document.getElementById("root"),()=>{console.log("ok")}
变成
React.createElement("h1", {id: "id"}, "hello world")
// 这需要非常强大的正则匹配算法。babel真的太强了
// 下面我在浏览器打印一下会出现什么结果呢console.log(React.createElement("h1", {id: "id"}, "hello world"), document.getElementById("root"), () => {console.log("ok");})
//
以上可以知道 React.creacteElement()函数执行结果返回的是一个对象,这就是虚拟dom
// 下面我来简单实现这个函数
// params :type props contianer callback return:{}function createElement(type,props, children){let obj={type:null,props:{children:""},key:null,ref:null }obj.type=typeobj.props=props obj.props.children=children //可能你在react上操作dom就会有ref,在for循环就有key'key' in obj.props ? (obj.key = obj.props.key, delete obj.props.key ) : null;'ref' in obj.props ? (obj.ref = obj.props.ref, delete obj.props.ref) : null; //另外一种写法obj = {...obj, type, props: {...props, children}};return obj}console.log(createElement("h1", {id: "id"}, "hello world"))
React.js基础知识总结一相关推荐
- 坚如磐石的React.js基础:入门指南
by Rajat Saxena 通过拉贾特·萨克森纳(Rajat Saxena) 坚如磐石的React.js基础:入门指南 (Rock Solid React.js Foundations: A Be ...
- JS基础知识学习(一)
JS基础知识 前端开发常用的浏览器 谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核 欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
- 【译】一份通俗易懂的React.js基础指南-2018
原文链接:tylermcginnis.com/reactjs-tut- by Tyler McGinnis 这篇文章最初发表于2015年1月,但最近被更新为React 16.3以及它所包含的所有优点. ...
- (七)JS基础知识四(搞定异步)【三座大山之三,必考!!!】
JS基础知识四(异步) 提问 单线程 应用场景 callback hell和promise 提问 同步和异步的区别是什么 手写用Promise加载一张图片 前端使用的异步的场景有哪些 单线程 JS是单 ...
- (六)JS基础知识三(走进作用域和闭包)【三座大山之二,不会闭包,基本不会通过】
JS基础知识三(作用域和闭包) 提问 作用域 自由变量 闭包 this 提问 this的不同应用场景,如何取值 手写bind函数 实际开发中闭包的应用场景,举例说明 创建10个a标签,点击的时候弹出对 ...
- (五)JS基础知识二(通过图理解原型和原型链)【三座大山之一,必考!!!】
JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...
- (四)JS基础知识一(深入分析变量类型和计算)【不会变量,别说你会JS】
JS基础知识一(变量类型和计算) 提问 变量类型 值类型 vs 引用类型 (堆栈模型) 值类型 引用类型 typeof 运算符 深拷贝 变量计算 字符串拼接 == if语句和逻辑运算 if语句 逻辑判 ...
- Js基础知识梳理系列
小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...
- 了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
js基础知识中的作用域和闭包 一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
- js基础知识学习(二)
JS基础知识 JavaScript 数据类型转换 把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...
最新文章
- 项目CPU异常高分析
- awk 控制语句(if for do while)
- [MySQL FAQ]系列 -- Too many open files
- 中海达ihand30手簿使用说明_如何使用RTK手簿求坐标转换参数(四参数/七参数)...
- 河南acret计算机报名,Acret, Ex Parte U.S. Supreme Court Transcript of Record with Supporting Pleadings...
- python文件替换一行_python自动化替换文件中每一行中的特有字符串
- Luke的各版本下载
- Math.ceil()函数
- mysql的时间用什么存储_MySQL存储时间类型选择的问题讲解
- git/SmartGit切换用户
- n文件的上传和下载,struts2和springmvc
- python找到最大最小值、最大最小值的位置、删除最大值最小值
- 电阻电容封装选择以及电路接地问题
- 哪里有好用的电脑pdf编辑器免费版
- vs使用中遇到的问题与插件
- SQL sever 查询及格率
- 图像处理之像素的修改
- 哥德巴赫猜想C++实现
- 复化科特斯公式matlab_【原创】牛顿-柯特斯数值积分公式及其MATLAB的实现
- 细谈永恒之蓝,实现复现
热门文章
- 山东标梵讲解APP开发与技术公司之间的联系
- 修改hosts解决多网页加载失败/不显示/视频无法观看等问题
- JAVAGUI设计步骤
- 详解 n 维向量、n 维数组 和 矩阵的维度
- c语言解一元一次方程(及一元高次方程)
- linux系统出现BUG:softlockup- CPU#0 STUCK FOR 23s 或 rcu_sched self-detected stall on cpu 等字样的解决办法
- 服务器总出现异常?几个小方法助你防范于未然
- 服务器系统修复工具,Windows Repair(系统修复工具) v4.9.0
- 11 OPENVINO intermediate course experiment 3 增加性别和年龄识别
- fullPage学习