React | 2023-04 | 学习笔记

yiyun

发布于 2023-05-11 09:33:13

2560

1. 简介用于构建用户界面的 JavaScript 库原生 JavaScript 操作 DOM 繁琐、效率低（ DOM-API 操作 UI ), 使用 JavaScript 直接操作 DOM , 浏览器会进行大量的重绘重排。原生 JavaScript 设有组件化编码方案，代码复用率低。 React 特点 1. 采用组件化模式、声明式编码，提高开发效率及组件复用率。 2. 在 React Native 中可以使用Reacti语法进行移动端开发。使用虚拟DOM + 优秀的 Diffing 算法，尽量减少与真实DOM的交互。 2. Hello React

3. 虚拟 DOM 的两种创建方式

4. 虚拟 DOM 与真实 DOM 虚拟 DOM 1. 本质是 Object 类型的对象 (一般对象) 2. 虚拟 DOM 比较 "轻", 真实 DOM 比较 "重", 因为虚拟 DOM 是 React 内部在用, 无需真实 DOM 上那么多的属性 3. 虚拟 DOM 最终会被 React 转化为真实 DOM, 呈现在页面上

5. JSX 语法规则 JSX 语法规则 1. 定义虚拟 DOM 时，不要写引号 2. 标签中混入 JS 表达式时要用 {} 3. 样式的类名指定不要用 class,要用 className 4. 内联样式，要用 style={{key:value}} 的形式去写 5. 只有一个根标签 6. 标签必须闭合 7. 标签首字母 7.1 若小写字母开头, 则将改标签转为htm1中同名元素, 若htm1中无该标签对应的同名元素, 则报错 7.2 若大写字母开头, React 就去渲染对应的组件, 若组件没有定义, 则报错。 6. JSX 小练习 7. 组件与模块

模块

理解：向外提供特定功能的js程序，一般就是一个js文件

为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂

作用：复用js,简化js的编写，提高js运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么：一个界面的功能更复杂作用：复用编码，简化项目编码，提高运行效率

模块化

当应用的s都以模块来编写的，这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用 8. 开发者工具 9. 函数式组件

10. 复习类相关

11. 类式组件 12. 对 state 的理解组件实例的三大核心属性之一 state 13. 初始化 state

12345678910111213141516	// 1. 创建组件class Weather extends React.Component { constructor(props) { super(props) this.state = { isHot: true } } render() { console.log(this) const { isHot } = this.state return <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1> }}// 2. 渲染组件到页面ReactDOM.render(<Weather/>, document.getElementById('test'))

14. React 中的事件绑定

推荐使用 onclick="demo()"

注意:

1	<h1 onClick={demo}></h1>

15. 类中方法中的 this

Window

开启严格模式后, 即为 undefined

这里 changeWeather() 中 this 为 undefined

study 函数被赋值给了 x, 即 x 直接指向了堆中的 study函数 , 调用 x 相当于直接调用了 study函数, 类中的方法局部都开启了严格模式 TODO: 【尚硅谷React教程（2022加更，B站超火react教程）】【精准空降到 21:26】 https://www.bilibili.com/video/BV1wy4y1D7JT/?p=15&share_source=copy_web&vd_source=3f224cc759a30abe29fc43a10d5ed8b1&t=1286 Q&A 补充参考感谢帮助

请等待自动解密 !!! 请等待自动解密 !!! 请等待自动解密 !!!

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-30，如有侵权请联系 cloudcommunity@tencent.com 删除

react