React之umi入门学习笔记

背景

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

现有技术储备	水平	备注
javascript
html,css
jQuery
React
node
npm

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 {}

2. 返回的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 中获取数据)(要将数据绑定到哪个组件)