112019.11

前端获取IP

在前端js代码中获取用户的IP地址:

export function getUserIP() {
  return new Promise((resolve, reject) => {
    const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    const pc = new RTCPeerConnection({
      iceServers: []
    })
    const noop = function() {}
    const localIPs = {}
    const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g
    const iterateIP = (ip) => {
      if (!localIPs[ip]) {
        resolve(ip)
      }
      localIPs[ip] = true
    }

    //create a bogus data channel
    pc.createDataChannel('')
    // create offer and set local description
    try {
      pc.createOffer(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
          if (line.indexOf('candidate') < 0) {
            return
          }
          line.match(ipRegex).forEach(iterateIP)
        })
        pc.setLocalDescription(sdp, noop, noop)
      }, function(sdp) {
        reject()
      })
    }
    catch (err) {
      reject(err)
    }
    //listen for candidate events
    pc.onicecandidate = function(ice) {
      if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) {
        return
      }
      ice.candidate.candidate.match(ipRegex).forEach(iterateIP)
    }
  })
}

需要用到webRTC,如果不支持该接口,那就无法获取。

16:54:19 已有0条回复
072019.11

react诡异的input无法输入问题,createPortal来解决

这写Modal的时候遇到一个诡异的react问题,即input无法输入。不能说资深,但是对于自认为熟谙套路的react开发者,检查了好几遍,调试了好一会儿,还是解决不了。

就在我快要放弃的时候,我突然想到,是不是所在组件树的上层组件在处理children的时候对input做了处理?按理不该啊。

于是我对嵌套的上一层组件内部实现进行了检查,最后发现,果然是在Modal的实现中,使用了ReactDOM.render来更新渲染,从而实现延时的动画效果。果然是一大堆坑。

在实现Modal时,为了实现过渡动画,要采用一个特殊的办法,当DOM挂载好之后,不能立即显示,而是要通过一个时间来过渡。由于element.style的操作会合并,一次性更新,所以当DOM卸载时,直接就将Modal干掉了。因此,Modal组件内部通过state维护了两个状态display和visible。display用于控制DOM的挂载卸载,visible用于控制显示隐藏。特别是在关闭Modal过程中,要先visible=false,等过渡时间结束之后才能display=false。

遇到这种情况,通过ReactDOM.render来更新DOM的操作就会导致input无法输入。因为render函数在做diff的时候,render是全量diff,在input没有key的情况下,ReactDOM无法确认是否其value要使用对应值。甚至在其所在树的上层,就已经把它干掉了。

通过createPortal可以解决这个问题。

ReactDOM.createPortal用以创建一个React虚拟树,该虚拟树被挂载在原虚拟树中,但是,在渲染到DOM中时,却被挂载在createPortal的第二个参数上。

这就出现了一种不常见的现象:virtual dom和真实的DOM并非以相同的结构存在。让我们来用代码演示一下。

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }
  componentDidMount() {
    document.body.appendChild(this.el)
  }
  componentWillUnmount() {
    document.body.removeChild(this.el)
  }
  render() {
    return (
      <div className="root">
        {ReactDOM.createPortal(<div className="child">child</div>, this.el)}
        <div>xxx</div>
      </div>
    )
  }
}

上面这段代码,虽然在虚拟树中,.child是.root的第一个子节点,但是在真正的DOM中,.child被挂载在body下的一个空div中,这个空的div就是我们在constructor中创建的那一个。

而通过createPortal创建的虚拟树本身是属于react的元素树的一个节点,因此,在实际更新的时候,完全遵循react的虚拟树逻辑,也就避免了文章开头提到的问题。

22:51:04 已有0条回复

域名备案完成,博客恢复

两个星期博客无法访问,小伙伴问我怎么回事,原因是域名在备案。在阿里云的备案过程非常简单,从开始填信息到提交管局,一天时间,不得不说随着技术进步,备案更方便了,以前起码还得邮寄幕布,然后拍照上传,现在直接张张嘴眨眨眼人脸识别就完成了。主要的时间都浪费在管局审核上面。

最近又掌握了不少东西,博客恢复后又要一波写写写了吧。

13:44:15 已有0条回复