yangchch6
yangchch6
大家应该熟悉 React ref，它可以用来获取组件实例对象或者是DOM对象。而 useRef 这个 hooks 函数，除了传统的用法之外，还可以“跨渲染周期”保存数据。 ## useRef 传统用法 获取组件实例对象或者是DOM对象 ```js import React, { useState, useEffect, useRef, useMemo } from 'react'; const Demo = () => { const [count,...
## React useMemo 作用 useMemo 与 PureComponent 功能类似，都是使组件不会因为其他不相关的参数变化而重新渲染。 PureComponent 适用于 class 组件，useMemo 适用于 Function 组件。另外 React.useMemo 可以指定一个参数，只有当这个参数改变时，才会重新渲染组件。 ## 如何使用 ``` import React, {useMemo, useState} from 'react' function Child (props) {...
> 在[官网Icon组件示例](http://bee.tinper.org/bee-icon#bee-icon)中列举了tinper-bee的所有字体图标，本文总结了开发者更新字体图标的具体步骤。 ### 前面的 - 关于字体图标，tinper-bee组件库默认加载cdn的地址，如果你的项目是私有化部署，不能访问外网资源的话，可以查阅[这篇文章](https://github.com/iuap-design/blog/issues/318) - 关于字体文件，总的包括demo的html和css文件、iconfont的css、js以及各种字体文件，demo是使用说明，iconfont文件是使用这个图标库所必须的文件，可根据使用的具体方式引用相应文件  - tinper-bee-core是组件库的核心样式及公用方法库，新增的字体文件也需要在这里备一份 ## iconfont更新步骤 ### 1. 更新tinper-bee-core的图标文件 - 用新的字体文件替换以下tinper-bee-core/scss目录下的文件，包括： - iconfont.eot - iconfont.js - iconfont.woff - iconfont.ttf - iconfont.svg - 在新字体文件的iconfont.css中找到待增加的图标，复制添加到tinper-bee-core/util-iconfont.css对应的地方，如下：...
html 原生的 focus 方法适用于：input、select、button、textarea、radio、checkbox 等元素。 实际开发场景中，可能需要用 div 替代表单元素，或是在 div 上调用 focus() 方法。 那么最简单粗暴的方法就是：添加 contenteditable 属性。 ``` 这是一段可编辑的段落。请试着编辑该文本。 ``` 然后就可以像 input 一样，调用 focus() 和 blur() 方法。 ``` function getfocus() { document.getElementById("myText").focus();...
## Navigation Timing API Navigation Timing API 提供了可用于衡量一个网站性能的数据。在页面load完之后我们可以从performance.timing对象中拿到我们需要的所有数据。见下图：  ## 各阶段说明 每一个performance.timing属性都表示一个页面事件（例如页面发送了请求）或者页面加载（例如当DOM开始加载），测量以毫秒的形式从1970年1月1日的午夜开始。结果为0表示该事件未发生（例如redirectEnd或者redirectStart等）。  1）navigationStart：加载起始时间； 2）redirectStart：页面重定向时的开始时间（如果存在重定向的话）或者是0； 3）redirectEnd：如果存在重定向的话，redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。否则的话就是0； 4）fetchStart：浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间； 5）domainLookupStart：查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart； 6）domainLookupEnd：查询DNS的结束时间。如果没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart； 7）connectStart：当浏览器开始于服务器连接时的时间。如果没有建立连接，如请求是keep-alive、缓存等，那么它的值等同于domainLookupEnd； 8）connectEnd：当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接，如请求是keep-alive、缓存等，那么它的值等同于domainLookupEnd； 9）secureConnectionStart：如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0； 10）responseStart：指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻； 11）responseEnd：指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻； 12）domLoading：指document对象创建完成的时刻； 13）domInteractive：指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。 14）domContentLoadedEventStart：当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻； 15）domContentLoadedEventEnd：当DOMContentLoaded事件完成之后的时刻。它也是javascript类库中DOMready事件触发的时刻； 16）domComplete：如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。 17）loadEventStart：该属性返回的是load事件刚刚发生的时刻，如果load事件还没有发生，则返回0。...
## 前言 在处理 bee-table 的错位问题时，遇到一个 inline-block 元素设置 `overflow：hidden` 后，元素高度意外增大的问题。如下图，表格第一列的单元格内容是行内块元素 label 标签，其高度是0，但是父元素却被撑得很高。 #### 问题1：Table组件里，带有复选框和tooltip的行，高度超出预期，造成错行问题。 #### 问题2：Table组件里，带有Radio的行，高度超出预期，行高被撑得很大。 ## 探究原因 > ‘inline-block’的baseline是其在normal flow中的最后一个line box的baseline，除非它没有in-flow line boxes，或者其‘overflow’属性不等于‘visible’，这种情况下，其baseline位于bottom margin边上。 解释如下： i) 如果inline-block的overflow设为visible（默认属性），则其baseline是当前行的containing block的baseline。 ii) 如果overflow设为其他，则其bottom...
## 前面的 浏览器的默认字体高都是16px ## 使用%单位方便使用 css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。 因为100%=16px，1px=6.25%，所以10px=62.5%， 这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来，很方便了吧！ ## 使用方法 rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可； 例子： ``` /*16px * 312.5% = 50px;*/ html{font-size: 312.5%;} /*50px * 0.5 = 25px;*/ body{ font-size: 0.5rem; } ```...
## 浮动带来的问题 当 N 个元素浮动后，会导致错位的问题。一般给元素一个固定的 height 就没有这个现象。下面与大家分享下当高度不一致时的解决方法。 ## 问题现象 如图，设置 8 个元素向左浮动，会看到从第 7 个元素开始，产生错位。  ## 解决方案 给换行开始的第一个元素 `clear:left;` 即可 例如：三列布局应该是第4个，7个... 加 `clear:left;` ``` .width-percent-33:nth-child(3n+1) { clear: left; } ```...
## 前面的 项目上线的时候，都会锁定 package.json 文件中依赖的插件和库版本号。并且需要拉取对应的 tag，方便后续能够快速响应实施过程中出现的问题。 ## git使用tag恢复到以前的版本 假如我们的开发主线已经更新到 3.0.0 版本，当项目上使用的 2.2.0 版本出现问题时，我们需要把开发基线恢复到 2.2.0 对应的 tag 上去，然后出对应的补丁包。具体步骤如下： 1、查看已有的 tag 列表 ``` git tag ``` 2、查看某个 tag 对应的 commit id ```...
## 问题 less 中设置 calc(100% - 22px) 会编译成 calc(78%) ## 原因 出现这个问题的原因是less的运算方式和calc发生了冲突 ## 解决方法 ``` .test{ width: calc(~"100% - 50px"); } 编译为 .test{ width: calc(100% - 50px); } ``` 如果进行数值和变量之间的运算可以这样设置：...