React H5开发遇到的两个问题

前言

在使用create-react-app开发React移动端应用时,遇到了两个问题,一个是如何在其他设备上查看自己本地开发的网页,另一个是React Hooks的一个错误。

局域网不同设备查看本地开发应用

这个问题其实我一直没有太注意过,一个是需求也不是很大,毕竟所有的都是我自己一个人参与开发的,不需要团队协作对于同一局域网下协作开发自然也不太在意;另一方面就是,create-react-app的终端会告诉你局域网ip,并不觉得会出现什么问题。

You can now view mymusic in the browser.

  Local:            http://localhost:3000/       
  On Your Network:  http://10.0.75.1:3000/       

Note that the development build is not optimized.
To create a production build, use yarn build.

于是在确认了电脑和手机处于同一局域网之后,我开始在自己的手机上查看开发状态,然而并不能看到。。。

这就很奇怪了。

于是我又使用ipconfig查看IP:

以太网适配器 vEthernet (DockerNAT):

   连接特定的 DNS 后缀 . . . . . . . :
   IPv4 地址 . . . . . . . . . . . . : 10.0.75.1
   子网掩码  . . . . . . . . . . . . : 255.255.255.0
   默认网关. . . . . . . . . . . . . :

没想到create-react-app打开的局域网居然是这个,那么都涉及到docker肯定是不对的了。

于是找到自己的WLAN:

无线局域网适配器 WLAN:

   连接特定的 DNS 后缀 . . . . . . . :
   IPv4 地址 . . . . . . . . . . . . : 192.168.1.103
   子网掩码  . . . . . . . . . . . . : 255.255.255.0
   默认网关. . . . . . . . . . . . . : 192.168.1.1

成功。

关于docker生成的网络,等自己有空了再研究下。

ESlint会检测react hooks中调用某函数报错的问题

说实话,这两个问题都不太好描述。

React Hook useEffect has missing dependencies: 'bounceBottom', 'bounceTop', 'click', and 'direction'. Either include them or remove the dependency array

根据神三元大佬的小册做工程时,发现了这个问题,而加上eslint取消检测的注释会发现这个错误就消失了。

  useEffect(() => {
    const scroll = new BScroll(scrollContainerRef.current, {
      scrollX: direction === 'horizental',
      scrollY: direction === 'vertical',
      probeType: 3,
      click: click,
      bounce: {
        top: bounceTop,
        bottom: bounceBottom
      }
    });
    setBScroll(scroll);
    return () => {
      setBScroll(null);
    };
    //eslint-disable-next-line
  }, []);  useEffect(() => {
    const scroll = new BScroll(scrollContainerRef.current, {
      scrollX: direction === 'horizental',
      scrollY: direction === 'vertical',
      probeType: 3,
      click: click,
      bounce: {
        top: bounceTop,
        bottom: bounceBottom
      }
    });
    setBScroll(scroll);
    return () => {
      setBScroll(null);
    };
    //eslint-disable-next-line
  }, []);

这也是Hooks和ESLint之间存在的一个问题,目前大多解决方式都是加上取消ESLint检测或者在useEffect内部定义非纯函数。

对于这个问题我会继续更新。

发布了391 篇原创文章 · 获赞 468 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览