react项目建立导入包问题总结

Posted 2022-05-31 liutianzeng

1.react和react-dom包

使用react开发网页的话，我们难免会下载两个包，一个是react，一个是react-dom，其中react是react的核心代码。react的核心思想是虚拟Dom，其实虚拟Dom改变没有那么复杂，简单而言就是一个js的对象来表达一个dom包含的东西，例如如下代码：

var element=
    "tagName": "div",
    "attrs": 
        "styles": 
            "fontSize": "20px"
        
    ,
    "children": [
        
            "tagName": "span",
            "children": ["hello,world"]
        
    ]

就表达了一个div标签里面有一个span标签，标签里面是个文本节点，文字内容就是’hello,world‘，如果整个对象都自己去写未免也太麻烦了，所以react包弄了一个生成虚拟dom的函数react.createElement，以及Component这个类来帮助我们表示虚拟DOM，我们自己写创建组件的类时需要继承这个类，关于创建组件的方式请参考React创建组件的三种方式。主要是继承一些react的高级方法，而包react-dom的核心功能就是把这些虚拟Dom渲染到文档中变成实际dom，当然了除了渲染这个功能之外还有一些其他的方法，这里就不多说了。

2.babel-core和babel-loader包

因为我们要把JSX语法浏览器不认识，所以我们需要借助babel-core和babel-loader包来帮我们将JSX语法编译成JS语法，其中babel-core提供转义的API，而babel-loader则是webpack用来调用babel-core的API完成转义的工具。

重点来了：babel-core和babel-loader一定要对应安装，否则webpack打包时会报错，例如：

babel-core版本	是否兼容	对应babel-loader版本
6.0	是	7.0
7.0	是	8.0
6.0	否	8.0

 

3.react-router和react-router-dom

问题：在 React 的使用中，如果我们需要用到路由，那么 react-router 和react-router-dom 是不是两个都要引用呢？
非也，坑就在这里。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了，具体react-router-dom使用方法见Router使用方法详解