前端小知识10点(2020.3.20)
在看 React 源码时，发现了下面一段代码，不是自己熟悉的写法：
const arr=[1,2,3]
for(let i in arr){
if(arr[i]!==2){
continue
}
arr[i]=arr[i]*2
}
console.log(arr) //[1,4,3]
其实逻辑跟下面写法一样：
const arr=[1,2,3]
for(let i in arr){
if(arr[i]===2){
arr[i]=arr[i]*2
}
}
console.log(arr) //[1,4,3]
2、JS 中的 | 是什么意思？
//React源码中的一段
workInProgress.effectTag |= Update;
例：
12 | 6 = ?
解释： | 表示位的或运算，将十进制数字转为二进制，然后两数的每一位进行比较，只要有1就为1， 两位均为 0，才为 0 计算过程：
//12
1100
//6
0110
//=
1110 //14
扩展：
JS 中的 & 是什么意思？
如：12 & 6 = ?
请看：
前端小知识10点(2020.2.10)
3、React中suppressContentEditableWarning属性是什么意思？
<div suppressContentEditableWarning>aaa</div>
通常，当拥有子节点的元素被标记为 contentEditable 时，React 会发出一个警告，因为这不会生效。该属性将禁止此警告。
尽量不要使用该属性，除非你要构建一个类似Draft.js(https://facebook.github.io/draft-js/) 的手动管理 contentEditable 属性的库。
也就是说，除非你想写一个React富文本编辑器，否则不要使用该属性。
详情请见： https://zh-hans.reactjs.org/docs/dom-elements.html#suppresscontenteditablewarning
https://draftjs.org/
4、react-codemirror，一个基于React的代码高亮编辑文本库
例：
import CodeMirror from 'react-codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/lib/codemirror.css'
<CodeMirror
// onFocusChange={(focused: boolean) => {
// }}
// value={}
// autoFocus
// onChange={newCode => {
// }}
options={{
mode: 'javascript',
lineNumbers: true,
}}
/>
codemirror.gif
GitHub： https://github.com/JedWatson/react-codemirror
5、yarn安装antd-pro依赖包时卡在puppeteer的解决办法
请看： https://www.jianshu.com/p/2ce56dccc5a7
puppeteer是前端自动化测试用的，GitHub： https://github.com/puppeteer/puppeteer
6、document.createElement('ul', { is : 'expanding-list' })中is是什么作用？
is是自定义元素标签的名字，参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
如何使用可参考： https://www.jianshu.com/p/65fecf2d25cahttps://github.com/vivaxy/course/tree/master/native-api/custom-elements
7、js取随机数的技巧
Math.random().toString(36).slice(2)
8、React点击div复制一段文字
const hideInput = React.useRef(null)
<div
style={{ cursor: 'pointer' }}
onClick={() => {
if (hideInput.current && hideInput.current.input) {
hideInput.current.input.value = storeInfo;
hideInput.current.input.select();
document.execCommand('copy');
message.success('复制成功！');
}
}}
>
点击复制！
</div>
<Input style={{
position:'absolute',
top:-9999,
left:-9999,
}} ref={hideInput}
/>
关于document.execCommand('copy')的API介绍，
请看：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
9、将单引号字符串数组（"['a','b','c']"），转成数组（[a,b,c]）
先将每个 item的单引号替换成双引号，然后用JSON.parse()转换即可
const a="['a','b','c']"
console.log(JSON.parse(a.replace(/'/g,'"'))) //["a", "b", "c"]
10、React 组件的 key 不能作为 prop 传给组件
import childComponent from './'
function App(){
return (
<childComponent key='aaa' newKey='aaa'/>
)
}
function childComponent(props){
const {key,newKey}=props
console.log(key,newKey) //undefined aaa
...
...
}
腾讯云开发者
