React 笔记-JZTXT

Date: 2023-03-30 20:36:05
视频链接：尚硅谷React教程
开始学 react 了，?

P1 react 简介

React 只关注视图，不关心数据

笔记基于版本 react@16，在记录过程中引入并使用高版本特性

P2 react 案例

babel.min.js              \\ 用来将 jsx 翻译成 js 文件的。
react.development.js      \\ 开发，react 核心库
react-dom.development.js  \\ 操作 DOM，react 周边库

React 基本实现

<div id="test"></div>
<script>
  const VDOM= `<h1>hello,world!</h1>`
  ReactDOM.render(VDOM,document.getElementById('test'))
</script>

P3 虚拟 DOM 的两种创建方式

为什么要使用 jsx 写法呢？

方便的创建 VDOM，在 JS 里写 HTML

// 第一种创建方式如上
const VDOM = (
  <h1 id="title">
    <span>Hello,React</span>
  </h1>
);
// 第二种方式
const VDOM = React.createElement("h1",{ id: "title" },
  React.createElement("span", {}, "Hello,React")
);
// 若是多级元素，则需要嵌套着写，比较麻烦

babel 将 jsx 翻译为第二种方式，所以 jsx 也是一种简写语法糖.

P4 虚拟DOM与真实DOM

VDOM 即 虚拟DOM，TDOM 即 真实DOM

VDOM 是一个 Obj，但相对 TDOM 这个对象较简单，即 VDOM 较为轻量

P5 jsx 语法规则

XML 被 JSON 取代了，
JSON => Obj，可用 JSON.parse
Obj => JSON，可用 JSON.stringfy
在 localStorage 可用其存 Obj、Arr。

jsx 语法规则，? 以下为具体规则，其在下面实例代码中体现

定义VDOM，使用 ()
标签混入 JS 表达式，使用 {}
如果想要写类名，需要使用驼峰命名法 className
如果想要写样式在标签上
style={{color:'pink',fontSize:60px}}
VDOM 只能有一个根标签（类似 vue2）
标签务必闭合
标签首字母小写会解析成HTML元素，大写为组件

const myId = "imID";
const myData = "HeLlo,world!";
//1.创建虚拟DOM
const VDOM = (
  <div>
    <h2 className="title" id={myId.toLowerCase()}>
      <span style={{ color: "pink", fontSize: "60px" }}>
        {myData.toLowerCase()}
      </span>
    </h2>
    <input type="text" />
  </div>
);
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));

P6 jsx 小练习

js 表达式与 js 语句的区别？

js 表达式 会 return 一个 val，用 console.log() 即可查看
js 语句 则不会返回值

面试题也会问

常用方法

const arr=[1,2,3]
const result = arr.map(num => return num+1) // [2,3,4]

P7 组件与模块

模块 js 代码封装的功能
组件 js,html,css 的集合体（有必要将 img,video 放在一起吗？可在 assets 文件夹里，建立文件夹）
模块化、组件化、工程化

P8 开发者工具的安装

在 chrome 的插件商店安装 react,redux 即可，需FQ
react 的 profiler 为性能测试工具

P9 函数式组件

//1.创建函数式组件
function ReactFunctionComponent() {
  console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
  return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>;
}
ReactDOM.render( //2.渲染组件到页面
  <ReactFunctionComponent />,
  document.getElementById("test")
);

执行过程

React 解析标签
调用函数 VDOM => TDOM

P10 复习类相关知识

class Person { //类的定义
  constructor(name, age) { //构造函数
    this.name = name
    this.age = age
  }
  sayHello() {
    console.log(this.name + '------' + this.age)
  }
}
class Students extends Person{ //类的继承
  constructor(name, age, score) {
    super(name, age)   //调用父类的构造函数属性
    this.score = score
  }
  sayHello() {  //重写父类的方法
    console.log(this.name + '------' + this.age + '岁------' + this.score)
  }
}
const p1 = new Students('张三', 18, 100)
const p2 = new Students('李四', 28, 90)