前言
在使用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内部定义非纯函数。
对于这个问题我会继续更新。