面试查漏补缺（一）

2024-9-02 13:51:51

#前端

1

前言

被面试官血虐了，实在是惭愧不已

正文

flex

  • flex的缩写属性：grow shrink basic
    • grow规定了在 flex 容器中分配剩余空间的相对比例（在剩余空间有余时）
    • shrink规定了在flex容器中收缩比例（在剩余空间不足时）
    • basic指定了 flex 元素在主轴方向上的初始大小
  • flex-direction
    • flex分为主轴和交叉轴，direction规定了主轴为哪个方向，row为横轴，column为竖轴，而交叉轴与主轴垂直
  • flex-wrap决定了flex内元素是否换行，如何换行
    • 属性有：nowrap，wrap，wrap-reverse

函数式组件钩子

useRef

  • 是一个允许你在多次渲染中缓存函数的 React Hook。
  • 可以在重新渲染之间 存储信息（普通对象存储的值每次渲染都会重置）。
  • 改变它不会触发重新渲染（状态变量会触发重新渲染）。
  • 对于组件的每个副本而言，这些信息都是本地的（外部变量则是共享的）。
import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);
  let domRef = useRef('')

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  function handleClick1() {
    inputRef.current.focus();
  }

  return (
    <input ref={domRef} />
    <button onClick={handleClick1}>
      点击1
    </button>
    <button onClick={handleClick}>
      点击！
    </button>
  );
}

useMemo

  • 它在每次重新渲染的时候能够缓存计算的结果。
  • 用处
    • 跳过代价昂贵的重新计算
    • 跳过组件的重新渲染
    • 记忆另一个 Hook 的依赖
    • 记忆一个函数

useCallBack

  • 允许你在多次渲染中缓存函数的
  • 跳过组件的重新渲染
  • 从记忆化回调中更新 state
  • 防止频繁触发 Effect
  • 优化自定义 Hook

跨域

  • 协议(protocol)、主机(host)、端口号(port)全部相同才叫同源

CORS跨域

  • 对于简单请求，浏览器会直接发送CORS请求，具体说来就是在header中加入origin请求头字段。同样，在响应头中，返回服务器设置的相关CORS头部字段，Access-Control-Allow-Origin字段为允许跨域请求的源。请求时浏览器在请求头的Origin中说明请求的源，服务器收到后发现允许该源跨域请求，则会成功返回。
  • 对于非简单请求，浏览器会自动先发送一个options请求，如果发现服务器支持该请求，则会将真正的请求发送到后端，反之，如果浏览器发现服务端并不支持该请求，则会在控制台抛出错误。
//响应头 Response Headers
header('Content-Type: text/html;charset=utf-8');
header('Access-Control-Allow-Origin:http://localhost:8080'); // *代表允许任何网址请求
header('Access-Control-Allow-Methods:POST,GET'); // 允许请求的类型
header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies
header('Access-Control-Allow-Headers: Content-Type,Origin,Refer'); // 允许自定义请求头的字段

Nginx代理

通过代理的手段，监听同一端口添加不同路径实现不同服务的跨域访问。

location  /test
{
    proxy_pass   http://127.0.0.1:81;
}

Github登录