2022备忘录

2022备忘录导出

关于layout获取仓库数据的问题（已解决）

外部的layouts 可以通过connect 获取仓库， 但是layouts中的MainLayout获取不到

因为MainLayout不是使用默认导出 导致连不上仓库，改为默认即可
或者 使用@connect方法 @connect（mapStateToProps） ;export {} 导出

关于TS中 子组件暴露方法给父组件使用

子组件:

Import {useImperativeHandle} from ‘React’
Const WaterMark : React.Fc<WaterMarkProps> = (props) =>  {    //** 接收父组件参数   watermarkProps.d  自定义
 const fn = () => {}     // **子组件方法
useImperativeHandle(props.waterRef,  ()=>({fn: fn}))   //**
return (
<div></div>
)}

父组件

import {mutableRefObject, useRef } from ‘React’   
const waterRef: MutableRefObject<any> = useRef(null)

waterRef.current.fn    //** 调用子组件方法fn


Renturn ( 
<div>
        <Children waterRef={waterRef} />
</div>
  )

useImperativeHandle介绍
useImperativeHandle(ref, createHandle, [deps])
通过useImperativeHandle可以只暴露特定的操作

通过useImperativeHandle的Hook, 将父组件传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起

所以在父组件中, 调用inputRef.current时, 实际上是返回的对象

useImperativeHandle使用简单总结:

作用: 减少暴露给父组件获取的DOM元素属性, 只暴露给父组件需要用到的DOM方法

参数1: 父组件传递的ref属性

参数2: 返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法

关于表格可编辑行

rendercell 不能放在 editableTable组件中内置, 不然会出现重复刷新的问题

关于react 实现防抖的方法

lodash
在class组件中的应用

// 通过绑定到this 让每次调用的函数是同一个
onChange = e => {
   e.persist();
   if (!this.handleChangeDebounce) {
     this.handleChangeDebounce = debounce(this.handleChange, 500);
   }
   this.handleChangeDebounce(e);
 };

hooks中的应用

  //在函数组件中用useCallback来确保不同生命周期内函数引用不变
  const changeFun = useCallback(value => {
    console.log('vvv', value);
    //具体的业务逻辑
  }, []);
  
  const debounceFun = useCallback(
    debounce(changeFun, 500, {
      leading: false,
      trailing: true
    }),
    [changeFun]
  );

  const debounceHandleChange = useCallback(
    e => {
      if (e.target && e.target.value) {
        console.log('===', e.target.value);
        debounceFun(e.target.value);
      }
    },
    [debounceFun]
  );

关于antd3.x Form组件的表单域

必须使用 getFieldDecorator 包裹Form.Item 中的组件 才能进行双向绑定

wrappedComponentRef

父组件获取子组建实例

 	<ChildComponent wrappedComponentRef={(form) => this.formRef= form}/>

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

配置写法

Proxy ： 因为接口是不带‘api’ 的 pathrewrite {^/api： ‘’}已经替换掉了，target后不需要接/pai

dispatch： 所有请求来自dva中的dispatch，用.then来处理返回值

所有请求通过 service进行一次包装， 然后放入model里的effects中，
Reducer是接收action，更新state的，下一步在dva.js中使用model（）载入app， 最后在页面导出的地方connet起来

models effects 获取state

// 调用服务端接口，获取数据
 /**
  * 以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。
  */
 effects: {   
   *fetchProducts({ payload },{call, put, select}){
     const deviceId = yield select(state => state.product.deviceId);
     console.log("deviceId = "+deviceId);    
     const data = yield call(getProductDatenew, deviceId)
     yield put({
       type: 'setProducts',
       payload: data
     })
   }
 },

loading = loading.effects[‘user/query’]

其中 user/query 是 model 中的异步请求方法

在异步请求结束之前 isLoading 的值一直是 true，当此次异步请求结束时 isLoading 的值变成 false

在dva.js里配置 从reactloading, 配置完成后,所有路由配置的组件中都有loading对象

关于responseType的问题

在前端实践中，常常需要下载文件。
文件下载实现方式一般有三种：
1、服务器存放静态文件，前端通过a标签来实现文件下载
2、通过ajax请求，返回文件地址，前端打开文件地址，实现文件下载
3、通过ajax请求，直接返回文件内容。这种方式，前端有两种实现文件下载方法：
3-1，使用Blob,把获取文件内容的内存地址，再赋值到a标签上，触发a标签点击事件，实现下载。
3-2，直接把ajax请求转成一个url，通过location.href=url 或 window.open(url)实现文件下载。这种方式的实现，本质上是因为，每一个get请求，都可以看成是一个单独的url访问

