React笔记大全,先来一篇总的,如果不能完全吸收的同学,可以看我react专栏,每一节都会有对应的小案例和解析
React 作为如今三大框架之一,在进行了短期的学习后,整理了一些笔记,做一下分享:,如果有错误,欢迎指出。
一、React简介
1. 什么是React:
- React 是一款由 Facebook开发的用于构造用户界面的Javascript库。
- React 与Vue相比,vue的语法简单易上手,适用于小而精的项目,但是 React在组件上的复用性与设计性上会胜于vue一筹,适用于大型的项目。
- React 将页面以一个个组件的方式进行拆分与组装,重复使用提高效率(可见下图)
- React 对数据的处理与管理比原生更加的清晰。
2.React的特点
1声明式设计 −React的每个组件都是通过声明创建,使得页面逻辑更加清晰
2 虚拟DOM −React每次渲染页面时会创建一个虚拟DOM,与现有的DOM进行对比,有差异的才进行替换重新渲染,提高了效率。
3.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
// 在 javascript中创建元素
const DOM = document.createElement("h1"); // 真实DOM
DOM.innerText = "这是h1标签";
// 在 jsx中创建元素
const VDOM = <h1>这是h1标签</h1> // 虚拟DOM
4.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
// 不必现在就看懂,仅需要知道每个组件都是需要进行声明后才能使用
import React, {PureCompoent} from "react";
export default class Header extends PureCompoent{
render(){
return <header>这是头部组件</header>
}
}
// ------------------------------------------------
// 在需要使用 header组件时调用即可重复使用
import Header from "./Header";
<Header></Header>
5.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。(这个在后面会了解到)
3. 安装与使用
1.使用cdn
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2.通过下载导入 React包
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
3.使用 react的脚手架create-react-app 创建项目文件会自带react
npm i create-react-app -g
create-react-app 项目名称
- 注意:使用 react必须使用 babel.js 将 jsx语法转为 js语法ReactDOM 独立于 React(为了防止React太大太臃肿而拆开)
4.虚拟DOM
(1) 关于虚拟DOM
虚拟DOM的本质就是一个对象,真实DOM也是个对象,但虚拟DOM的属性更少,更加轻量。
// 虚拟DOM
const VDOM = <h1>Hello World</h1>; // 此处不需要引号,因为不是字符串
// 真实DOM
const TDOM = document.querySelector("#app");
console.log("虚拟DOM: ", VDOM); // Object
console.log("真实DOM: ", TDOM); // <div id="app"></div>
console.log("虚拟DOM类型: ", typeof VDOM); // object
console.log("真实DOM类型: ", typeof TDOM); // object
console.log(VDOM instanceof Object); // true
console.log(TDOM instanceof Object); // true
- 虚拟DOM 最终会被 React转为 真实DOM呈现在页面上
(2) 创建虚拟DOM
1.通过 React的方法 **createElement()**方法创建虚拟DOM
// React.createElement(标签名称, 标签属性, 标签内容)
const VDOM1 = React.createElement("h1", {id: "title"}, "This is Title");
2.使用方法一的语法糖创建虚拟DOM
const VDOM2 = <h1 id="title">This is Title</h1>;
5. 关于JSX
jsx语法与javascript语法非常相似,只有一些需要注意的地方
// 虚拟DOM
const VDOM = ( // 使用括号框住 jsx标签表示层级会更加美观些。
<h1>
<span>Hello World</span>
</h1>
)
const myid = "HeLlO";
const content = "Happy New Year"
const students = [
{id: "001", name: "Tom", age: 18},
{id: "002", name: "Tim", age: 19},
{id: "003", name: "Jerry", age: 20},
];
const VDOM2 = (
<div>
<h2 className="title" id={myid.toLowerCase()}>
<span style={{color: 'pink'}}>{content}</span>
</h2>
<ul>{/* 使用 ES6的 map() 函数进行列表渲染(将数据批量渲染到页面上) */}
{
students.map(student=>{
return <li key={student.id}>{student.name}---{student.age}</li>
}
}
</ul>
<input type="text"/>
</div>
)
jsx语法规则:
-
定义虚拟DOM时不要写引号
-
标签中混入 js表达式时要用 {}
表达式会产生一个值,可以放在任何需要值的地方
语句时一串代码,用于处理逻辑用的 -
标签中类名指定不用 class,要用 className
-
标签中使用内联样式时,要用双括号写法(使用小驼峰写法写css样式)
-
添加事件属性时(如onclick),on后面的单词首字母要大写(如onClick)
-
虚拟DOM必须只有一个根标签
-
标签必须闭合
-
标签开头
标签开头为小写时,会被 jsx编译为 html标签,若 html没有对应同名元素则报错
标签开头为大写时,会被 jsx识别为组件,若没找到对应组件则 -
渲染到页面上
使用 ReactDOM的 render()方法进行渲染
const VDOM = <h1 id="title">This is a Title</h1>; // 创建虚拟DOM
// ReactDOM.render( 组件(虚拟DOM), 要绑定到哪个元素上 );
ReactDOM.render(VDOM, document.querySelector("#root"));