前端 - 笔记 - 个人文章 - SegmentFault 思否

react注意把没用的代码删除自己熟练的知道每一行代码的作用把没用的代码都清理掉

react中使用jsx的好处

1.jsx书写简单以html的方式书写代码

2.直接在 jsx 标签上注册事件

3.可以使用大括号语法

4.JSX 防止注入攻击 XSS

Key shortid 插件 npm I shortid

Proptypes检查

npm i prop-types -S

别名

Loading 异步加载

npm i react-loadable -S

引入icon

npmireduxreact-reduxredux-promiseredux-thunk-S

安装redux及相关命令

Icon图标

import { Icon } from 'antd'

const IconFont = Icon.createFromIconfontCN({

scriptUrl: '//at.alicdn.com/t/font_1776951_099ts93a0txs.js',

})

Axios post用法

npm i redux-promise redux-thunk -S

安装redux promise 进行异步

import { createStore,compose,combineReducers,applyMiddleware } from 'redux'

import promise from 'redux-promise'
import thunk  from 'redux-thunk'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

// 创建 store createStore(reduce)
const store = createStore(
    combineReducers({
        
    })
    , composeEnhancers(applyMiddleware(promise,thunk)))



export {store}

const defaultState={
data:[],
age:25
}

export default function xxx(state=defaultState,action){
    console.log(action,11111)
    switch(action.type){
        case '':
            return {...state}

       
        default:
            return state
    }
    return state
}

import axios from 'axios'
import qs from 'qs'

// 添加请求拦截器
axios.interceptors.request.use(config => {
  const obj = qs.parse(config.data)
  config.data = qs.stringify(obj)
  return config

}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 根据状态码跳转
  if (response.status === 200) {
    // window.location.href = 'https://www.baidu.com'
  }
  return response;
}, error => {
  switch (error.response.status) {
    case 404:
      window.location.href = 'https://www.baidu.com'
      break;
    
    default:
      break;
  }
  return Promise.reject(error);
});


// post
export function post (url, data) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'POST',
      // 添加公共的请求头
      // headers: { token: '3333333333333' },
      data: JSON.stringify(data),
    })
      .then(res => resolve(res.data))
      .catch(err => console.log(err))
  })
}

// get
export function get (url, data = '') {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'GET',
      // 添加公共的请求头
      // headers: { token: '' },
      params: '',
    })
      .then(res => resolve(res.data))
      .catch(err => console.log(err))
  })
}

import { connect } from 'react-redux'

export default @connect(state=>{
  return {
    
  }
},{

})


action 写法

export function getNames (options) {

return {
        type:'',
        payload: options,
    
}

}

swiper  npm i swiper

import Swiper from 'swiper'
import 'swiper/js/swiper.js'
import 'swiper/css/swiper.css'

渲染轮播图

componentDidMount(){

    Axios.get().then(res=>{
        console.log(res)
        this.setState({
            
        },()=>{
            new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay:true,
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                
                
              })        
        })
    })
    
}

//一下是添加的组件
import React from 'react';
import { Form, Select, Input, Button } from 'antd';
import {connect} from 'react-redux'
import './style.less'

import {getdata,change,get,getName,clear} from '@/actions/add'
const { Option } = Select;
//抛出
export default @connect(state=>{
return {
data:state.add.data,
alone:state.add.updata,
}
},{getdata,change,get,getName,clear})
//antd表单回填
@Form.create({
mapPropsToFields (props) {

// console.log(props,22)
return{ 
  // name: 'coordinated',
  name: Form.createFormField({
    value: props.alone.name,
  }),
  gender: Form.createFormField({
    value: props.alone.gender,
  }),
  hobby: Form.createFormField({
    value: props.alone.hobby,
  }),
  age: Form.createFormField({
    value: props.alone.age,
  }),
}

}
})
class index extends React.Component {
handleSubmit = e => {//添加

e.preventDefault();
this.props.form.validateFields((err, values) => {
  if (!err) {
    console.log('Received values of form: ', values);
    this.props.getdata(values)
    this.props.form.setFieldsValue({
      name:'',gender:'',age:'',hobby:''
      });
      this.props.history.push('/data');
  }
});

};
getname = () => {//练习
this.props.getName('小花')
}
sure = ()=> {//确认修改

console.log(this.props.form.getFieldsValue(),'sure')
this.props.change(this.props.form.getFieldsValue())
this.props.history.push('/data')
this.props.clear()

// console.log(this.props.form,'forrm')
}

render() {

const { getFieldDecorator } = this.props.form;
const {names}=this.props
return (
  <div className='addform'>
    <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
    <Form.Item label="用户名">
      {getFieldDecorator('name', {
        rules: [{ required: true, message: '不能为空!' }],
      })(<Input />)}
    </Form.Item>
    <Form.Item label="年龄">
      {getFieldDecorator('age', {
        rules: [{ required: true, message: '不能为空!' }],
      })(<Input />)}
    </Form.Item>
    <Form.Item label="性别">
      {getFieldDecorator('gender', {
        rules: [{ required: true, message: '不能为空!' }],
      })(
        <Select
          placeholder="Select a option and change input text above"
        >
          <Option value="男">男</Option>
          <Option value="女">女</Option>
        </Select>,
      )}
    </Form.Item>
    <Form.Item label="爱好">
      {getFieldDecorator('hobby', {
        rules: [{ required: true, message: '不能为空!' }],
      })(
        <Select
          placeholder="Select a option and change input text above"
          
        >
          <Option value="游戏">游戏</Option>
          <Option value="电视">电视</Option>
          <Option value="音乐">音乐</Option>
        </Select>,
      )}
    </Form.Item>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
      <Button type="primary" htmlType="submit">
        添加
      </Button>
      <Button type="primary" onClick={this.sure}>
        确认修改
      </Button>
      <Button type="primary" onClick={()=>{this.props.history.push('/data')}}>
        查看数据
      </Button>
    </Form.Item>
  </Form>
</div>
);

}
}

