普拉斯强

普拉斯强 查看完整档案

上海编辑  |  填写毕业院校鞋厂  |  CODER 编辑 github.com/yaofly2012/note/issues 编辑
编辑

前端er

个人动态

普拉斯强 回答了问题 · 2月24日

关于 vue 数组响应式原理的源码问题

没研究过源码,不知道代码逻辑上下文。单从代码逻辑看,args.slice(2)就是获取splice方法的实参中被添加的元素列表。
splice(start[, deleteCount[, item1[, item2[, ...]]]])

关注 3 回答 2

普拉斯强 关注了问题 · 2月24日

关于 vue 数组响应式原理的源码问题

在自己尝试阅读源码的时候

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice'://这里为什么需要特殊处理啊
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

发现其中 case splice 进行了特殊处理 一时想不通
请教各位大佬!

关注 3 回答 2

普拉斯强 回答了问题 · 2月16日

解决JS正则取消贪婪性

const result = string.match(/\[.*?\]/g)
// result => ["[大怒]", "[微笑]"]

参考JS-RegExp函数

关注 2 回答 1

普拉斯强 回答了问题 · 2月14日

react state hook 的一个小问题

懒计算问题,看看这个文章 解密React state hook

关注 2 回答 1

普拉斯强 回答了问题 · 2月13日

使用React hooks如何只让下面这段代码的子组件只render一次?

无法避免。但是可以跳过组件B的子组件重新渲染:

const B = React.memo(({count}) => {
  const [number, setNumber] = useState(0)
  const initCountRef = useRef(0);
  if(initCountRef.current !== count) {
    setNumber(count);
    initCountRef.current = count;
  }

  console.log('子组件render', number)
  return <div>
    <p>我是子组件</p>
    <p>子组件的number是{number}</p>
    <button onClick={() => setNumber(number + 1)}>click</button>
  </div>
})

关注 4 回答 3

普拉斯强 回答了问题 · 2月9日

在实现bind函数时,源码中的instanceof起到什么作用?

个人感觉理解有几点误区:

  1. 上面p函数如果直接调用 bind里的fn内部this就指向window

    此时函数_this内部的this变量指向的是ctx

  2. 但是如果用new实例化,bind里的fn内部的this就指向了 fn

    此时函数_this内部的this变量指向的是函数fnthis

可以看下这个,里面有关于bind函数的实现解析。

关注 2 回答 2

普拉斯强 关注了问题 · 2月3日

useMemo依赖太多怎么优化

如题,useMemo确实能很好的控制页面的刷新次数,但是项目维护到最后Memo的依赖太多了,多到不敢添加了,目前已经把组件拆的比较细了,奈何逻辑复杂,状态比较多,不依赖的话,组件刷新次数很多,性能不好,各位是怎么优化的,目前Memo依赖已经超过10个了。

关注 3 回答 1

普拉斯强 回答了问题 · 2月2日

解决js求一个正则的写法

function getX(str) {
    const match = str.match(/\(([^,]+)/);
    return match ? match[1] : '';
}

// TEST
getX('rotate(12,20.0219312 123.289)') // 12
getX('rotate(12.5,20.0219312 12.3289)') // 12.5

关注 2 回答 1

普拉斯强 回答了问题 · 2月2日

用React写函数组件,如何避免重复渲染?

大部分情况下我们确实不需要关心性能问题,这也是为啥“开发者没有使用useCallback的意识”。作为item组件的开发者也没必要过早的优化item组件,如果组件使用方遇到了性能问题,他可以自己选择优化方案,比如使用React.memouseCallback等。把选择权交给组件使用方更好些。

关注 3 回答 3

普拉斯强 关注了问题 · 2月1日

诚心提问,大家到底怎么做移动端适配

很早的方案,用rem 或者 em,但这两个我都发现了兼容性问题,比如有些安卓机小于1的px无法作为rem基准值,还有的压根不识别em。

最近的viewport方案,兼容性好很多,也方便很多但都是跟着设备宽度来的,当我设备宽高比变了的时候,其实还原度是很差的。大屏设备理应看到看到更多的内容而不是更大的内容。而且比如有些视觉就是要和高度相关,vw vh混用,一些设备更难调

再说回px,这个是不是才是最终解?根据dpr最终来算出我的每个元素的px值

关注 6 回答 6

认证与成就

  • 获得 231 次点赞
  • 获得 11 枚徽章 获得 1 枚金徽章, 获得 2 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2016-11-02
个人主页被 5k 人浏览