随笔分类 - react
1
前端框架之-react
摘要:众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React 代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编
阅读全文
摘要:1. 语法上的区别: 函数式组件是一个纯函数,它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的,而且class组件需要创建render并且返回React元素,语法上来讲更复杂。 2. 调用方式 函数式组件可以直接调用,返回一个新的Reac
阅读全文
摘要:一、是什么 组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则: 可以编写局部css,不会随意污染其他组件内的原生; 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式; 支持所有的css特性:伪类、动画、媒体查询等; 编写起来简洁方便、最好符合一贯的c
阅读全文
摘要:一、是什么 版本控制(Version control),是维护工程蓝图的标准做法,能追踪工程蓝图从诞生一直到定案的过程。此外,版本控制也是一种软件工程技巧,借此能在软件开发的过程中,确保由不同人所编辑的同一程序文件都得到同步 透过文档控制,能记录任何工程项目内各个模块的改动历程,并为每次改动编上序号
阅读全文
摘要:一、是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使用和维护react过程中常遇到的问题,例如: 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件
阅读全文
摘要:一、是什么 高阶函数(Higher-order function),至少满足下列一个条件的函数 接受一个或多个函数作为输入 输出一个函数 在React中,高阶组件即接受一个或多个组件作为参数并且返回一个组件,本质也就是一个函数,并不是一个组件 const EnhancedComponent = hi
阅读全文
摘要:一、受控组件 受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据 举个简单的例子: class TestComponent extends React.Component { constructor (props) { super(props); this.state = { us
阅读全文
摘要:一、类组件 类组件,顾名思义,也就是通过使用ES6类的编写形式去编写组件,该类必须继承React.Component 如果想要访问父组件传递过来的参数,可通过this.props的方式去访问 在组件中必须实现render方法,在return中返回React对象,如下: class Welcome e
阅读全文
摘要:一、是什么 Refs 在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素 本质为ReactDOM.render()返回的组件实例,如果是渲染组件
阅读全文
摘要:一、是什么 首先,给出react组件中进行列表渲染的一个示例: const data = [ { id: 0, name: 'abc' }, { id: 1, name: 'def' }, { id: 2, name: 'ghi' }, { id: 3, name: 'jkl' } ]; const
阅读全文
摘要:一、是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目
阅读全文
摘要:一、是什么 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式 在React中,一个类、一个函数都可以视为一个组件 在Vue系列中,我们了解到组件所存在的优势: 降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、
阅读全文
摘要:一、是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render()
阅读全文
摘要:一、是什么 React基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等 在React中这套事件机制被称之为合成事件 合成事件(SyntheticEvent) 合成事件是 React模拟原生 DOM事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器
阅读全文
摘要:一、是什么 一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state 当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用 如下例子: import React, { Component } from 'react' export defaul
阅读全文
摘要:一、ES6类 在ES6中,通过extends关键字实现类的继承,方式如下: class sup { constructor(name) { this.name = name } printName() { console.log(this.name) } } class sub extends su
阅读全文
摘要:一、state 一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state,一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用,并且重新调用组件render方法,如下面的例子: class Button
阅读全文
摘要:一、是什么 在Vue系列中,我们了解到生命周期定义 生命周期(Life Cycle)的概念应用很广泛,特别是在经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程 跟Vue一样,React整个组件生命周期包括从创建、初始化数
阅读全文
摘要:一、是什么 Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构,如下: Virtual Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述 创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中,虚拟
阅读全文
摘要:一、是什么 React,用于构建用户界面的 JavaScript 库,提供了 UI 层面的解决方案 遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效 使用虚拟DOM来有效地操作DOM,遵循从高阶组件到低阶组件的单向数据流 帮助我们将界面成了各个独立的小块,每一个块就是组件,这
阅读全文
1