//下面代码是reducer的add.js内容

import _ from 'loadsh';
const initialState = {

datas: [],
updata: {},
obj: { names: '哈哈' }

}

export default (state = initialState, { type, payload }) => {

switch (type) {
    case 'ADD': //添加
        console.log(state, 2, payload)
        // console.log(state, 'state')
        payload.id = state.datas[state.datas.length - 1] ? state.datas[state.datas.length - 1].id + 1 : 0
        state.datas.push(payload)
        return {...state, payload };
    case 'DELETE'://删除
        state.datas = state.datas.filter(v => {
            return v.id !== payload.id
        })
        return {...state };
    case 'get_name'://练习
        state.obj.names = payload
        return {...state, obj: _.cloneDeep(state.obj) };//数据持久化
    case 'CLEAR'://清空回填数据
        state.updata = {}
        console.log(state, 'clear')
        return {...state };
    case 'UPDATE'://获取修改数据
        var id = Number(localStorage.getItem('id'));
        state.updata = payload;
        return {...state };
    case 'NEW'://修改后返回数据
        let updatedata = state.datas;
        var id = Number(localStorage.getItem('id'));
        payload.id = id;
        state.datas = updatedata.map(v => {
            if (v.id === id) {
                return payload
            } else {
                return v
            }
        })
        localStorage.removeItem('id')
        return {...state };
    default:
        return state
}

}

//下面是store.js的配置。包括数据持久化

import { createStore, compose, combineReducers, applyMiddleware } from 'redux';
import { persistReducer } from 'redux-persist' // 合并 reduce
import storage from 'redux-persist/lib/storage' // 创建 store
import promise from 'redux-promise'
import thunk from 'redux-thunk'
import add from '@/reducer/add'
import data from '@/reducer/data'
import home from '@/reducer/home'
// 多层对象做数据持久化
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
// 我要对哪些 reduce 的 state 做数据持久化
const rootPersistConfig = {

key: 'root',
storage,
stateReconciler: autoMergeLevel2,
// 白名单 [reducer 目录内的 reduce 文件名]
whitelist: ['add', 'home'],

}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// 抽离出一个需要持久化的公共 reduce
const myPersistReducer = persistReducer(

rootPersistConfig,
combineReducers({
    add,
    data,
    home
}))

const store = createStore(

myPersistReducer,
composeEnhancers(applyMiddleware(promise, thunk))

);

export { store }

//下面是actions的add.js

export function getdata(payload) {

return {
    type: 'ADD',
    payload
}

}
export function del(payload) {

return {
    type: 'DELETE',
    payload
}

}
export function change(payload) {

return {
    type: 'NEW',
    payload
}

}
export function get(payload) {

return {
    type: 'UPDATE',
    payload
}

}
export function getName(payload) {

return {
    type: 'get_name',
    payload
}

}
export function clear(payload) {

return {
    type: 'CLEAR',
    payload
}

}

//请求数据
import { post } from '../utils/request'
import api from '../service/api'

export function getLx(options){

return{
    type:'getLx',
    payload:post(api.List)
}

}

children组件
{this.props.children}
import Main from './components/Main/Index'
<Main {...props}>

    <Switch>
    <Route path='/goods' component={Goods}></Route>
    <Route path='/permission' component={Permission}></Route>
    <Route path='/list' component={List}></Route>
    <Route path='/' component={List}></Route>
    </Switch>
    </Main>



JavaScript数据类型 Number  string undefined object symbol null boolean

闭包的定义 :可以访问函数内变量的函数就是闭包
内存泄漏的原因:闭包，

setstate 两种写法

this.setState({
    xxx:
})

this.setState((nextState)=>{
    return ({
    xxx:
    })
})


z-index :层级  定位后确定元素的层级 越大层级越高

position 属性：

 fiexd--固定定位，相对于浏览器定位；
 static-- - 静态定位；
 relative-- - 相对定位；相对于自己本身的定位；
 absolute-- - 绝对定位；相对于父级元素的定位，如果没有父级元素时相对于窗口的定位；
 sticky-- - 粘性定位  必须指定top、bottom、left、right4个值之一

笔记

晁鹏飞

引用和评论

面试题

Vue.js-Vue实例

你可能不知道的图片加载相关知识

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！

手写一个动态海洋和天空效果的vue hooks

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！