day0630

day0630

动画：
用CSSTransition包裹
5个属性

useMemo缓存会影响动画实现

children总会被渲染

下拉刷新

listview类似于早期RN
复杂又费劲

useSelector监听数据变化

react里dispatch返回值action
vue里dispatch返回promise

better-scroll

pulltorefresh

验证

prop-types
文档用法

npmjs.com/package/prop-types

自定义类型

自定义错误

PC端react

ant design of react
蚂蚁金服

saga

DvaJS

DvaJS读音滴挖

dvajs.com/guide/grtting-started.html

只有6个 api

DvaJS指南

一、介绍

二、快速上手

1、安装 dva-cli

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

2、创建新应用

$ dva new dva-quickstart

$ cd dva-quickstart
$ npm start

3、使用antd

$ npm install antd babel-plugin-import --save

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

基于roadhog

4、定义路由

import React from 'react';

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

export default Products;

import Products from './routes/Products';
...
<Route path="/products" exact component={
   Products} />

5、编写UI Component

import React from 'react';
import PropTypes from 'prop-types';
import {
    Table, Popconfirm, Button } from 'antd';

const ProductList = ({
    onDelete, products }) => {
   
  const columns = [{
   
    title: 'Name',
    dataIndex: 'name',
  }, {
   
    title: 'Actions',
    render: (text, record) => {
   
      return (
        <Popconfirm title="Delete?" onConfirm={
   () => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={
   products}
      columns={
   columns}
    />
  );
};

ProductList.propTypes = {
   
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

export default ProductList;

6、定义Model

export default {
   
  namespace: 'products',
  state