React入门 | 青训营笔记

昔言
64 阅读4分钟

1. 什么是React：

React 是一款由 Facebook开发的用于构造用户界面的Javascript库。
React 与Vue相比，vue的语法简单易上手，适用于小而精的项目，但是 React在组件上的复用性与设计性上会胜于vue一筹，适用于大型的项目。
React 将页面以一个个组件的方式进行拆分与组装，重复使用提高效率（可见下图） React 对数据的处理与管理比原生更加的清晰。

2. React的特点

  1. 声明式设计 −React的每个组件都是通过声明创建，使得页面逻辑更加清晰 582_1.png
  2. 虚拟DOM −React每次渲染页面时会创建一个虚拟DOM，与现有的DOM进行对比，有差异的才进行替换重新渲染，提高了效率。 584_1.png
  3. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
// 在 javascript中创建元素
const DOM = document.createElement("h1"); // 真实DOM
DOM.innerText = "这是h1标签";

// 在 jsx中创建元素
const VDOM = <h1>这是h1标签</h1> // 虚拟DOM
复制代码
  1. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
// 不必现在就看懂，仅需要知道每个组件都是需要进行声明后才能使用
import React, {PureCompoent} from "react";
export default class Header extends PureCompoent{
    render(){
        return <header>这是头部组件</header>
    }
}
// ------------------------------------------------
// 在需要使用 header组件时调用即可重复使用
import Header from "./Header";
<Header></Header>
复制代码
  1. 单向响应的数据流 − 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>
复制代码
  1. 通过下载导入 React包
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
复制代码
  1. 使用 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");
复制代码
  1. 使用方法一的语法糖创建虚拟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识别为组件，若没找到对应组件则

6. 渲染到页面上

使用 ReactDOM的 render()方法进行渲染

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