ElendaLee-CSDN博客

组件内部维护state，state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发生的操作，控制取值的表单输入元素就叫做受控组件（类似vue的数据双向绑定）手动实现只有 vue 中才有的双向数据绑定。他自己维护了一个名叫name的参数值。

2023-10-27 11:44:35 52

原创笔记十三、（新）深入理解React的生命周期

新版react生命周期函数对比旧生命周期函数，去除了三个生命周期函数新增了两个生命周期函数getDerivedStateFromProps // 当前组件任何时候使用props来决定state。

2023-10-26 15:29:45 66

原创笔记十二、（旧）深入理解React的生命周期更新阶段的三种情况

三种更新阶段：setState更新阶段forceUpDate更新阶段父组件render更新阶段见图示。

2023-10-26 14:38:30 135

render执行完，可以操作dom，通常请求后端接口数据，来渲染页面，开启定时器。：常用且重要的钩子函数之一，render将标签渲染在浏览器显示页面内容。：这是一个构造器，接收父组件的props和初始化state值。：组件将要挂载，在render之前执行这个函数，用的比较少。React17版本之前的生命周期函数（旧）：函数里面关闭一些定时器或其他收尾的操作。forceUpDate更新阶段。父组件render更新阶段。setState更新阶段。

2023-10-26 12:43:48 85

原创笔记十、定义state和事件处理的简写方式

在类中不写构造器直接增加一个state的对象属性。将普通函数换成箭头函数的写法。

2023-10-26 11:15:46 61

原创笔记九、React组件的核心属性—事件处理（handleClick事件）

handleClick 放在类 App 的原型对象上，供实例使用，在 render() 中调用时必须加 this。类中的方法默认都开启了局部的严格模式，所以 handleClick this 为 undefined。handleClick 要访问构造器的 state 就必须要改变 this 指向实例。handleClick 并不是通过实例调用的。改变构造函数中的状态state。事件的绑定和改变状态。

2023-10-26 10:44:39 181

原创笔记八、React组件的核心属性—state

【代码】笔记八、React组件的核心属性—state。

2023-10-25 23:05:29 54

原创笔记七、React组件化开发练习

当用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。例如，<div /> 代表 HTML 的 div 标签，而 <App /> 则代表一个组件，并且需在作用域内使用 App。React 会将以小写字母开头的组件视为原生 DOM 标签。自定义组件名称必须以大写字母开头。

2023-10-25 22:51:40 42

原创笔记六、函数式组件和类式组件开发

这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。在最新 react 版本官网文档已经几乎没有 class 内容，但是很多公司的项目还是旧版本 react 维护的，需要认真学习。React官网已经都是函数式组件文档，没有类组件文档，但是还是支持这种写法。使用 ES6的class 来定义组件，和上面的函数组件是一模一样的。定义组件最简单的方式就是编写 JavaScript 函数。程序入口文件 main.jsx。

2023-10-25 21:11:21 41

原创笔记五、React脚手架项目结构信息

eslintrc.cjs ——eslint 的配置文件，通常用于设置代码风格规范、语法检查和其他的代码Lint检查。vite.config.ts ——编译工具vite的配置文件。yarn.lock ——锁定项目的依赖包版本。node_modules ——放置项目的依赖文件。src ——放置开发的代码文件。package.json ——项目依赖的描述文件。assets ——项目中的图片资源。index.html ——项目总的入口文件。

2023-10-25 18:53:14 46