小白成长记（4）||es6学习笔记1

2017-04-18 本文已影响63人苏枼

最近公司准备开发用ant Design开发一套新东西，包括es6，react等，其实还是懵逼状态，还不知道每个名词是干什么的，这是这两天学习的一些笔记。都是比较杂七杂八，东拉西扯，比较凌乱。不过至少有了一点了解了。在以后慢慢学习过程中，会把这些杂乱的知识点梳理模块化的。

1.dva-cli目录基本结构为:

├── /mock/ # 数据mock的接口文件

├── /src/ # 项目源码目录

│ ├── /components/ # 项目组件

│ ├── /routes/ # 路由组件（页面维度）

│ ├── /models/ # 数据模型

│ ├── /services/ # 数据接口

│ ├── /utils/ # 工具函数

│ ├── route.js # 路由配置

│ ├── index.js # 入口文件

│ ├── index.less

│ └── index.html

├── package.json # 项目信息

└── proxy.config.js # 数据mock配置

2.dva-cli 是 dva 的命令行工具，包含 init、new、generate 等功能

3.先设计 model 再设计 component 最后连接 model（数据模型)和 component（UI）

4.namespace 是 model state 在全局 state 所用的 key，state 是默认数据，reducer 是唯一可以更新 state 的地方

5.dva 的 connect 方法可以将组件和数据关联在一起

//import { connect } from 'dva';

6.Less 是一个 CSS 预处理器，让 CSS 具有动态性。

7.定义我们的组件一般有三种方式：

// 1. 传统写法

const App = React.createClass({});

// 2. es6 的写法

class App extends React.Component({});

// 3. stateless 的写法（我们推荐的写法）

const App = (props) => ({});

8.React 是一个用于构建用户界面的 JAVASCRIPT 库。

9. JSX 是 JavaScript 语法的扩展