小红书一面，凉凉的经验🤕一、react方面 1. 组件通信方法回答了三种(比较了解这三种，不太清楚的咱就不要说了，要

一、react方面

1. 组件通信方法

回答了三种(比较了解这三种，不太清楚的咱就不要说了，要不然自己的埋下坑就要哭着填完了😭)：

props

useContext+useReducer

redux (ps：正确回答应该要更加细化一点，我这个回答的太笼统了，是面试官非常不喜欢的回答之一) 回答了这些后，面试官有很大概率会问这三种问题：

对于props你怎么处理子组件获取父组件的属性

useContext你知道它的具体用法吗，再扩展到其他hooks

如果面试官大概率会问你useContext+useReducer是怎么实现通信的，这个就会扩展到redux，面试官选的就是这个

2. redux问了如何请求异步？（使用中间件redux-thunk），接着就问了redux-thunk能够实现异步的原理是什么

这个大家可以去细看下这个中间件的源码，这里就不细说出来了，大家可以结合这篇文章redux中间件和redux-thunk实现原理和redux-thunk源码去细细体会一下。

3. 聊redux中涉及到了请求数据，就问了实现跨域的方法

3.1. 手写跨域（简版）

   module.exports = async (ctx, next) => {
        ctx.set('Access-Control-Allow-Origin', '*');
        ctx.set('Access-Control-Allow-Headers','Content-Type');  
        ctx.set('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
        await(next());
    }

2. koa-cors
（这个还问了底层实现原理是什么，就是手写的跨域涉及的一些设置）
底层实现原理主要分两个逻辑来处理，有预检请求和没有预检请求，也涉及到源码！

     - 对于非OPTIONS请求的处理，要根据情况加上
        Access-Control-Allow-Origin，  
        Access-Control-Allow-Credentials， 
        Access-Control-Expose-Headers  这三个响应头部

     - 对于OPTIONS请求（预检请求）的处理，要根据情况加上
           Access-Control-Allow-Origin，  
           Access-Control-Allow-Credentials，
           //（表示是否可以暴露对请求的响应，设为true则代表服务器允许将cookie或其他凭据包含在跨域请求）
            Access-Control-Max-Age，  
            Access-Control-Allow-Methods，  
            Access-Control-Allow-Headers

3. jsonp （回调原理）

虽然XMLHttpRequest对象遵循同源政策，但是script标签不一样，它可以通过 src 填上目标地址从而发出 GET 请求，实现跨域请求并拿到响应。（摘自神三元这篇文章的内容）

4. 手写组件

规定要用children来传递props还是啥,当时题目也有点没太听懂，也没写出来多少，害😢

   <Form
      value={{
         test1:'这里是Input1的内容'，
         test2：'这里是Input2的内容
      }}
      onChange={console.log}
   >
         <Input name = "test1">
         <Input name = "test2">
   </Form>

二、http 网络

1. 状态码302 303 区别

 3xx开头的状态码都是重定向状态； 302是Found,303 是See other
 - 302具体指的是请求的资源现在临时从不同的URI响应请求，用户代理会把重定向请求中post方法改为get方法

 - 303表示服务器要将浏览器重定向到另一个资源，即重定向到的资源并不是你所请求的资源，而是对
 客户所请求资源的一些描述。
 （比如上传一份个人信息，服务器发回一个303响应，导向"上传成功"页面，注：只允许任意请求到get的重定向）

 - 307(Temporary Redirect临时重定向)与302是一致的，唯一的区别在于，307状态码不允许浏览器将原本为post的请求定向到get请求上

2. 后面又提到了304，它是NOT Modified，就问到了浏览器缓存机制，强缓存（本地缓存）和协商缓存（弱缓存）的区别

强缓存分为Expires(1.0)和Cache-Control(1.1)
Expires 该值是一个GMT时间格式的字符串，浏览器第一次浏览时会在返回（响应）头部加上Expires，下次请求，如果在这个时间之前则命中缓存，
 res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());

Cache-control,该值是利用max-age判断缓存的生命周期，是以秒为单位，如何在生命周期时间内，则命中缓存

其他属性：

private：仅浏览器可以缓存（默认值）；

public：浏览器和代理服务器都可以缓存；

max-age=xxx：过期时间单位秒；

no-cache：不进行强缓存；

no-store：不强缓存，也不协商缓存

协商缓存

Etag和If-None-Match

Last-Modified和if-modified-since

三、介绍什么是防抖节流

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

四、CSS

flex布局中的问题
1. flex设置为1时的三个属性

flex-grow、flex-shrink、flex-basis

2. flex-basis与width同时设置哪个生效

!!!这题答案是有条件的！

当flex-basis大于自身内容宽度时，不管width是否设置，flex-basis优先级更高。

当flex-basis和width都小于自身内容宽度时，flex-basis和width哪个值大，宽度就是那个

当flex-basis设置值小于自身内容宽度，而width大于自身内容宽度时，则宽度为自身内容宽度

当flex-basis值为负数时，flex-basis不生效，宽度为width值

3. flex布局里面的排序：order

值可以为负数，越小越靠前

五、数据结构

1. 栈和队列，以及如何进行操作的

栈
1. 它是一种运算受限的线性表，限定仅在表尾进行插入和删除操作的线性表，表尾这一端被称为栈顶，相反地另一端被称为栈底，
2. 向栈顶插入元素被称为进栈、入栈、压栈，从栈顶删除元素又称作出栈，
3. 所以其按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据
4. push：入栈操作 pop：出栈操作
队列
1. 队列是一种特殊的线性表，特殊之处在于它只允许在表的前端进行删除操作，而在表的后端进行插入操作
2. 进行插入操作的端称为队尾，进行删除操作的端称为队头
3. 因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出
4. push入队操作，shift出队

六、场景手写题结尾

用setTimeout Promise async 实现红绿灯循环

    const changColor = (color,timer) =>{
            return new Promise((resolve)=>{
                setTimeout(()=>{
                resolve()
                console.log(color)
                },timer)
            })
     async function main(){
         await changeColor('red',3000)
         await changeColor('yellow',1000)
         await changeColor('green',2000)
         main()
     }

七、总结

准备不充分，心态不好，太在乎结果！

表达的也不太好，没有讲到重点，有些知识还是需要更加的去深入，去有自己的理解！

最后还是要多多去刷刷知识点！继续加油，继续冲！

小红书一面，凉凉的经验🤕