我的美丽实习日记day3

目录

• 参考资料
• 本日简短总结
• 本日《现代前端技术解析》读书笔记
• React基础补充
• DvaJS学习笔记
  • 定义路由
  • 编写 UI Component
  • 定义Model
  • Connect
• Less学习笔记

参考资料

DvaJS官方文档

Alita官方文档

本日简短总结

• 学习DvaJS
• 踩坑位
  • Error：EBUSY：resource busy or locked
    • 我怀疑是爆C盘了，尝试转移项目到D盘来解决。x
    • 有憨批把antd装到上级目录了 √
• 学习Less
• 跟着文档学习Alita（除实战外）
• 开始学习TypeScript

本日《现代前端技术解析》读书笔记

暂无

React基础补充

为参数设置类型（prop-types）：

// 设置prop-types
import PropTypes from 'prop-types'

// 其实参数对props解构了
const ProductList = ({ onDelete, products}) => {
    return <div></div>
}

//设置类型
ProductList.propTypes = {
	// isRequired,一定要的属性
    onDelete: PropTypes.func.isRequired,
    products: PropTypes.array.isRquireed
}

DvaJS学习笔记

• 其实我也是第一时间就想到了OW的Dva了
• dva-cli is deprecated，please use create-umi instsead......
• 什么鬼开门第一炮就告诉我被弃用了！！
• 哦，原来下面还有一个Do you inisit on using dva-cli（y/N）的提示，属实眼瞎了

定义路由

我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。

新建 route component routes/Products.js，内容如下：

import React from 'react';

const Products = (props) => (
  <h2>List of Products</h2>
);

export default Products;

添加路由信息到路由表，编辑 router.js :

import Products from './routes/Products';

<Route path="/products" exact component={Products} />

然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的

标签。

编写 UI Component

其实就是把公有组件写到 components目录下

定义Model

完成 UI 后，现在开始处理数据和逻辑。

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

新建 model models/products.js ：

export default {
  namespace: 'products',
  state: [],
  reducers: {
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

这个 model 里：

• namespace 表示在全局 state 上的 key
• state 是初始值，在这里是空数组
• reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

然后别忘记在 index.js 里载入他：

• app.model(require('./models/products').default);

Connect

connect 起来
到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。

编辑 routes/Products.js，替换为以下内容：

import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};


// export default Products;
// connect执行后会返回一个函数，改函数的参数就是模板，用于和state绑定
// connect第一个参数是mapStateToProps，这是一个回调函数，他会传入整个State对象，因此要进行筛选，筛选后将绑定到模板的props中
export default connect(({ products }) => ({
  products,
}))(Products);

最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：

 const app = dva({
   initialState: {
     products: [
       { name: 'dva', id: 1 },
       { name: 'antd', id: 2 },
     ],
   },
 });

Less学习笔记

自己总结还不如看文档，就这么点东西哈哈哈哈
官方文档