个人笔记

中文排序

let a = ["张三","李四","周","赵","钱","王","金","陈","哎"].sort((a, b) =>a.localeCompare(b));
//=>["哎", "陈", "金", "李四", "钱", "王", "张三", "赵", "周"]
let b = ["张三","李四","周","赵","钱","王","金","陈","哎"].sort((a, b) =>b.localeCompare(a));
//=>["周", "赵", "张三", "王", "钱", "李四", "金", "陈", "哎"]

react流程

1、安装react脚手架

npm install create-react-app -g
create-react-app my-app
现在可用 npx create-react-app zfkt

npm -v
5.2.0版本及以上 npx
npm install npm@6.4.1 -g
npx create-react-app my-app
cd my-app
npm start

分析项目的业务逻辑
模块化切割后再逐步实现
项目需要用到的技术栈分析

• antd
• axios
• redux
• react-redux
• react-router-dom
• less,less-loader
• redux-actions
  … 等一些其他插件

数据传递：
第一步：axios定义接收数据的方法

import axios from 'axios';
export const getAdverList = async (data) => await axios.post(
" https://www.easy-mock.com/mock/5bd01de6b42f4435de10038b/example/adver/list",
data,
{headers:{"Content-Type":"ap
plication/x-www-form-urlencoded"}});

第二步：action设置

//在action的type文件里设置  export const ADVER_LIST = 'ADVER_LIST';
import * as type from "./type";
import {getAdverList} from "../axios";
const adverList = (params)=>{
    return async (dispatch)=>{
        let res = await getAdverList(params);
        dispatch({type:type.ADVER_LIST,data:res.data})
    }
};
export {adverList}

第三步：reducer设置

import { combineReducers } from 'redux';
import * as type from '../action/type';
import {handleActions} from "redux-actions";
const adver =handleActions({
   [type.ADVER_LIST]:(state,action)=>{
       console.log(action.data.data.rows,"11111");
       return {...state,dataList:action.data.data.rows}
   }
},{});

export default combineReducers({
    adver
});

第四步：使用

import React from 'react';
import { Table, Icon, Button } from 'antd';
import {connect} from "react-redux";
import actions from '../../action'
class BasicTable extends React.Component{
    constructor(){
        super();
        this.state = {
            columns : [{
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
                render: text => <span>{text}</span>,
            }, {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
            }, {
                title: 'Address',
                dataIndex: 'address',
                key: 'address',
                // render: (text)=>{
                //     console.log(text);
                //     return text
                // }//有关联的  text就是关联的内容
            }, {
                title: 'Action',
                key: 'action',
                render: (text, record) =>{
                    return <span>
            <Button onClick={async()=>{
                let data = new FormData();
                data.append("curPage",1);
                data.append("pageSize",10);
                //通过this.props 调用设置好的获取数据到state的方法
                let res =await this.props.adverList(data);
                console.log(this.props);
            }}>操作 - {record.name}</Button>
            <span className="ant-divider" />
            <Button onClick={async()=>{
                let data = new FormData();
                data.append("hairdoId",112);
                 //通过this.props 调用设置好的获取数据到state的方法
                let res = await this.props.hairDetail(data);
                console.log(this.props);
            }}>删除</Button>
            <span className="ant-divider" />
            <Button className="ant-dropdown-link">
                更多操作 <Icon type="down" />
            </Button>
        </span>
                }
            },{
                title: "my",
                key: "my",
                render: (text,record)=>{
                    return (
                        <div>
                            <p>{text["name"]}</p>
                            <p>{record["address"]}</p>
                        </div>
                    )
                }
            }],
            data : [{  //接口调通后  用获取的数据代替data
                key: '1',
                name: '月白',
                age: 32,
                address: '北京市朝阳区建国路',
            }, {
                key: '2',
                name: '雪青',
                age: 22,
                address: '广东省东莞市大朗镇',
            }, {
                key: '3',
                name: '藕荷',
                age: 27,
                address: '成都龙泉区体育中心旁',
            },{
                key: '4',
                name: '马骁骁',
                age: 18,
                address: '浙江省温州市鹿城区',
            }]
        }
    }

    componentWillMount(){
        console.log(this.props,"this.props");
    }

    render(){
        let {columns,data} = this.state;
        return (
            <Table columns={columns} dataSource={data} />
        )
    }
}
//mapStateToProps   mapDispatchToProps
// 使用设置好的state  将adver的state和actions引入
//在子组件中用相同的操作就能共享数据了
export default connect((state)=>state.adver,actions.adver)(BasicTable);