美文网首页
前端小知识10点

前端小知识10点

作者: 小进进不将就 | 来源:发表于2020-02-11 19:37 被阅读0次

1、js精度问题:为什么0.1+0.2=0.30000000000000004
详细推导过程,请看:JavaScript之0.1+0.2=0.30000000000000004的计算过程

2、 Number.toFixed() 的 bug

  注意返回结果是字符串 
  1.005.toFixed(2) // '1.00'

没有返回'1.01'的原因:
1.005在 JS 中的存储值是1.00499999999999989,四舍五入得1.00

推荐使用 number-precision 来消除误差,精准进行四则运算

3、git fetch 更新分支
应用场景:
当你将本地的新分支上传到 remote 后,另一开发使用git branch -a没有查看到你上传到remote的新分支

当你将本地的新分支上传到 remote 后,其他开发可执行

git fetch
git branch -a
git checkout [新分支]

来更新、查看、切换到新分支

4、git cherry-pick [commit-id] 在分支A上合并分支B的某次commit
应用场景:
当你只想把分支 A 的某一次 commit 合并到分支 B 上的时候

使用:

git checkout branchA
//查看并复制某次 commit-id
git log

git checkout branchB
//将 branchA 的某次 commit 合并至 branchB 中
git cherry-pick [commit-id]

5、Object.is
① 关于Object.is()的作用及用法,请看:
React源码解析之PureComponet的浅比较

Object.is===的区别:

+0 === -0  //true
Object.is(+0,-0) //false

//NaN 即 window.NaN 是es5 的
//Number.NaN 是 es6 的
Number.NaN === NaN //false
Object.is(Number.NaN,NaN) //true

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description

6、leaflet-path-drag库设置某个图形的draggabletrue时,如何移除该图形

import L from "leaflet";
import "leaflet-editable";
import "leaflet-path-drag";

const item = L.circle(e.latlng, {
        radius: 4,
        draggable: true,
        fillOpacity: 1,
      }).addTo(map);

设置draggable后,不能直接调用remove移除:

//item.remove() 会抛出错误,看的源码才找出如何调用的
item._path.remove()

7、JS 数组去重的几种方式
最简单的:

  const newArr = [...new Set(arr)] 

除此之外的其他方法也能帮助你对数据结构了解的更深入:
https://www.cnblogs.com/zhishaofei/p/9036943.html

8、JS 中的 & 是什么意思
例:

  12 & 6 = ?

解释:
&表示位的与运算,将十进制数字转为二进制,然后每一位进行比较,有1且相等就为1,否则为0,注意——true强制转换为1false强制转换为0

计算过程:

  //12
  1100
  //6
  0110
  //=
  0100 // 4

所以

  12 & 6 = 4

9、getDerivedStateFromProps

getDerivedStateFromProps 的存在只有一个目的:
让组件在 props 变化时更新 state

也就是说:当你组件state的值在任何时候都取决于props,那就使用它:

class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }
    // 返回 null 表示无需更新 state。
    return null;
  }
}

详情请参考:
https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops

https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state

https://zh-hans.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props

10、getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。
它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。
此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

也就是说当你想获取滚动位置,DOM 元素尺寸的时候,就是用它:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 我们是否在 list 中添加新的 items ?
    // 捕获滚动​​位置以便我们稍后调整滚动位置。
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果我们 snapshot 有值,说明我们刚刚添加了新的 items,
    // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
    //(这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

详情请参考:
https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate


(完)

相关文章

  • 前端小知识

    chrome关闭缓存:F12 在network下选中 disable Cache 标签默认type=submit,...

  • 前端小知识

    app: 1.原生app 优势:能调用后台应用 劣势:效率低 开发成本高 2.混合a...

  • 前端小知识

    1.嵌套路由 导航:to="{ path: '/test/submittest' }" 要在前面加上父的地址2.对...

  • 前端小知识

    1、padding:1px2px3px;则等效于什么? 上右下 左复制右 2、内边距的百分数值是这么计算的 根据...

  • 前端小知识

    1、React.PureComponent 与 React.Component 的区别 React.PureCom...

  • 前端知识if小例子

  • 前端的小知识

    这是学校当粗的考试题,当时没怎么重视马马虎虎背了背,后来发现这些理论知识还似挺有用的 1、简述对WEB标准以及W3...

  • 前端知识小库

    醉牛前端 , 收集前端常用的工具集合:http://f2er.club/ Animate.css框架:官网演示:h...

  • 前端小知识<2>

    1、var、let 及 const 区别 var 存在提升,可以在声明之前使用 值为 undefined。let、...

  • 前端开发小知识

    1.el-dialog嵌套在el-popover中但是遮罩层不对的问题参照element 官方文档 设置appen...

网友评论

      本文标题:前端小知识10点

      本文链接:https://www.haomeiwen.com/subject/jmxdgctx.html