react简单到精髓笔记大全，快速暴力入门

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语法规则：

1. 定义虚拟DOM时不要写引号

2. 标签中混入 js表达式时要用 {}
   表达式会产生一个值，可以放在任何需要值的地方
   语句时一串代码，用于处理逻辑用的

3. 标签中类名指定不用 class，要用 className

4. 标签中使用内联样式时，要用双括号写法（使用小驼峰写法写css样式）

5. 添加事件属性时（如onclick)，on后面的单词首字母要大写（如onClick）

6. 虚拟DOM必须只有一个根标签

7. 标签必须闭合

8. 标签开头
   标签开头为小写时，会被 jsx编译为 html标签，若 html没有对应同名元素则报错
   标签开头为大写时，会被 jsx识别为组件，若没找到对应组件则

9. 渲染到页面上
   使用 ReactDOM的 render()方法进行渲染

const VDOM = <h1 id="title">This is a Title</h1>;    // 创建虚拟DOM
// ReactDOM.render( 组件(虚拟DOM),  要绑定到哪个元素上 );
ReactDOM.render(VDOM, document.querySelector("#root"));