DOM 的全称是 Document Object Model (文档对象模型) 响应式 UI const ThinkerWithHat = ({ hat }) => (  <div>    <Hat type={hat} />    <Thinker />  </div>); 注意,你只需定义你想要的 (戴帽子的思想者),并“连接”上数据 (“type = {hat}”) .当数据发生变化时 (用户选择一顶帽子),UI 会自动更新.…

一 代码 import React, { Component } from 'react'; class Box extends Component { render() { return <button>你好</button>; } } export default class MyComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createR…

对react的研究1.class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode ); 2.class Timer extends React.Component { const…

JSX的背后 这个过程一般在前端会称为“转译”,但其实“汇编”将是一个更精确的术语. React开发人员敦促你在编写组件时使用一种称为JSX的语法,混合了HTML和JavaScript.但浏览器对JSX及其语法毫无头绪,浏览器只能理解纯碎的JavaScript,所以JSX必须转换成JavaScript.这里是一个div的JSX代码,它有一个class name和一些内容: <div className='cn'>  Content!</div> 以上的代码,被转换成“正经”的Jav…

对大多数 Web 应用来说,页面性能直接影响着流量.这是一个经常为我们所忽视的事实.用户长时间的等待流失的不仅仅是跳出率.转化率,还有对产品的耐心和信赖.很多时候我们没有意识到性能问题,那是因为平常开发使用的都是高效的设备和网络.而到了真实世界中却会发现,实际用户的网络环境会更加复杂,而如果使用的是移动设备的话,有限的计算能力也会拖慢代码的解析执行,这些都会影响页面的渲染效率. Web 应用的加载速度很大程度上取决于资源的大小,下面是 Youtube 桌面端页面通过 PageSpeed Insi…

问:类继承和原型继承不是同一回事儿吗,只是风格选择而已? 答:不是! 类继承和原型继承不论从本质上还是从语法上来说,都是两个截然不同的概念. 二者之间有着区分彼此的本质性特征.要完全看懂本文,你必须牢牢记住以下几点: 类继承中,实例继承自模版(类),并且创建子类关系.换言之,你不能像使用实例一样使用类.实例由类创建出来,并且能调用类的方法,但是你不能直接在类上调用本身的方法.你必须创建一个实例,然后在实例上应用那些方法. 原型继承中,实例继承自其他的实例.它们使用的是原型委托(将实例的原型对象指…

随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只管从后端接口里,拿到已然整合完善的数据. 然而,不管是因为后端的领域模型,还是因为微服务架构.作为前端,我们感受到的是,后端提供的接口,越发不够前端友好.我们必须自行组合多个后端接口,才能获取到完整的数据结构. 面向领域模型的后端需求,跟面向页面呈现的前端需求,出现了不可调和的矛盾. 这种背景下,本…

1. 图片 把图片放在/static/文件夹中,在component中用img tag: <img src={'../static/icon.png'} /> 2. css 把css文件放在/static/文件夹中,在pages/index.js中添加Head和link: import Head from 'next/head' class HomePage extends React.Component { render() { return ( <div> <Head&g…

组件 第一步是将 UI 分解成多个组件.例如,我们可以这样来拆分房子: 现在来编码! House:  <div>    <Roof />     // 房顶    <Wall />     // 墙    <Window />   // 窗    <Door />     // 门  </div> 等一下,怎么看起来这么像 HTML ?没错!React 的部分代码看上去就是非常像 HTML ,其实就是这样设计的,这是为了让 Web 设…

作为当下最流行的 JavaScript 编译器,Babel 替我们转译 ECMAScript 语法,而我们不用再担心如何进行向后兼容. 零.前言 虽然在 JavaScript 中对象无处不在,但这门语言并不使用经典的基于类的继承方式,而是依赖原型,至少在 ES6 之前是这样的.当时,假设我们要定义一个可以设置 id 与坐标的类,我们会这样写: // Shape 类function Shape(id, x, y) {    this.id = id;    this.setLocation(x,…

pushState/replaceState/popstate 解析 HTML5提供了对history栈中内容的操作.通过history.pushState/replaceState实现添加地址到history栈中. pushState/replaceState() 方法 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容: 状态对象 — 状态对象state是一个JavaScript对象,通过push…

ECMAScript 新特性与标准提案 一:ES 模块 第一个要介绍的 ES 模块,由于历史上 JavaScript 没有提供模块系统,在远古时期我们常用多个 script 标签将代码进行人工隔离.但得益于浏览器和 Node.js 对于 ES 标准的讨论统一,现在我们可以在浏览器中直接书写 ES 模块语法.比如我们新建一个 lib.mjs 文件在其中导出一个函数,那么在 main.mjs 中我便可以直接导入使用它. // lib.mjsexport const repeat = (string)…

作为 Modern JavaScript 基础设施的一部分,Promises 对前端开发者而言异常重要.它是 async/await 语法的基础,是 JavaScript 中处理异步的标准形式.并且,未来的 Web API,只要是异步的,都会以 Promises 的形式出现. 1.实现 Promises/A+ 规范 1.1.前期工作 An open standard for sound, interoperable JavaScript promises https://promisesaplu…

1. 引言 从以下几个方面来阐述这个问题: 特性. 稳定性. 性能. 包生态. 社区. 学习曲线. 文档. 工具. 发展历史. 团队. 兼容性. 趋势. 2.概述 & 精读 特性 当你调研一个 JS 库,功能当然是最重要的,就好比 React 的用于开发 UI 界面非常方便,这是流行起来的一部分因素. 但同时 React 解决的问题很聚焦,于是把例如 Router 和 Store 部分交给社区给解决方案,这就让 Vue 的官方维护生态模式发展了起来.但这更多取决于你的偏好,像 lodash 这种…

最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法. 在调用amap的 Geocoder Api 时,一直不能从AMap对象下找到Geocoder 的方法, 后来花了几个小时的时间找问题在哪 结果在index中引入链接时,需要在链接上配置plugin=AMap.Geocoder, 才能够在AMap调用Geocoder Api. 下面是例子: <script type="text/javascrip…

安装jQuery npm i jquery -S 在那个地方使用jQuery就在什么地方引入jQuery import $ from 'jquery'…

简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码也可以被解析执行,它使用的是我们熟悉的webkit内核.android和ios都有相应的API,所以写一份代码在多个平台运行的能力就是以webview为基础的. 在页面滚动的时候可以通过计算,动态remove节点,保证用户能看到的地方是有内容的,其他滚动卷去的部分就直接remove掉,等滚动回来的时候再加回来.这样保证页面上的节点不会太多,性能自然提升.我没有尝试这种方案,其中的注意事项也不好说.不…

数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象.另外还有已经被废弃的 Object.observe(),废弃的原因正是 Proxy 的出现,因此这里我们就不继续讨论这个已经被浏览器删除的方法了. 数据劫持最著名的应用当属双向绑定,这也是一个已经被讨论烂了的面试必考题.例如 Vue 2.x 使用的是 Ob…

一.优化层级与执行效率的取舍 介绍了现代 JavaScript 引擎通用的工作流程: 我们也指出,尽管从高级抽象层面来看,引擎之间的处理流程都很相似,但他们在优化流程上通常都存在差异.为什么呢?为什么有些引擎的优化层级会比其他引擎多一些?事实证明,在快速获取可运行的代码与花费更多时间获得最优运行性能的代码之间存在一些取舍与平衡点. 解释器可以快速生成字节码,但字节码通常效率不高. 相比之下,优化编译器虽然需要更长的时间进行处理,但最终会产生更高效的机器码. 这正是 V8 在使用的模型.它的解释器…

探索vue源码之缓存篇 一.从链表说起 首先我们来看一下链表的定义: 链表(Linked list)是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer) 其中的双向链表是我们今天的主角: 双向链表也叫双链表.双向链表中不仅有指向后一个节点的指针,还有指向前一个节点的指针.这样可以从任何一个节点访问前一个节点,当然也可以访问后一个节点,以至整个链表.一般是在需要大批量的另外储存数据在链表中的位置的时候用. 图示如下 想象一…

1.    什么是 DOMContentLoaded.打开 Chrome DevTools,切到 Network 面板,重新加载网页,得到如下截图: 标记 1 指向的蓝线以及标记 2 指向的蓝色字 “DOMContentLoaded:1.29s” 均表示 DOMContentLoaded 这个事件触发的时间,只不过表现形式不同而已.     什么是 DOMContentLoaded 我们先来思考一个问题,如何衡量一个网页的加载速度? 有人说可以用网页加载完全的时间来衡量.我觉得这没有问题,但不够…

1. 加载CSS 在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载——根据href指明的链接: 上面的rel指明了它是一个样式文件.这个加载是异步,不会影响DOM树的构建,只是说在CSS没处理好之前,构建好的DOM并不会显示出来.用以下的html和css做试验: demo.css如下: 从打印的log可以看出(添加打印的源码略): 在CSS没有加载好之前,DOM树已经构建好了.为什么DOM构建好了不把html放出来,因为没有样式的html直接放出来,给人看…

什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成.对于一个1200万像素的相机镜头来说,它有1200万个感光单元,它能输出的最大图片分辨率大约为3000 4000. 那么像素本身有大小吗,一个像素有多大? 有的,如果一个像素越小,那么在同样大小的屏幕上,需要的像素点就越多,像素就越密集,如果一英寸有435个像素,那么它的dpi/ppi就达到了435…

nodejs依赖:  dependencies   devDependencies   peerDependencies  bundledDependencies  optionalDependencies  共5种 dependencies 这是 npm 最基本的依赖,通过命令 npm i xxx -S 或者 npm i xxx —save 来安装一个包,并且添加到 package.json 的 dependencies 里面(这里 i 是 install 的简写,两者均可). 如果直接只写一…

1.什么是.idea文件夹 因为IntelliJ IDEA是JetBrains最早推出的IDE(JetBrains一开始叫IntelliJ),因此使用IDEA作为配置文件夹的名称.按照这个SO问题里最高票答案的猜测,或许IntelliJ IDEA这个名字的含义是这样组成的: Intelli ===> Intelligent J ===> Java Idea ===>IDE that is Advanced or Idea just means idea( I have a good id…

React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. React 中的元素引用 正常的组件中,可通过创建对元素的引用来获取到某元素然后进行相应操作.比如元素加载后将焦点定位到输入框. class App extends Component { constructor(props){ super(props); this.inputRef = Reac…

一 在DOM组件中使用 import React, { Component } from 'react'; // 跳转引用对象本身并不关心ref,而是由渲染函数转发ref const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); class App exten…

前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果. 事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快…

我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结.无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划,你都有可能从学习这个主题中受益. 为了节省你的时间,提前做出如下声明:在哪个框架更好这个问题上,本文不会给你一个明确的答案.但是,不想其他类似主题的文章.我不能告诉你答案,是因为一项特定的技术是否适合你的开发环境和使用场景取决于多种因素. 由于不能直接回答这个问题,我们会尝试从其他的方面进行解释.…

初始化阶段可以使用的函数:getDefaultProps:只调用一次,实例之间共享引用.只有在组件的第一个实例被初始化的时候,才会调用他,然后react会把这个函数的返回结果保存起来,从第二个实例开始,他们的默认属性都是这同一个结果.实例之间共享引用,在js中有两种类型的数据,一种值类型,比如字符串,布尔值等,一种是引用类型,比如数组,对象等,如果函数返回的是引用类型的数据,那么react会把引用保存起来,在创建不同的实例的时候,他会使用同一个引用当做属性,但是我们知道,引用指向的都是同一个地址…