学习react必看的基础知识_超细节整理

最新推荐文章于 2024-08-19 11:18:08 发布

nymain

最新推荐文章于 2024-08-19 11:18:08 发布

阅读量1.3k

点赞数 1

文章标签： react.js node.js javascript html5 css

本文链接：https://blog.csdn.net/m0_57219965/article/details/120529537

版权

公司突然要求用react写项目，马上开始整理学习起来
姑娘熬夜头秃啊在这里插入图片描述

一、React基础

01.ReactJS了解

1.学习前必须掌握的js语法

1.js概念：原型，原型链
2.es6语法：变量，箭头函数，数组，对象，参数，赋值，异步，承诺机制，类
3.判断this的指向
4.npm包的管理
5.模块化开发的概念
...

2.react特点

1.声明式编码
	1)命令式：window.location.href 编程式 
	2)声明式：a标签 
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）
	1)使用虚拟DOM，不需要总是直接操作页面（真实DOM）
  2）DOM Diffing 算法，最小化页面重绘。

3. 查看项目用React开发

react developer tools 插件
redux DevTools插件

下载 React DevTools 进行更好的开发调试
目前的代码模式是在客户端编译转换 JSX 至 JS，其性能效率不高，如果只是 development 开发环境，则可以测试。但如果是 production 生产环境，则不建议使用目前方式。

1.外网

2.或者redux react 解压

02.helloworld渲染

1.react运行环境的依赖资源

1.react.development.js（React 的核心库，当前版本为开发版本）
2.react-dom.development.js（React 的扩展库，当前版本主要操作 DOM 渲染，因为现在开发环境是在 PC 网页端）
3.babel.min.js（ES6 转 ES5，JSX 转 JS）
4.prop-types.js（属性类型的检测与约束库）

2.渲染基本内容

1.创建一个虚拟DOM
2.需要将VDOM转为真实DOM，并且插入到页面
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备一个空的DOM容器，后期react会往其中加入解析完的结构 -->
		<div id="test"></div>

		<!-- type="text/javascript"的时候编写的是Js，但React中主要处理的是JSX -->
		<script type="text/babel">
	/* 此处一定要写上babel，因为我们写的不是js是jsx 要靠babel解析 */
	    /*
		1.创建一个虚拟DOM
		1)回顾var、const、let的JS变量声明方式
		2)考虑'<h1>Hello,React!</h1>'与<h1>Hello,React!</h1>的差异
		3)此处一定不要加引号，因为这是jsx中创建虚拟DOM的特殊语法
		*/
			const VDOM = <h1>Hello,React!</h1>;

		//2.通过react将VDOM转为真实DOM，插入页面
		/*
		ReactDOM.render(虚拟DOM,渲染目标元素对象)
		1)寻找元素不能是test
		2)寻找元素不能是#test
		3)寻找元素需要通过getElementById找到对应的元素
		*/
			ReactDOM.render(VDOM, document.getElementById('test'));
		</script>
	</body>
</html>

3.favicon.ico

原因：如果第一次打开网页的时候，在 console 控制台可能会有一个 404 地址的请求错误，这是因为网页默认会有一个图标资源的请求，如果找不到则报 404，如果再次刷新，还没有则会使用默认图标，则不再报 404 错误。

1.可以在项目根目录直接放一个 favicon.icon 的图标，则会在浏览器里进行图标显示（针对全站）
2.可以在 Head 中利用 link 设置页面级 favicon
    <link rel="shortcut icon" href="ico文件url" />或
    <link rel="icon" href="../favicon.ico" />或
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />

03.关于Babel转换问题

需要理解的概念有：

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js (opens new window)，实现）
- 源码转换 (codemods)
Babel与JSX 以及 React的关系
- Babel 能够转换 JSX 语法，之前引入babel.min.js的目的就是将JSX转成ES语法
之前编写了const VDOM = Hello,React!;最终将转化成什么代码格式，如何进行在线测试：https://www.babeljs.cn/repl
- REPL 全称: Read-Eval-Print-Loop（交互式解释器）
- stage指的是TC39特性批准流程的阶段：
  - stage 0 - Strawman 初稿展示阶段
  - stage 1 - Proposal 征求意见阶段
  - stage 2 - Draft 草案阶段
  - stage 3 - Candidate 候选阶段
  - stage 4 - Finished 定案阶段
React.createElement的参数有哪些，三个：元素、属性、内容

04.虚拟DOM的两种创建方式

1.jsx虚拟DOM创建方式

语法糖
const VDOM=<h1 id='title'>Hello,React</h1>

2.js中虚拟DOM创建方式

使用createElement的虚拟DOM创建方式
React.createElementById('h1',{id:'title'},'hello,React')

05.虚拟DOM与真实DOM

哪些内容创建出来的是虚拟 DOM

