React入门-01
2024-03-03 116 字 1 分钟

React入门-01

这篇笔记记录了React入门的一些基础知识 一、本堂课重点内容 为什么学习React React特点 React基础语法 二、详细知识点介绍 1、为什么学习React 原生JS操作DOM繁琐，效率低 使用JS直接操作DOM,浏览器会进行大量的重绘重排 原生JS没有组件化编码方案，代码复用低 2、React特点 采用组件化模式、声明式编码，提高开发效率及组件复用率 在React Native中可以使用React 语法进行移动端开发 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互 3、React基础语法 创建一个基本的应用 <script …
React入门-02
2024-03-03 62 字 1 分钟

React入门-02

这篇笔记记录了React入门的一些基础知识 一、本堂课重点内容 组件与模块 函数式组件 二、详细知识点介绍 1、模块与组件、模块化与组件化的理解 1.1 模块 理解：向外提供特定功能的js程序, 一般就是一个js文件 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。 作用：复用js, 简化js的编写, 提高js运行效率 1.2 组件 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么要用组件： 一个界面的功能更复杂 作用：复用编码, 简化项目编码, 提高运行效率 1.3 模块化 当应用的js都以模块来编写的, …
React入门-03
2024-03-03 89 字 1 分钟

React入门-03

这篇笔记记录了React入门的一些基础知识 一、本堂课重点内容 类的相关知识复习 类组件 二、详细知识点介绍 1、类的相关知识复习 1.1 构造器方法 构造器方法完成类对象的初始化和参数赋值 构造器方法中的this是类的实例对象 类中的构造器不是必须写的，要对实例进行一些初始化操作，如添加指定属性时才写 class Person { constructor(name, age) { this.name = name; this.age = age; } } 1.2 一般方法 一般方法放在了类的原型对象上，供实例使用 通过Person实例调用speak()时，speak()中的this就 …
React入门-04
2024-03-03 182 字 1 分钟

React入门-04

这篇笔记记录了React与state相关的一些基础知识 一、本堂课重点内容 state相关知识点 二、详细知识点介绍 1、state定义 React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React中很多地方需要用到数据，这在React中被叫做状态，我们需要一个专门管理状态的方法，于是state相关的就诞生了。 state应该被要求有两个基本功能 能够存储一定的值，从而能被react使用 能够在 …
React入门-05
2024-03-03 178 字 1 分钟

React入门-05

这篇笔记记录了React与props相关的一些基础知识 一、本堂课重点内容 props相关知识点 二、详细知识点介绍 1、props定义 props 是调用方传递给组件的数据（类似于函数的形参），而 state 是在组件内被组件自己管理的数据（类似于在一个函数内声明的变量）。 props 是不可修改的，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 由于 props 是传入的，并且它们不能更改，因此我们可以将任何仅使用 props 的 React 组件视为 pureComponent，也就是说，在相同的输入下，它将始终呈现相同的输出。 2、props基本使用 从组件 …
React入门-06
2024-03-03 176 字 1 分钟

React入门-06

这篇笔记记录了React与refs相关的一些基础知识 一、本堂课重点内容 refs相关知识点 二、详细知识点介绍 1、refs定义 组件内的标签可以定义ref属性来标识自己 refs 能够越过虚拟DOM去直接操控真实DOM refs 使用的几种场景： 焦点的管理、文本的选择、媒体的播放； 强制触发动画； 继承三方 DOM 库； 2、refs基本使用 ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上 挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。 3、字符串形式的ref class Vup extends …
React入门-07
2024-03-03 212 字 1 分钟

React入门-07

这篇笔记记录了React中收集表单数据的一些知识 一、本堂课重点内容 收集表单数据的知识点 二、详细知识点介绍 1、非受控组件定义 受控与非受控是从组件的角度出发来说出的概念，字面意思就是组件是不被控制的，不被谁控制，当然是不被父组件控制，那么不受控制的组件的特性就是一切逻辑只与自身有关,与其他的组件没有通信与交集 在HTML当中，像input、checkbox等这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，这些组件在不加以处理的情况下都是非受控组件，因为真正使用的时候会发现这些组件是不会自动更新值的，我们输入的值在不做任何处理的情况是无法拿到使用输入的值的 非受控的组 …
React入门-08
2024-03-03 44 字 1 分钟

React入门-08

这篇笔记记录了React生命周期（旧）的知识 一、本堂课重点内容 React生命周期（旧） 二、详细知识点介绍 1、React生命周期的引入 假如现在有一个需求，要设计一个点击按钮后页面某元素透明度每200ms从1变为0的功能，其中关键的定时器代码不能直接放在类组件中 这时考虑将定时器代码放到render()函数中，但是由于透明度不断变化导致状态更新从而引发了render()函数的重复调用，导致定时器函数也被无限次调用，就会陷入死循环 一种解决办法是再增添一个按钮，绑定一个新的函数，在该函数体中使用定时器。但是这种方法必须由用户触发一次按钮事件后定时器才能开始正常运作 我们希望能够在元素挂载 …
React入门-09
2024-03-03 50 字 1 分钟

React入门-09

这篇笔记记录了React生命周期（新）的知识 一、本堂课重点内容 React生命周期（新） 二、详细知识点介绍 1、新旧生命周期对比 新版本（17.x+）的React中，componentWillMount()、componentWillReceiveProps()、componentWillUpdate()这三个钩子函数的函数名前面要加上UNSAFE_，可以记为：除了componentWillUnmount()之外，所有函数名中带"will"的钩子函数前面都必须加UNSAFE_ 修改原因：React官方的说法是上面这三个函数作用不大，容易被误解和滥用，此外，React官 …
React入门-10
2024-03-03 136 字 1 分钟

React入门-10

这篇笔记记录了React脚手架的知识 一、本堂课重点内容 React脚手架 二、详细知识点介绍 1、React脚手架使用 npm i create-react-app -g：全局安装create-react-app create-react-app <filename>：创建项目 cd <filename>：进入项目目录下 npm start：启动项目 2、React脚手架自带文件解析 主要文件 public favicon.ico：网站页签图标 index.html：主页面 src App.css：App组件的样式 App.js：App组件 index.css： …