typeScript学习总结 基础类型:Boolean、Number、String、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt。继承extends | 任意属性[propName: string] |可选属性?|只读属性readonly |添加函数。void也可以定义undefined 和 null类型。
浏览器是如何渲染页面的? reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后,需要重新计算布局树,会引发 layout。为了避免连续的多次操作导致布局树反复计算,浏览器会合并这些操作,当 JS 代码全部完成后再进行统一计算。所以,改动属性造成的 reflow 是异步完成的。也同样因为如此,当 JS 获取布局属性时,就可能造成无法获取到最新的布局信息。浏览器在反复权衡下,最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
React-Router 参考:React-RouterReact Router 使用教程/阮一峰/ 2016年5月25日文章目录路由器 Router路由导航路由匹配路由的钩子动态路由hooks路由器 Router<Router history={hashHistory}> <Route path="/" component={App}/> </Router>history 属性BrowserRouter调用的是浏览器的History APIH
react 处理表单数据: 受控组件/非受控组件 在大多数情况下,我们推荐使用 受控组件 来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。受控组件表单元素根据用户输入进行更新state状态constructor(props) { super(props); this.state = {value: ''}; }handleChange(event) { this.setState({value: event.target.
import和require的区别 1. 导入导出使用importimport test from test.jsimport * as test from test.jsconst { a, b } = testexportexport default {a ,b}export {a ,b}requirerequire('test.js')2. 导入区别requireimportcommonjses6运行时被加载编译时被加载,必须放在头部,性能更好类似深拷贝浅拷贝(引入的对
React使用/更新useState数据 使用 useState() 进行状态管理useState()是改变状态的开关,将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。import React, { useState } from 'react'; //1.启用状态const [state, setstate] = useState(initialState); //2.初始化状态consloe.log(state); //3.读取setstate(newState); //4.更新状态useState()使用回调更
React 状态管理-redux 文章目录Redux 应用中数据的生命周期store 单一数据源actionreducercontaineraction 普通JavaScript对象 --actioType.js定义行为类型 const GET_STUDENT_LIST = 'get_student_list'store.js 存储数据state --reducer.js 接收state、action,并返回新state的函数 --子reducer.js 每个reducer函数负责独立管理state --出口reduc
CSS命名规范——BEM思想(非常赞的规范) CSS命名规范——BEM思想(非常赞的规范)人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher…BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目...
给前端应届生的职业规划建议 林洋,YMFE 资深前端工程师,负责去哪儿网 Hybrid(Hy)、React Native(QRN)等移动端方案架构、开发和推进,负责一系列基于 Node 的开源平台(YIcon、YApi 等)、开发工具(小程序构建工具、YDoc、YKit 等)的管理维护工作。专注于移动前端,着眼于工程流程化。 【前言】 近一年多的时间,笔者在公司中担任过应届生导师、实习生导师、应届生项目导师等一系列导师角色。期间,笔者发现一些即将和准备成为前端攻城狮的同学其实并没有明确前端真正的核心和定位,也...
ES6(ECMAScript6 )入门 文章目录代码块声明变量变量的解构赋值扩展符...字符串解构赋值对象的解构赋值字符串的扩展遍历器接口模板字符串函数的扩展函数形参 默认值箭头函数 =>********************数组方法的扩展拆开数组复制数组合并数组对象方法 扩展0代码块声明变量let 作用域 提前生成 重复声明constfor循环+计时器******************变量的解构赋值按照对应的结...
ES6 类型定义-箭头函数- promise var提前声明变量 √作用域: 函数let重复定义 ×提前声明变量 ×作用域:块级暂时性死区 √ : 只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError 封闭作用域。凡是在声明之前就使用这些变量,就会报错。 let tmp; tmp = 123; //123}const暂时性死区 √重复定.
Object.create Object.defineProperty 文章目录Object.create()1)创建对象的方式不同2)创建对象属性的性质不同Object.setPrototypeOfObject.defineProperty属性的特性以及内部属性Object.create()Object.create(proto, [propertiesObject]) 创建一个新对象,使用现有的对象来提供新创建的对象的proto。proto : 必须。表示新建对象的原型对象,即该参数会被赋值到目标对象(即新对象,或说是最后返回的对象)的原型上。该参数可以是null,
link @import 区别 这两种方式都是为了加载css文件,但还是存在细微的差别。加载内容link标签除了可以加载css外,还可以做很多其他的事情;@import只能加载CSS。加载顺序的差别页面加载时,link文件同时加载;@import引用的文件等待页面下载完再加载兼容性@import只有在IE5以上的才能识别dom控制样式用JS控制dom去改变样式的时候,只能使用link标签...
CSS --- 样式继承 文章目录常用继承样式内联元素可以继承的属性块级元素可以继承的属性继承规则CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。css属性一旦继承了不能被取消,只能重新定义样式常用继承样式继承虽然减少了重复定义的麻烦,但是,有些属性是不能继承的,例如border(边框)、margin(边距)、padding(补白)和背景等。font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义
Object 对象与方法 JavaScript 对象是键值对的容器键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。访问对象属性两种方式: obj.property 或 obj [“property”]访问对象方法obj.property()对象object循环遍历.each()可以遍历数组和对象 $.each(obj,function(key,value){ console.log("键:"+key+";"+"键值:"+obj[k
JS--数组-- 扁平化 / 去重 文章目录reduce()扁平化(flatten())reduce()reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数描述total 必需。初始值, 或者计算结束后的返回值。currentValue 必需。当前元素currentIndex 可选。当前元素的索引
vue animate.css NPMnpm install v-animate-css --saveUsageimport Vue from 'vue';import AnimateCss from 'animate.css';Vue.use(AnimateCss);
Less Sass less变量 可运算对常用的值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以达到改变全局的效果.border{ border:1px solid red;}@color :blue; //定义变量 @blue : 'color' ;@height:10px; @width:100px; #header { .border //混入class height: @height; width: @width; color: @@blue;