本文主要是介绍2021.12.14 每天进步一点点： 关于静态资源如video在react中的使用和区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
关于静态资源如video在react中的使用
- 导读
- 静态资源的放置
- 各自的分工和好处
- /public
- /src
- 静态资源的引入和使用
- require和import在引入时的区别
- 在react中使用video
- 参考文档
导读
刚仿照b站，写了一个banner位置的背景播放video 。
就是这个banner位置的背景，
虽然是非常简单的一个东西， 却引出了很多的知识点。
经过深扒，确实应该好好了解一下。
比如说，
1. react中，public和src都可以放置静态资源，
为什么最新版本的react却提醒我把资源放置在src中？
2.放在public和src中，两者有何区别？
3.既然react提醒资源放置在src中，有什么优势或好处？
4.react的静态资源使用方法有很多，
哪种方法比较好？为什么？
5.h5的资源标签在react中直接使用，如video
会遇到哪些问题？
6.有什么更好的解决办法吗？
…
本篇文章就是来解决这些问题的。
静态资源的放置
众所周知，
在react中，静态资源，如图片， 视频， 样式等，
既可以放在/public文件夹中，又可以放在/src文件夹中。
而且，react建议放在/src中。
究其原因，在于是否会被webpack编译打包的区别。
放在/public下的资源，不会被webpack编译打包。而是直接复制一份，放入打包后的文件夹。
放在/src下的资源，会被webpack编译打包。
比如图片、视频等静态资源， 会被webpack编译，
当资源小于限制值时，会被编译位base64字符串，减少资源请求量，提升性能。
各自的分工和好处
/public
既然放在/public不会被编译打包，
那么，有些不会变动的资源， 就可以放在这里了。
比如jquery.min.js这种压缩好的包。
/src
把静态资源放在这里，还有其他的好处，
- 脚本和样式表被缩小并捆绑在一起以避免额外的网络请求
- 缺少文件会导致编译错误，而不是用户的404错误。换句话说， 就是让错误在上线前就处理掉，而不是等着用户去发现错误。
- 结果文件名包含内容哈希，因此您无需担心浏览器缓存旧版本。 静态资源文件一般会加上哈希值处理，以避免缓存带来的显示问题。
静态资源的引入和使用
在react中，使用图片或视频等静态资源，
不像三剑客那样直接引入使用，
比如有一张命名为demo.png的图片，
原生中引入方法是：
<img src="./demo.png" alt="" />
但是，这在react中是行不通的。
因为不管是相对路径，还是绝对路径，
其实都有默认的前缀的。
这个默认前缀，是和请求接口有关，
所以这样使用会导致报错，无法使用资源。
react有自己的引入和使用方式，
可分为如下两种：
1.通过require引入
<img src={require("./demo.png")} alt="" />
2.通过import引入变量，并在jsx中使用变量
import demoImg from './demo.png';<img src={demoImg} alt="" />
require和import在引入时的区别
以上两种引入和使用方法，在jsx中，都是有效的。
但是二者有很大的区别。
1. require方法，在js中引入时，webpack会把src中的引入路径当作字符串处理，
并不会当作资源去编译打包。 所以，当项目上线时，很可能出现在线上可以看到图片路径，但并不显示图片的问题。
2. import 方法，webpack会把当前引入的图片当作静态资源打包，我们可以在webpack配置文件里，对文件进行某些处理，比如设置图片加载器， 当文件小于某个值时，会被打包成base64字符串，减少请求量。
所以，我们推荐用import 引入方法。
在react中使用video
这是刚刚遇到的问题。
比如autoplay属性失效。
而在react中，应该写作autoPlay
还有muted设置静音失效的问题。等等。
如果加了aotoPlay之后，还是不能自动播放，
可能还需要加上muted 。
因为新版浏览器已经默认静音视频自动播放了。
这里推荐一个react插件：
video-react
可设置的属性较多，
还有很多可加载的事件。
参考文档
- html5标签：
https://www.w3school.com.cn/tags/tag_video.asp - 静态资源文件夹区别：
https://blog.csdn.net/weixin_39782183/article/details/104751862 - 两种引入的问题：
https://www.cnblogs.com/tu-0718/p/12530654.html - 插件方法：
https://blog.csdn.net/xue_sunshine_girl1/article/details/83505758
这篇关于2021.12.14 每天进步一点点： 关于静态资源如video在react中的使用和区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
