React之umi入门学习笔记

深碍√TFBOYSˉ_ 2024-04-18 23:55 48阅读 0赞

## 背景 ##

首次接触react框架，拥有的基础为：

<table> 
 <thead> 
  <tr> 
   <th align="left">现有技术储备</th> 
   <th align="left">水平</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">javascript</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">html,css</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">jQuery</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">React</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">node</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">npm</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

umi及react 一同学习，遇到的问题一起做下笔记备忘

#### 1. 404页面的创建问题 ####

404页面一定要放在`src/pages/` 下，而不是放在`src` 下面，要注意，否则路由找到你定义的404页面

#### 2. 创建React的componet组件问题 ####

1.  如采用class的方式继承创建react组件，则必须要import引入react，方可继承，引入的方式如下

import React from 'react'
    
    class YouComp extends React.Component { }

或则

import { Component} from 'react'
    
    class YouComp extends Component { }

1.  返回的react组件必须只有一个顶层标签，如不想使用任何顶层标签，可使用`<></>`作为顶层标签

// 以下react组件不合法
    return (
    	<div>hello</div>
    	<div>i'am react</div>
    	);
    )
    
    // 正常的如下
    return (
    	<>
    	  <div>hello</div>
    	  <div>i'am react</div>
    	</>
    );

#### 3. ES6语法的…含义 ####

展开运算符号，可以把数组展开如下

let bar = {  a: 1, b: 2 };
    let baz = {  ...bar }; // { a: 1, b: 2 }

#### 4. antd 按需要加载是什么个意思 ####

按需加载需要安装 `babel-plugin-import`这个插件，即在import 依赖时，不需要声明完整的依赖对象：

`.webpackrc` 中添加如下配置

{ 
      "extraBabelPlugins": [
        ["import", { 
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }

# 常规操作引入依赖如下操作,引入Link时，需要提供完整的路劲 umi/link
    import Link from 'umi/link';
    
    # 使用按需加载的如下：
    import {  Icon, Button } from 'antd'

#### 5. 关于dva的connect用法 ####

export default connect(从 model 的 state 中获取数据)(要将数据绑定到哪个组件)