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内部定义非纯函数。

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