React | 2023-04 | 学习笔记
React | 2023-04 | 学习笔记
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 补充 参考 感谢帮助
请等待 自动解密 !!! 请等待 自动解密 !!! 请等待 自动解密 !!!