React每日总结

# 全局安装脚手架

npm i create-react-app -g

创建项目:

# project-name 项目名称

create-react-app react-demo

src/index.js:

// 导入 react [核心语法包]

import React from "react";

// 导入 react-dom [react操作DOM的模块包]

import ReactDOM from "react-dom";

// <h1 id='desc'>你好</h1>
// 1. 创建react虚拟DOM元素 React.createElement(标签名,属性,内容)
const h1 = React.createElement('h1', { id: 'desc' }, '你好')
 
// 2. 将react元素挂载到对应节点上 ReactDOM.render(渲染的react元素,挂载节点,回调)
ReactDOM.render(h1, document.getElementById('root'))
JSX: javascript xml 是React.createElement的语法糖 帮我们做了编译, 可以使创建元素更加简单，更加直观，提高开发效率。

// 语法点
// 1. 使用{变量/表达式} 渲染数据
// ===> 对象不能直接渲染
// ===> 布尔值渲染不出来, 但是作为判断是可以的
// 2. 标签必须要闭合(注意单标签)
// 3. 注释写法: {/* 注释内容 */}
// 4. 一些标签的属性发送了变化
// ===> class变成className
// ===> label的for属性 变成 htmlFor
// ===> 多个单词组成的属性要变成驼峰命名
// 5. 标签的嵌套一定要符合严格语法要求
// 6. 属性绑定 < 标签 属性={变量} 属性={'字符串'+变量} >
// 7. 一个JSX片段建议使用()包裹
// 8. 一个JSX片段必须只有一个根标签
// ===> <> 包裹元素 </>
// ===> <React.Fragment> 包裹元素 </React.Fragment>
 JSX渲染数组 会将数组每个元素取出进行渲染

样式渲染:

// 语法:
// < 标签 style={ 样式描述对象 } />
// < 标签 style={ {css属性名:"css属性值"} } />
 

React 创建组件：

使用函数 function
使用类 class
语法约定
函数名称首字母必需大写，React 据此来区分组件和 HTML 元素
函数必须有返回值，表示该组件的 UI 结构，如果不渲染任何内容可返回null
回顾 class 语法定义类属性和函数，回顾 extends 语法继承父类:

// 回顾类的知识点
// ES5中, 定义类使用的是 构造函数 函数首字母大写
// ES6中, 定义类使用的是 关键字class
 
class Animal {
    top = '我是动物类'
    say = function () {
        console.log('我会说话===动物类');
    }
}
 
class Dog extends Animal {
    // 类的成员属性
    type = '狗类'
    // 类的成员方法
    skill = function () {
        console.log('我会看家');
    }
 
    // 类的静态属性(不会变)
    // static desc = '这是狗类的描述'
    // // 类的静态方法
    // static run = function () {
    //     console.log('狗会跑');
    // }
 
}
Dog.desc = '这是狗类的描述111'
Dog.run = function () {
    console.log('狗会跑111');
}
 
let d = new Dog()
console.log(d);
d.skill()
console.log('=====================');
// 静态属性和方法需要通过类名去调用
console.log(Dog.desc);
Dog.run()