获得徽章 0
- cookie和token的区别：
jQuery 时代的前端项目是作为后端项目的模块部署的，那时候前后端不分家，整个应用的入口是后端控制模板的渲染。在模板渲染前，后端会直接判断路由的权限来决定是否跳转。登录的时候，后端只需要设置 setCookie 这个 header，之后浏览器会自动把 cookie 写入到我们的浏览器存起来，然后当前域名在发送请求的时候都会自动带上这个 cookie。Cookie 是浏览器自动管理和发送的，也算是权限认证的最佳方案之一。但是，在现在这种前后端分离的场景下，通常前后端项目都会部署在不同的机器和服务器之上，Cookie 在跨域上有诸多的限制。所以在这种场景下，我们更愿意手动地去管理权限，于是就诞生了现在流行的基于 token 的权限解决方案，你也可以把 token 理解为我们手动管理的 cookie。展开赞过
评论1 - 观察者模式中的具体观察者怎么理解？
具体观察者是观察者接口（Observer）的一个具体实现类。它实现了观察者接口中定义的更新方法（如update方法），以便在接收到主题对象的状态变化通知时执行相应的操作等人赞过 97 - 什么是 React Fiber？
我们知道React在数据更新时会有diff的操作，此时diff的过程是被分成一小段一小段的，Fiber节点保存了每一阶段任务的工作进度，js会比较一小部分虚拟dom，然后让出主线程，交给浏览器去做其他操作，然后继续比较，如此循环往复，直至完成diff，然后一次性更新到视图上赞过 12 - 强缓存与协商缓存：
浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器缓存主要分为强缓存（也称本地缓存）和协商缓存（也称弱缓存）。
强缓存：当请求资源时，如果是之前请求过的并使用强缓存，那么在过期时间内将不会发送本次请求向服务器获取资源，而是直接从浏览器缓存中获取（不管资源是否改动）。过期了将重新从服务器获取，并再次强缓存。
协商缓存：当请求资源时，如果是之前请求过的并使用协商缓存，还是发送请求到服务器，服务器通过逻辑判断确认资源没有修改返回304码，那么本次的资源则是从缓存中获取；如果经过判断确认资源被修改过，则重新发送资源到客户端，并且客户端更新缓存。
参考：
juejin.cn 展开赞过 32 - React 和Vue
相同点：
1、都支持服务端渲染；
2、都有虚拟DOM，组件化开发，通过props传参进行父子组件数据的传递；
3、都是数据驱动视图；
4、都有支持native的方案（react native，weex）；
5、都有状态管理方案（redux，vuex）；
不同点：
1、react严格意义上只能算是MVC的view层，vue则是MVVM模式；
2、虚拟DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期方法来进行控制；
3、组件写法不一样，react推荐的做法是jsx+inline style，也就是把html和css全部写进javascript
4、数据绑定：vue实现了双向绑定，而react的数据流动是单向的；
5、state对象在react应用中是不可变的，需要使用setState方法更新状态；在vue中，state对象不是必须的，数据有data属性在vue中管理展开赞过 评论2 - 类式组件与函数组件的区别：
1、语法：类组件用class定义，函数组件用function定义；
2、生命周期：类组件可以使用生命周期方法（如componentDidMount、componentDidUpdate等）来处理组件的状态和行为。而函数式组件通过React Hooks（如useEffect，useState等）来实现类似的功能；
3、组件状态和上下文：类组件可以使用state属性来管理组件内部的状态，并且可以使用this访问组件实例和其他方法。函数式组件通过使用useState来管理状态，没有实例或其他类方法；
4、性能：由于函数式组件没有实例化过程，渲染时的性能通常比类组件更高效；
5、可读性和简洁性：函数式组件相对而言更加简洁，代码量更少，并且易于阅读和维护。通常只需要关注数据的输入和输出，而不需要处理复杂的生命周期方法。
尽管函数式组件在React的最新版本已被广泛使用，但类组件仍有他们的用途。例如：当需要使用生命周期方法管理复杂的组件状态或使用上下文时，类组件仍然是一个合适的选择。展开赞过 评论1 - useReducer：是react中的一个自定义Hook，它用于管理具有复杂状态逻辑的组件。useReducer是基于Reducer模式的，它类似于Redux中的Reducer函数。
使用场景：
1. 管理复杂的状态逻辑：当组件的状态逻辑变得复杂，并且需要处理多个相关状态的变化时，可以使用useReducer来管理状态。useReducer通过将状态和操作状态的逻辑封装在Reducer函数中，使得状态管理更加清晰和可扩展。
2. 组件的状态具有多个相关操作：当组件的状态需要响应多个相关操作时，可以使用useReducer。Reducer函数可以根据操作的类型来更新状态，使得代码更加简洁和可维护。
3. 状态之间有复杂的依赖关系：如果组件的状态之间存在复杂的依赖关系，其中一个状态的变化可能会影响其他状态，可以使用useReducer来管理这些状态。Reducer函数可以根据当前状态和操作类型来计算新的状态值。
4. 与其他组件共享状态逻辑：如果多个组件需要共享相同的状态逻辑，可以将状态逻辑提取到useReducer中，并通过Context或自定义Hook来共享状态和Reducer函数。这样可以避免状态逻辑的重复编写，并提高代码的复用性。
需要注意的是，useReducer通常用于管理组件的内部状态，而不是用于全局状态管理。如果需要全局状态管理，可以考虑使用更强大的状态管理库(如Redux)。
总结来说，useReducer适用于管理复杂状态逻辑、处理多个相关操作、处理状态之间的复杂依赖关系以及与其他组件共享状态逻辑的场景。它通过使用Reducer函数将状态和操作状态的逻辑封装在一起，使得状态管理更加清晰、可扩展和可维护。展开赞过 评论3 - useCallback，useMemo，memo：
useMemo和useCallback都是reackHook提供的API，用于缓存数据，优化性能；两者接收的参数都是一样的，第一个参数表示一个回调函数，第二个表示依赖的数据；
共同作用：
在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用
两者的区别：
1、useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
2、useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。
memo函数：接收一个组件式函数，返回一个新的函数【是高阶组件】，被memo包裹的子组件如果没有用到父组件的某个state，则state修改时，该子组件不会重新渲染展开赞过 32 - 什么是useRef？
1、返回一个可变的ref对象，该对象只有个current属性，初始值为传入的参数（initalValue）；
2、返回的ref对象在组件的整个生命周期内保持不变；
3、当更新current值时并不会re-render，这是与useState不同的地方；
4、更新useRef是副作用，所以一般写在useEffect或event handler里；
5、useRef类似于类组件的this；展开评论点赞
juejin.cn