React
关注
分享
扫一扫
文章平均质量分 79
卷心菜007
小刘笔记处
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
React(12)-react的生命周期(important)没写完
react的生命周期原创 2022-09-17 22:18:43 · 428 阅读 · 0 评论 -
React(11)-全局共享通信Context
Context是什么?Context原理发布订阅Provider&&Consumer组件的使用1.创建方式(避免组件之间props传递)2.Provider组件作用(important!!)使用示例版本1：正常props传值版本2：context传值--双层嵌套Provider组件：Consumer组件：版本3：context传值--三层嵌套注意：版本4：context传值--抽离按钮行为注意：版本5：context传值--多个Provider场景(注原创 2022-09-03 22:47:59 · 836 阅读 · 0 评论 -
React(10)-组件通信(important)
React单项数据流1.组件数据源：state/props【面试】对state和props的理解？props：state：UI视图层：(模板+页面=UI视图层)2.单向数据流演示单向数据流React瀑布流组件通信( important! )10种React组件之间通信的方法https://zhuanlan.zhihu.com/p/326254966组件通信-检查Typechecking with PropTypes一个组件实现任务列表多个组件实现任务列表原创 2022-09-03 16:17:52 · 465 阅读 · 0 评论 -
React(9)-组件引用传递(高级应用)
受控组件非受控组件组件应用传递需求：获取子组件中某个DOM实例1.类组件形式2.函数组件形式调用React.forwardRef()引用转发：引用地址的转发，自动传递ref的一种技术。原创 2022-09-02 11:18:47 · 668 阅读 · 0 评论 -
React(8)-组件ref引用
目录1.组件form受控组件及其特点非受控组件及其特点模拟：简单受控组件表单 input两个方向绑定数据：模拟：复杂(真实)受控组件表单(form里面有多种数据输入)注意：handleChange1~5 中代码重复率高。降低代码重复写法降低代码重复写法模拟：非受控组件受控组件形式自动时钟非受控组件形式自动时钟2.ref-函数类型实现3.createRef实现createRef实现自动化时钟2.业务场景(登录)=>ref模拟for....原创 2022-08-30 23:16:59 · 1917 阅读 · 0 评论 -
React(7)-组件通信render
React(7)-组件通信render原创 2022-08-22 22:11:52 · 335 阅读 · 0 评论 -
React(6)-类组件的setState异步问题
//异步解决方案 1.callback回调函数解决异步 2.Promise解决异步 //setState异步的解决方案 3.1 setState异步 不能直接获取结果 3.2 setState依赖问题+异步解决原创 2022-08-22 19:40:42 · 941 阅读 · 0 评论 -
React(5)-类组件的setState
//1.直接修改数据，强制刷新 //2.setState():修改数据，触发render //3.setState是异步的(条件1：在合成事件里面) //5.多次调用setState()原创 2022-08-22 15:44:50 · 709 阅读 · 0 评论 -
React(4)-类组件的this指向问题
类组件的this指向问题原创 2022-08-21 22:31:44 · 230 阅读 · 0 评论 -
React(3)-类组件的继承/定义及数据更新
类组件原创 2022-08-21 21:01:44 · 1811 阅读 · 0 评论 -
React(2)-函数组件
静态组件(函数组件)，具备纯函数特点原创 2022-08-20 20:14:41 · 180 阅读 · 0 评论 -
React(1)-jsx语法(element,vDOM)
构建用户界面(视图层)的JavaScript库，不是框架。(react全家桶是框架)核心思想:关注点分离发展:html/css/js=>vue:组件化开发template style script=>react:all in js原创 2022-08-20 15:33:37 · 656 阅读 · 0 评论 -
React-component-class-setState
<body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="http...原创 2022-04-06 20:47:36 · 602 阅读 · 0 评论 -
React-component-this-类组件及JS中this指向性问题
React类组件中this指向性问题JS中this指向性问题1.普通函数2.箭头函数3.没有显式调用4.严格模式5.es6 class语法React类组件中this指向性问题<body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg原创 2022-04-06 13:02:33 · 1147 阅读 · 0 评论 -
React-component-class-事件
一、react并没有使用原生的浏览器事件，而是在基于VirtualDOM的基础上实现了合成事件，采用小驼峰命名法，默认的事件传播方式是冒泡，如果想改为捕获的话，直接在事件名后面加上Capture即可；事件对象event也不是原生事件对象，而是合成对象，但通过nativeEvent属性可以访问原生事件对象；二、react合成事件主要分为以下三个过程1、事件注册在该阶段主要做了两件事：document上注册、存储事件回调。所有事件都会注册到document上，拥有统一的回调函数dispatchEven原创 2022-04-05 16:38:54 · 183 阅读 · 0 评论 -
React-component-class-更新(自动化动态时钟)
自动化动态时钟的实现复盘分析01利用props传递时间实现02自定义实例属性方式03props发生改变，触发render执行04setState方法自动赋值，改变状态，执行render，并进行渲染render总结:在react生命周期中的setState是异步的自动化动态时钟的实现实现：//自动化时钟 时间(组件内部状态) / 秒针(状态) 自动化 class Clock extends React.Component{ const.原创 2022-04-05 15:40:22 · 1118 阅读 · 0 评论 -
React-component-class-类组件&函数组件比较
定义组件有两个要求：函数组件：类组件：类组件和函数组件的区别：判断组件类型type:时间显示实例验证：jsx语法-构建element函数组件实现类组件实现定义组件有两个要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件： 函数组件接收一个单一的props对象并返回了一个React元素 类组件：无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。 所有 React 组件都必须是纯函数，并禁止...原创 2022-04-04 21:22:04 · 426 阅读 · 0 评论 -
React-class-extends-原型&原型链&原型问题解析
原型及原型链的概念1、原型的概念2、原型链的概念总结class-extends-原型问题及解析图像解析问题复盘原型及原型链的概念1、原型的概念JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型JavaScript的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]2、原型链的概念原创 2022-04-03 21:54:19 · 1043 阅读 · 0 评论 -
React-class-extends-new的实现原理(面试例题)
function P(food){ this.food = food } P.prototype.eat = ()=>{ console.log('eatting'); } P.prototype.sleep = ()=>{ console.log('sleeping'); } // 类的实例化 let z ...原创 2022-04-03 16:10:56 · 158 阅读 · 0 评论 -
React-class-extends-类和函数的区别/类的执行原理
class类的基础知识回顾类和函数的区别new 调用函数的执行顺序=>类的执行原理new调用函数修改返回值总结：类中的注意事项实例和类的关系判断class类的基础知识回顾<script> // class基础知识回顾 class A{ constructor(props){ console.log('A',props); this.x = props }原创 2022-04-03 15:02:12 · 677 阅读 · 0 评论 -
React-component-function-函数组件(特点/组合/抽离)
组件&Props - React：https://zh-hans.reactjs.org/docs/components-and-props.html1.特点原创 2022-04-01 12:41:37 · 1589 阅读 · 0 评论 -
React-虚拟DOM
react官方文档：React 官方中文文档 – 用于构建用户界面的 JavaScript 库1. react用于动态构建用户界面的JavaScript库，将数据渲染为HTML视图的开源JS库2. react高效的原因：1.react使用虚拟DOM，不总是直接操作页面真实DOM(原生JS直接操作DOM，浏览器hi进行大量的重排重绘)2. react的DOM Diffing算法，最小化页面重绘(原生JS操作DOM繁琐且效率低)3.原生JS没有组件化编码方案，代码复用率低3. rea原创 2022-03-20 12:16:49 · 2375 阅读 · 0 评论 -
React-函数式组件和类组件
1.函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_函数式组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <原创 2022-03-20 12:42:18 · 1154 阅读 · 0 评论