React
文章平均质量分 80
kelly0721
这个作者很懒,什么都没留下…
展开
-
React Hook的实现原理
Hook 这个单词的意思是"钩子"。React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。React Hooks 就是那些钩子。你需要什么功能,就使用什么钩子。React 默认提供了一些常用钩子,你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能,所以 React 约定,钩子一律使用use前缀命名,便于识别。你要使用 xxx 功能,钩子就命名为 usexxx。原创 2022-10-25 12:13:16 · 2713 阅读 · 1 评论 -
React - 虚拟DOM 和 Diff 算法
虚拟DOM 和 Diff 算法原创 2022-10-01 13:42:47 · 1914 阅读 · 0 评论 -
React - React v18 的 批处理
React v18 的 批处理原创 2022-09-13 16:49:19 · 844 阅读 · 0 评论 -
React - setState 原理
setState 原理原创 2022-09-12 19:08:10 · 1964 阅读 · 0 评论 -
React - Immer
Immer 的使用原创 2022-08-19 16:02:07 · 768 阅读 · 0 评论 -
React - 父子组件的信息传递
React - 父子组件的信息传递原创 2022-03-20 19:16:57 · 325 阅读 · 0 评论 -
React - 事件机制
一、DOM 事件流在正式讲解 React 事件之前,有必要了解一下 DOM 事件流,其包含三个流程:事件捕获阶段、处于目标阶段和事件冒泡阶段。事件捕获阶段:事件对象通过目标节点的祖先 Window 传播到目标的父节点。处于目标阶段:事件对象到达事件目标节点。如果阻止事件冒泡,那么该事件对象将在此阶段完成后停止传播。事件冒泡阶段:事件对象以相反的顺序从目标节点的父项开始传播,从目标节点的父项开始到 Window 结束。addEventListener()用于为特定元素绑定一个事件处理函数。a原创 2021-05-25 19:26:33 · 1453 阅读 · 1 评论 -
React - 红绿灯
React 红绿灯 分别用 components 实现和 hook 实现原创 2021-04-12 16:47:07 · 570 阅读 · 0 评论 -
React - React.cloneElement() 的使用
作用克隆react element, 并传递props, 和childrenReact.cloneElement( element, [props], [...children])克隆原来的元素,返回一个新的 React 元素;保留原始元素的 props,同时可以添加新的 props,两者进行浅合并;key 和 ref 会被保留,因为它们本身也是 props ,所以也可以修改;如果定义了新的 children ,会替换原来的 children ;props也可以传方法,但是,原创 2021-03-04 16:18:48 · 1973 阅读 · 1 评论 -
React - React.Children
React.Children详解原创 2021-03-02 20:19:10 · 815 阅读 · 0 评论 -
React-数据类型的检测PropTypes
数据类型的检测PropTypes原创 2020-11-24 01:06:30 · 1455 阅读 · 0 评论 -
React-监听事件
事件的监听与移除 addEventListener removeEventListener原创 2020-11-22 21:30:30 · 7582 阅读 · 0 评论 -
React - 事件系统
事件系统React 标准化了事件对象,因此在不同的浏览器中都会有相同的属性组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法,如:render、componentWillUpdate、componentDidMount等。用户自定义的方法可以起符合JS命名规范的方法就可以(最好使用驼...原创 2020-02-20 23:50:21 · 264 阅读 · 0 评论 -
React - 相关知识点
1、组件中get的使用(作为类的getter)ES6知识:class类也有自己的getter和setter,写法如下:Class Component { constructor() { super() this.name = '' } // name的getter get name() { ...原创 2020-02-17 12:01:25 · 521 阅读 · 0 评论 -
React - 生命周期 (三)
单个组件class testfirst extends Component { constructor() { super(); console.log('first-constructor'); } componentWillMount() { console.log('first-componentWillMount'); } componen...原创 2020-02-13 17:08:03 · 98 阅读 · 0 评论 -
React - 生命周期(二)
上一个写的是单个组件的生命周期,现在写一个,父子组件和兄弟组件之间生命周期的顺序一、组件生命周期的执行次数是什么样子只执行一次: constructor、componentWillMount、componentDidMount执行多次:render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdat...原创 2020-02-13 17:06:37 · 103 阅读 · 0 评论 -
React - 生命周期(一)
先从来描述单个个体的生命周期挂载卸载过程1.1.constructor()1.2.componentWillMount()1.3.componentDidMount()1.4.componentWillUnmount ()更新过程2.1. componentWillReceiveProps (nextProps)2.2.shouldComponentUpdate(nextProp...原创 2020-02-13 16:31:05 · 185 阅读 · 0 评论 -
React的diff算法与key
相信很多人在进行列表渲染中都会习惯性的用index做为key值,如果只是单纯的数据展示,那就没问题,如果涉及到列表的动态改变,比如增加、删除、排序等,就会出现一些问题。//this.state.list=['1','2','3']{ this.state.list.map((val,index)=>{ return( <div key={index}>...原创 2018-12-10 21:22:03 · 584 阅读 · 0 评论 -
React 中 refs的使用
refs有两种使用方法一、是用回调函数class Test extends Component { testref() { const el =this.codeValue; } render(){ return ( <div ref={(e) => { this.codeValue = e }}></d...原创 2018-11-30 11:17:15 · 249 阅读 · 0 评论 -
react - Context API 的初步尝试
在状态管理里面,使用了 react Context API,现在做一下简单的回顾。使用原因Context 相当于一个全局变量的管理者,定义了 Context 之后,无论你的层级潜逃的有多深,只要你的父级有被 Provider包含,那么你就可以通过 Consumer 访问到在最上层定义的全局变量,这样你就不需要层层将props解构(例如:{ …props })而是可以直接访问使用方法Reac...原创 2019-06-05 20:52:19 · 126 阅读 · 0 评论 -
React - 基础知识点
为什么要引入 Reactimport React from 'react'function A() { return <h1>aaa</h1>} || function A() { return React.createElement("h1", null, "aaa");}有时候你仅仅只是写一个函数不写组件,控制台都会报错,让你引入 Rea...原创 2019-09-03 20:01:58 · 92 阅读 · 0 评论 -
React - 出现的bug
出现警告:Warning: You cannot set a form field before rendering a field associated with the value.这个问题会出现的原因是在调用 form.setFieldValue() 方法的时候,出现了在表单中找不到的属性名,找不到就会跳出警告。// 第一个原因是出现了多余的属性 <Form layout=...原创 2019-09-09 16:59:08 · 330 阅读 · 0 评论 -
React - setState 的用法
React 中的 setState 的用法setState 并不会立即更新setState 会引发组件的重新绘制多个 setState 会合并执行这三个点也可以合在一起来说,首先,我们应该意识到,我们想要更新 state 的值,除了state本身的数值要改变,另外render也必须要执行,这才能让state的更新有意义。所以,state的更新会引起生命周期发生变化。这4个函数依...原创 2019-01-17 14:38:41 · 445 阅读 · 0 评论