下载文件的接口返回的是二进制数据流
Window.open(‘url’) 可以下载文件, 但是无法携带请求头,会导致安全性问题

关于原生的写法

• url 下载url
• filename 下载文件名称

function download(url, filename) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true); xhr.send() //发送ajax请求
    xhr.setRequestHeader('token', $.cookie('token'));
    xhr.setRequestHeader('version', '2');
    xhr.responseType = "blob"; // 设置返回类型blob
    // 定义请求完成的处理函数，请求前也可以增加 加载框/禁用下载按钮的相关逻辑
    xhr.onload = function() {
        if (this.status === 200) {
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
            reader.onload = function(e) {
                // 转换完成后创建a标签下载
                var a = document.createElement('a');
                a.download = filename;
                a.href = e.target.result;
                $("body").append(a);
                a.click();
                $(a).remove();
            }
        }
    };
}

Axios封装了修改responseType的方法

http.post(‘api/download’, data, {responseType: ‘blob’})

//然后处理返回的文件
const url = window.URL.createObjectURL(res.data) // 将二进制文件转换为可访问的url
const a = document.createElement('a')
document.body.appendChild(a)
a.href = url
a.download = 'certificate.tar.gz'
a.click()
window.URL.revokeObjectURL(url)

接下来是umi的方法

Import { request } from ‘umi-request’
request
  .get("/api/v1/xxx", {
	Method: ‘’,
   	 params: {
  	    id: 1
  	  },
	headers: {},
	responseType: ‘blob’  // 修改返回类型  [json , text , blob , formData ..]
  })

**还有一个比较恶心的方法, 是 dva的 { fetch } 方法 **
dva的fetch不能修改responseType , 这里采取的是window.URL.createObjectURL 方法
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

(方法详解) https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

request().then( blob => {
  Var a = document.createElement(‘a’)
  Var url = window.URL.createObjectURL(blob)	// 创建url
  Var fileName = ‘文件名.xlsx’
  a.href = url									// 指定
  a.download = fileName						// 指定文件名
  a.click() 									// 点击
  Window.URL.revokeObjectURL(url)    	                // 释放
})

// umi 是基于 fetch 实现的请求方法, axios 是基于 XMLHttpRequest
现在来科普一下 fetch和XHR的区别

// 用 XHR 发起一个GET请求
var xhr = new XHMHttpRequest();
xhr.open(‘GET’, url);
xhr.responseType = ‘json’;

xhr.onload = function(){
console.log(xhr.response);
};

xhr.onerror = function(){
console.log(‘something wrong~ ╮(￣▽￣)╭’);
};

xhr.send();

// 用 Fetch 完成同样的请求
fetch(url).then(function(response){
return response.json();
}).then(function(jsonData){
console.log(jsonData);
}).catch(function(){
console.log(‘something wrong~ ╮(￣▽￣)╭’);
});

** fetch 更加底层,
IE系列是完全不支持的，主流浏览器的早起版本也不支持，所以如果在项目中使用需要做兼容方案处理。
2.fetch 不管请求处理成功还是失败，都会触发promise的resolve状态回掉。这个和传统的ajax 框架是有点区别的。fetch只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。我们可以通过response 对象的ok是否是true来判断是否是真正的成功。
3.fetch配置请求是否携带cookie和接受服务端写入cookie是通过设置credentials
// 所有情况都携带cookie
fetch(‘https://example.com’, {
credentials: ‘include’
})
// 目前改为默认是same-origin
// 同源的情况下带cookie
fetch(‘https://example.com’, {
credentials: ‘same-origin’
})
// 忽略cookie
fetch(‘https://example.com’, {
credentials: ‘omit’
})

CSS学习

名称	生命	大小	服务器通信	是否跨域
cookie	服务器生成,服务器设置失效时间,如果在浏览器生成,默认关闭失效	4kb	每次携带在http请求头中, cookie使用过多会导致性能问题	一般不可,相同domain下可以允许接口请求携带cookie
local storage	除非清除否则永久保存	5MB	不可与服务器通信	不可
session storage	关闭浏览器销毁	5MB	不可与服务器通信	不可

position 默认值 stati ， relative，absolute，fixed，sticky（粘性定位）

Css中可继承的属性
字体系列属性 font-size，font-weight…
text-indent，text-align，text-shadow，line-height，word-spacing…
表格布局属性
Caption-side,border-collapse，empty-cells….
列表属性
List-style-type, list-style-image, list-style-position, list-style
光标属性
cursor
元素可见
visibility