Glossary of Modern JavaScript Concepts: Part 1
每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form>、<group>、 等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。01
vue 中使用 jsx 调用方式 标签函数组件 // 模式1: 类式函数组件 const Sub = { functional: true, name: "Sub", render(h, context){...} } // 模式2: 函数式函数组件 const Sub = (context) => ( { context.props.title } ) // 标签式调用 <template>
我之前一直使用的React,最近到了新公司,需要使用Vue,虽然之前自己写过一些小demo,但是缺乏系统的学习,且之前自己看的vue1.x的内容,好多都过时了,现在补充一下vue2.x的相关知识。
在shouldComponentUpdate()判断中,有一个有意思的问题,解释为什么 React setState() 要用不可变值
UDP在传输数据之前不需要先建立连接,远地主机的运输层在接收到UDP报文后,不需要确认,提供不可靠交付。总结就以下四点:
不同于面向对象编程(OOP)中通过抽象出各种对象并注重其间的解耦问题等,函数式编程(FP) 聚焦最小的单项操作,将复杂任务变成一次次 f(x) = y 式的函数运算叠加。函数是 FP 中的一等公民(First-class object),可以被当成函数参数或被函数返回;同时,这些函数应该不依赖或影响外部状态,这意味着对于给定的输入,将产生相同的输出。
通过对上面的代码进行分析,不难发现,Vue模板中的每一个元素编译之后都会对应一个createElement。
当然,这些面试题的答案都不是标准答案,只是对答案做了一个简介明了的说明,希望可以快速帮助你梳理重点核心内容。
当写过许许多多程序后,接触了那么多编程模式、设计模式、框架、语言、算法、数据结构以后,就会发现编程的本质万变不离其宗就是,操纵一坨数据。当然操纵的方式有许多,存储的方式也五花八门,但是本质不变,就是访问数据(读取以及改变)。
在React 函数式组件(FC)中,我们使用 useRef hook 来声明 ref 数据,可能你对 ref 特性或者 useRef hook 并不熟悉,这里有一篇文章深入浅出地介绍了 useRef 及其应用场景 。
你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持的。在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。
(3)组件事件回调函数方法的作用域是组件实例化对象(绑定父组件提供的方法就是父组件实例化对象),无法改变。
#javascript培训 @author:zhoujiaping @date:2017-08-01
React.forwardRef 会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见,但在以下两种场景中特别有用:
作用域就是JS函数和变量的可访问范围,分为全局作用域、局部作用域和块级作用域。全局作用域是整个程序都能访问到的区域,web环境下为window对象,node环境下为Global对象。局部作用域也就是函数作用域,在函数内部形成一个独立的作用域,函数执行结束就销毁,函数内部的变量只能在函数内部访问。块级作用域,使用let或const关键字声明变量之后,会生成块级作用域,声明的变量只在这个块中有效,并且在这个块中let或const声明的变量必须先声明后使用。
JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。
HTML 常见标签和属性 文档类型声明 转义字符 网页访问无障碍(只是了解) CSS 常用选择器 样式生效规则(浏览器的默认样式,选择器权重的计算,样式的继承综合作用的结果)。 常用样式 布局 盒模型 水平,垂直居中 布局技术 相对,绝对和固定定位 Float(不推荐。功能弱,还要去浮动) inline-block(兼容旧些的浏览器用) Flex (主流) Grid(和Flex配合,面向未来)(只是了解) 响应式 媒体查询 rem 的使用(配合 JS 动态设置根节点的字体大小更灵活)。 效果 过
严格模式是ES5中添加的javascript的另一种运行模式,它可以禁止使用一些语法上不合理的部分,提高编译和运行速度,但语法要求也更为严格,使用use strict标记开启。
如果你是一位前端开发者,又在某些机会下阅读过一些 Java 代码,可能会在后者中看到一种类似 ES6 语法中箭头函数的写法
计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面。
组件是自我维持的、独立的微实体,其描述了UI的一部分,可以将应用程序的UI拆分为较小的组件,其中每个组件都有自己的代码、结构和API,简单来说组件允许你将UI拆分为独立可复用的代码片段,并对每个片段进行独立构思。
这是一个非常经典的例子,页面上渲染出三个button。当我点击+之后,页面重新渲染为1。
如果使用过react和vue,应该发现过一个问题:vue告诉我们不应该把方法、生命周期用箭头函数去定义;而在react的类组件中,把方法写成箭头函数的形式却更方便。
props 更新流程: 相对于 state 更新,props 更新后唯一的区别是增加了对 componentWillReceiveProps 的调用。关于 componentWillReceiveProps,需要知道这些事情:
Hooks 顾名思义,字面意义上来说就是 React 钩子的概念。通过一个 case 我们对 React Hooks 先有一个第一印象。
首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components写在同一个文件中,复杂的建议放在单独的Styles.js文件中,当然也可以不采用CSS-IN-JS的方式,使用Less/Sass来写,然后在文件中import进来。
IIFE或立即调用的函数表达式是在创建或声明后将被调用或执行的函数。 创建IIFE的语法是,将function (){}包裹在在括号()内,然后再用另一个括号()调用它,如:(function(){})()
简言之,HOC是一种组件的设计模式,HOC接受一个组件和额外的参数(如果需要),返回一个新的组件。HOC 是纯函数,没有副作用。
2. 尽量不要在 componentWillReviceProps 里使用 setState,如果一定要使用,那么需要判断结束条件,不然会出现无限重渲染,导致页面崩溃
在 React源码中,当具体到某一事件处理函数将要调用时,将调用 invokeGuardedCallback方法。
从根本上说,hooks 是一种相对简单的方式去封装状态行为和用户行为。React 是第一个使用 hooks 的,然后广泛地被其他框架(比如:Vue、Svelte)所接受。但是,hooks 函数式的设计需要对 javascript 的闭包有一个深刻的理解。
连续几篇文章,每篇都有女神,被掘友给吐槽了,今天不提了女神了,反正女神都是别人的(扎心了)。这两天小编看了腾讯与老干妈的事情,晚上馒头夹老干妈吃起来都感觉很带劲。今天这篇文章将给大家小编在项目中使用JSX的一些实战经验。其实一般情况下写Vue还是比较推荐template的写法的,但是有时候我们真的需要更灵活的去做一些功能,这时候就需要用到JSX了。
yield实际就是暂缓执行的标示,每执行一次next(),相当于指针移动到下一个yield位置
HTML,即超文本标记语言,几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中,甚至可以创建图表。
在我们之前的文章中,不管是讲作用域、闭包还是全局变量。Environment都作为关键部分,出现好多次。所以,今天我们从多方面来讨论一下Environment。(有些知识点可能在前面的文章中涉及到)
总结: 类组件可以维护自身的状态变量,即组件的 state ,类组件还有不同的生命周期方法,可以让开发者能够在组件的不同阶段(挂载、更新、卸载),对组件做更多的控制。类组件则既可以充当无状态组件,也可以充当有状态组件。当一个类组件不需要管理自身状态时,也可称为无状态组件。
translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。⽽改变绝对定位会触发重新布局,进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效,可以缩短平滑动画的绘制时间。 ⽽translate改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。
没有什么问题。这种方式很少被使用,咱们可以将一个函数传递给setState,该函数接收上一个 state 的值和当前的props,并返回一个新的状态,如果咱们需要根据以前的状态重新设置状态,推荐使用这种方式。
JavaScript是一门多范式的编程语言,其中函数是其核心特性之一。函数在JavaScript中起到至关重要的作用,不仅可以实现模块化的代码结构,还可以用于处理数据、控制流程、创建对象,以及执行各种任务。本文将深入探讨JavaScript函数的各个方面,包括函数的定义、参数传递、作用域、闭包、回调函数等,以帮助您更好地理解和利用JavaScript中的函数。
React是一个为数据提供渲染为HTML视图的开源JavaScript库。拥有虚拟DOM、组件化设计模式、声明式代码、单向数据流、使用JSX描述UI信息等特点。
随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
在不同的接口请求数据然后拼合成自己所需的数据,通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数)
React 源码版本: v16.9.0 源码注释笔记:airingursb/react 1 Class Component VS. Functional Component 根据 React 官网,React 中的组件可分为函数式组件(Functional Component)与类组件(Class Component)。 1.1 Class Component 这是一个我们熟悉的类组件: // Class Componmentclass Welcome extends React.Component {
重排(也称回流): 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。 触发:
(1)无状态函数式组件 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态的操作
利用JS来控制页面控件的显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。
领取专属 10元无门槛券
手把手带您无忧上云