开发中的零碎知识点

知识点

记录开发中应该注意的一些知识点。

1.get和post

• 区别：

* GET提交
    * 1、一般是从服务器上获取数据
    * 2、提交的数据会出现在地址栏上
    * 3、不安全
    * 4、提交的数据量小，不会超过2KB
    * 5、服务器端是用url.parse(地址, true).query获取变量的值
* post提交
    * 1、一般是向服务器传送数据
    * 2、提交的数据不会出现在地址栏上
    * 3、较安全的
    * 4、提交的数据不限，(没有限制)：上传都用POST提交，就不能GET提交
    * 5、服务器端用querystring.parse()获取提交的数据

• 使用：

* 建议使用GET/POST方法的情况
    * 1、GET方式的安全性较POST方式要差些，包含机密信息的话，建议用POST数据提交方式
    * 2、在做数据查询时，建议用GET方式，而在做数据添加、修改或删除时，建议用POST方式
* 只能使用POST
    * 1、无法使用缓存文件（更新服务器上的文件或数据库）
    * 2、向服务器发送大量数据（POST没有数据量限制）
    * 3、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

在进行实际的开发中，应该根据实际情况选择请求的方式，同时应和后端同学在系分阶段将API确定好。

2.application/json和application/x-www-form-urlencoded区别

application/json和application/x-www-form-urlencoded 都是表单数据发送时的编码类型。
	
EncType：
    enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
	默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。
![请求头信息](https://img-blog.csdnimg.cn/2021070411132520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDUyNTY4,size_16,color_FFFFFF,t_70)

• application/x-www-form-urlencoded编码类型的发送和接收：

  窗体数据被编码为名称/值对
  客户端：发送"test=I’m Egret"，浏览器按F12，Network中可以查看发送数据
  
  服务端：接收test数据
  

• application/json的发送和接收：
  序列化后的 JSON 字符串
  客户端：
  发送JSON格式字符串 ‘{“test”:“I’m Client.”}’
  
  服务端：

   1. 用file_get_contents拿Post数据。$_POST['test']取不到数据。
   2. 然后使用json_decode解码。 原始file_get_contents是字符串？
   3. php中json访问方式 $json->test。php中没有{test:"I'm Client"}这种格式的，$json = {test:"I'm Client"}会报错。
   4. 返回数据时将数组json_encode编码。php中json格式没有，用数组代替。
  

使用json格式，php头部需要加上如下代码，否则会报错：

header('Access-Control-Allow-Headers:x-requested-with,content-type');

3.useRef

useRef 不仅仅是用来管理 DOM ref 的，它还相当于 this , 可以存放任何变量.

useRef可以很好的解决闭包带来的不方便性.你可以在各种库中看到它的身影, 比如 react-use 中的 useInterval , usePrevious ……

注意：当 useRef 的内容发生变化时,它不会通知您。更改.current属性不会导致重新呈现。因为他一直是一个引用 .

4. filter函数

语法：array.filter(callback(currentValue,index,arr), thisValue)
参数：
	currentValue	必须。当前元素的值
	index	   可选。当前元素的索引值
	arr	      可选。当前元素属于的数组对象
	thisValue   可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
				如果省略了 thisValue ，"this" 的值为 "undefined"
返回值：  一个新的、由通过测试的元素组成的数组。如果没有任何元素通过测试，则返回空数组。
		当要过滤的数组是对象数组的时候，修改新返回来的对象数组属性的同时也修改了原来对象数组的属性；
		如果过滤的数组是数组，修改返回来的数组属性，原来数组的属性不会发生改变。

5. form 表单中useForm的使用

useForm中涉及到的几个方法。

6.Modal中嵌套Form表单出现的问题解决

解决antd的Warning: 
Instance created by `useForm` is not connected to any Form element.问题

把form表单放在Modal中，当进入时报的错误，没有挂载到（连接到）这个表单，所以报错。
有很多说使用方法：

Modal 添加属性 getContainer={false} ，挂载在当前 dom。

可是这还解决不了问题，报警告还是一样。
可使用这个api解决 —— forceRender 设置强制渲染给为true

 <Modal
	title="发布"
	visible={visible}
	onOk={handleOk}
	okText="发布"
	cancelText="取消"
	onCancel={handleCancel}
	confirmLoading={confirmLoading}
	forceRender={true}
	>   
                    
	<p>666</p>
 </Modal>

7.useMemo和useCallback的区别 及使用场景

useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据

共同作用：
1.仅仅依赖数据发生变化, 才会重新计算结果，也就是起到缓存的作用。

两者区别：
1.useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值 ，
   应用场景如： 需要 计算的状态
2.useCallback 计算结果是函数, 主要用于缓存函数，
   应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

注意： 不要滥用会造成性能浪费，react中减少render就能提高性能，所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。