关于虚拟DOM目前你需要知道的：1.本质就是Object类型的对象（一般对象）。2.虚拟DOM比较“轻”（属性少），真实DOM比较“重”，==》因为虚拟DOM是react内部在用的，无需真实DOM身上那么多的属性。3.虚拟DOM最终会被react转为真实DOM，渲染在页面上。

哪些内容创建出来的是真实 DOM
如何在程序中设置断点调试

06.JSX语法规则

全称JavaScriptXML

1.XML早期用于存储和传输数据

XML:
<student>
  <name>Tom</name>
  <age>19</age>
</student>

现在使用JSON
JSON.stringfy()
JSON.parse()

2.JSX规则

1.定义虚拟dom不要写引号
2.标签结构中，若想加入js，这个js需要用表达式，而且得用{}包含，即：{js表达式}
3.指定的样式类名不要用class，需要用className
4.行内样式，需要用style={{}}，而且像font-size，需改写成小驼峰式写法
5.只有一个根元素，不能进行元素并列
6.标签必须闭合 
7.标签首字母
	1）若标签首字母是小写，则该标签转成html同名元素，若html中没有该元素，则警告
  2）若标签首字母是大写，则react将去渲染对应的“组件”，若没有定义过该组件，则报错

07.JSX小练习

JSX 中能够书写的JSX 中能够书写的内容为 JS 表达式，不能够编写 JS 语句，一定注意区分：【js语句】与【js表达式】

1.JS 语句 (代码)
```
- If(){}
- for(){}
- switch(){}
```
2.JS 表达式：一个表达式会产生一个值，可以放在需要一个值的地方，表达式是一种特殊的语句（代码）
```
- a+b
- demo()
-  arr.map()
- 三元运算
```

例如：
1.利用ul、li硬编码可以进行列表展示
2.如果有简单数组，进行输出可以直接输出为字符串
3.在数组当中，可以写jsx，可以直接将数组中jsx进行渲染
4.后台接口不会返回jsx的数组结构
5.语法：条件，循环，if for switch
7.map循环的时候需要设置key属性
 1）设置了key属性，在浏览器页面元素中并不会有key的prop属性内容

08.组件化开发

模块：一般就是一个js文件
 ^
组件：用来实现局部功能的效果和资源内容的集合                					（html/css/js/image/iconfont...）

原因：代码越来越多，需要拆分，需要拆成组件
作用：代码复用，简化项目编码，提高开发效率

09.react组件

9.1函数式组件

1.使用函数定义组件
从函数的概念转为了组件的概念
function Hello(){
    return <h2></h2>
}

2.ReactDOM.render
    1）react需要去找<Hello />组件，找到了则渲染
    2）若找不到，则无法渲染或报错
    
执行ReactDOM.render(<Hello/>,document.getElementById('test'))后，发生了什么？
    -React解析组件标签，找到了Hello组件
		-发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转成真实DOM，随后呈现在页面中
      
    
3.定义的函数式组件，里面没有this对象，所以是简单组件
  原因：bable编译开启严格模式：禁止自定义函数里的this指向window

4.类组件，有this，复杂组件

9.2类式组件

使用 ES6 class 来定义一个组件:

<!-- 设置一个容器 -->
<div id="test"></div>
<script type="text/babel">
    //使用es6中的class定义一个组件
    class Hello extends React.Component{
        render(){
            console.log(this) // Hello的实例对象
            return (
                <h1>hello world</h1>
            )
        }
    }
//渲染组件到页面上
ReactDOM.render( <Hello/>,document.getElementById("test") )
</script>

render方法

1.render必须设置，有返回内容
2.render方法放在 Hello 原型对象上，供实例使用
3.render中的this是：Hello 类的实例对象 <=> Hello的实例对象 <=> Hello组件实例

执行了ReactDOM.render（）后发生了什么？

第1步：React解析组件标签，寻找Hello组件：
	(1).若找到了，则进行第二步
	(2).若未找到，则报错 Hello is not defined
第2步：发现Hello组件是用类定义的，随后React帮我们new了一个Hello组件的实例(h)
	并通过h调用到了Hello原型上的render方法，即：h.render()
	//备注：此处的h只是我们分析问题时候的一个代号，React底层用的肯定不是h，是其他名
第3步：将render调用返回的虚拟DOM渲染到页面

9.3类式组件中的构造器方法

关于类式组件中的构造器：
1.一般在开发中我们从来不写构造器，因为原本需要在构造器中完成的如下两个任务：
    (1).通过给 this.state 赋值对象来初始化内部 state
    (2).解决事件处理函数中this的问题
均可以通过如下两个方式搞定：
    (1).state = {}完成初始化state
    (2).changeWeather = ()=>{} 解决this指向问题

2.如果写了构造器，那么构造器中必调用super，调用super时传不传入props呢？
    (1).如果传递，在super语句之后，可以通过this.props正常获取props
    (2).如果不传递，在构造器中this.props是undefined。（此场景几乎开发中不出现）