背景
首次接触react框架,拥有的基础为:
现有技术储备 | 水平 | 备注 |
---|---|---|
javascript | ||
html,css | ||
jQuery | ||
React | ||
node | ||
npm |
umi及react 一同学习,遇到的问题一起做下笔记备忘
1. 404页面的创建问题
404页面一定要放在src/pages/
下,而不是放在src
下面,要注意,否则路由找到你定义的404页面
2. 创建React的componet组件问题
- 如采用class的方式继承创建react组件,则必须要import引入react,方可继承,引入的方式如下
import React from 'react'
class YouComp extends React.Component {}
或则
import {Component} from 'react'
class YouComp extends Component {}
- 返回的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 中获取数据)(要将数据绑定到哪个组件)