Reacthooks——前端之React之四&&2022年终小结束【Day105-Day158】

Developer_Niuge
130 阅读13分钟

「回顾2022，展望2023，我正在参与2022年终总结征文大赛活动」 挑战坚持学习1024天——年末总结 来给2022年做一个简单的总结吧，年初上海疫情，呆在小公司且迷茫的我浑浑噩噩的度过了三个月，就这样来到了六月，知道年中才有所醒悟，这时我才疯狂的刷面试题，约面试。来到了现公司，薪资实现了翻倍。七八月偶然的一个机会接触到了自己认知圈外的东西，这时我开始试着去了解它加入他。跟着前辈让我对我的职业规划有了新的规划，自身的认知也有了进一步的提升。2022年有舍有得，总的说是突破的一年。2023年一切过往，皆为序章。往事不回首，未来仍可期。坚持20公里法则，坚持费曼学习法，知识性输出促使人进步。争取新的一年通过学习交流，能更加刷新对道的认知，道术结合找到事物的共性，战胜本我，强大超我。

坚持学习1024天年前先告一段落，这段时间没更新有各种原因，工作疫情。正好也利用这个时间跟着小册学习开发了一个账单系统。查缺补漏。访问地址 欢迎访问,挣取年后给大家带来更优质的文章。

js基础部分可到我文章专栏去看 ---点击这里

Day105-Day155【2022年11月28日-18日】

学习重点 reacthooks

1. 总结常见的Hooks，以及说明它们的作用。（重点state、effect）

React 提供了许多内置 Hooks，常见的 Hooks 包括：

useState: 允许函数组件使用 state。它接受一个初始值并返回一个当前值和一个更新函数。

useEffect: 允许函数组件在渲染后执行副作用。它接受一个函数作为第一个参数，该函数将在组件渲染后和更新后运行。

useContext: 允许函数组件访问上下文。它接受一个上下文对象并返回当前上下文的值。

useReducer: 允许函数组件使用类似于 Redux 的状态管理。它接受一个 reducer 函数和一个初始状态并返回当前状态和一个 dispatch 函数。

useCallback: 允许函数组件缓存回调函数。它接受一个函数和一些依赖项并返回一个缓存的回调函数。

useMemo: 允许函数组件缓存计算结果。它接受一个函数和一些依赖项并返回一个缓存的计算结果。

在使用上，useState 是用来更新组件的状态，useEffect 是在组件渲染后执行副作用，如更新DOM,订阅服务器数据等，useContext 是用来访问上下文中的数据，useReducer 是类似于 Redux 的状态管理，useCallback

2. useEffect在使用上有哪里方式和注意事项？

在使用 useEffect 时，需要注意以下几点：

1.如果你在函数组件中使用了 useEffect，那么你的组件将被认为是一个有副作用的组件，并在组件更新后运行副作用函数。

2.你需要在第二个参数中传入一个依赖项数组，它指定了哪些值需要跟踪。如果这些值发生变化，则会重新执行副作用函数。如果没有传入依赖项数组，则会在每次渲染后都执行副作用函数。

3.如果你需要在组件卸载时执行某些清理操作，可以在副作用函数中返回一个清理函数，该清理函数将在组件卸载时调用。

4.你可以使用多个 useEffect 来管理不同的副作用。

使用 useEffect 的时候需要注意，如果你在副作用函数中使用了组件中的 state 或 props，那么需要将它们列入依赖项数组中。

5.如果你不想在第一次渲染时执行副作用，可以在第二个参数中传入一个空数组。

你可以在 componentDidMount 和 componentDidUpdate 生命周期中执行相同的操作，但是你可以使用 useEffect 来获得更好的性能。

3. useMemo和useCallback有什么区别？

useMemo 和 useCallback 都是 React Hooks，它们都可以帮助我们优化组件性能。

useMemo 是在渲染期间计算并存储一个值，并在下一次渲染中返回该值。它可以帮助我们避免在每次渲染中进行不必要的计算。

useCallback 则是返回一个回调函数并在组件的状态或 props 更改时重新创建它。它可以帮助我们避免组件的重新渲染，因为回调函数的引用没有变化。

总结，useMemo 是在渲染期间计算并存储一个值，而 useCallback 是返回一个回调函数。

4. 什么是闭包陷阱？如何解决出现的闭包陷阱？（面试题）

原生js闭包陷阱是指在 JavaScript 中，当一个函数返回另一个函数时，如果该返回的函数引用了外部函数作用域中的变量，那么这些变量就会被保留在内存中，即使外部函数已经结束执行。这样会导致内存泄漏。

为了解决闭包陷阱，可以使用以下几种方法：

使用 let 或 const 声明变量，而不是 var，因为 let 和 const 在代码块级作用域中声明变量，而 var 声明的变量在函数级作用域中。

将闭包中引用的变量设置为 null。

将闭包函数的引用赋值为 null。

使用“模块模式”或“私有变量”来确保闭包中引用的变量只在函数内部使用。

在 React 中，闭包陷阱通常出现在使用箭头函数作为回调函数的组件中。当组件的状态发生变化时，回调函数会被重新渲染，并且会引用组件中的状态。这样会导致无限制地增加组件的状态，导致内存泄漏。

解决闭包陷阱的方法有以下几种:

  1. 使用类组件而非函数组件。类组件中的状态是局部的，而不是全局的，因此不会引起闭包陷阱。
  2. 使用 useCallback Hooks 来确保回调函数只在组件的状态更改时才会更新。
  3. 使用 useEffect Hooks 来清除任何不再需要的状态。
  4. 使用 useRef Hooks 来存储和更新组件的状态，而不是使用状态变量。

5. Redux中有哪些Hooks？如何使用对应的Hooks？

在 Redux 中有以下几个 Hooks:

  1. useSelector: 用来从 Redux store 中读取状态。它接受一个回调函数作为参数，并返回 store 中回调函数的返回值。
  2. useDispatch: 用来发送 action 到 store。它返回一个 dispatch 函数，可以用来分发 action。

使用方法：

  1. 引入 useSelector 和 useDispatch
  2. 调用 useSelector 传入一个函数，获取 store 中的 state
  3. 调用 useDispatch 获取 dispatch 函数
  4. 在需要更新状态时使用 dispatch 函数分发 action

示例：

Copy codeimport { useSelector, useDispatch } from 'react-redux';
​
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
​
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

注意：在使用 hooks 之前，需要先安装 react-redux 库。

6. React18新增哪些Hooks，这些Hooks有什么作用？

React v18.x 目前并没有新增任何 Hooks。 React v18.x 的主要更新是关于改进的类型安全性和性能改进。

React v16.13.0 新增了以下几个 Hooks：

  1. useEffect: 可以让组件在渲染后执行副作用操作。
  2. useContext: 可以让组件在不通过 props 传递的情况下访问 context。
  3. useReducer: 可以让组件在不使用 class 的情况下使用 reducer。
  4. useCallback: 可以让组件在状态或 props 改变时避免重新渲染。
  5. useMemo: 可以让组件在状态或 props 改变时避免重新计算。
  6. useRef: 可以让组件在不重新渲染的情况下更新组件内部的变量。
  7. useImperativeHandle: 可以让组件在使用 ref 时定制组件的行为。
  8. useLayoutEffect: 和 useEffect 功能类似, 但是会在浏览器渲染之前执行。

以上 Hooks 都可以让我们用函数组件来实现类组件中的行为，并且更加简洁易用。

7. Redux中有哪些Hooks？如何使用对应的Hooks？

  • useSelector

    • 可以将redux中的数据映射到组件中

    • 第一个参数是一个回调函数

      • 函数参数是state
      • 返回一个对象,对象中包含state中的数据

    • 第二个参数是showEqual

      • 作用 ---> 只有当前获取的对应数据改变后,对应的组件才会重新渲染

  • useDispatch

    • 没有参数
    • 返回一个diapatch函数 ---> 可以传入action对象

8. React18新增哪些Hooks，这些Hooks有什么作用？

  • useId

    • 用于生产横跨服务端和客户端的稳定的唯一的ID的同时避免hydration不匹配的hook

  • useTransition

    • 降低某部分任务的更新优先级,先完成优先级较高的任务后执行

  • useDeferredValue

    • 接受一个值,并返回该值的 新副本,该副本将在优先级较高的任务完成后执行

9. 项目初始化的流程包括哪些操作？需要进行哪些常见的配置？

  • 项目初始化的流程

    • 使用React脚手架创建一个初始化的项目
    • 删除不需要的文件
    • 更换网站图标,更换网站的标题
    • 按不同的功能模块在src文件夹下完善项目的目录结构
    • 搭建基础的页面,配置路由,选择路由模式
    • 创建保存项目数据的store
    • 二次封装axios,配置BaseUrl,以便发送网络请求

  • 常见的配置

    • 配置别名
    • 使用craco工具方便对webpack进行配置

10. 手动配置Redux，包括普通的方式和RTK的方式。

  • 配置redux的普通方式

    • 每一个模块设置以下文件目录

      • index.js ---> 文件入口
      • createActions.js ---> 创建action对象
      • reducer.js ---> 定义初始化数据,处理提交的action对象
      • constants.js ---> 定义常量数据

  • 配置redux的RTK方式

    • 使用configStore创建一个store

      • 传入对象类型,对象中是不同模块的reducer

    • 在不同的模块使用createSilce定义自己的初始化数据,reduce,action

  • 将配置的store导出

  • 在index.js文件中从react-redux导出Provider组件

  • 用Provier组件包裹根组件,在store属性中传入我们自己创建的store

11. 完成Axios库的二次封装，并且说明封装的好处。

  • 使用类进行封装

  • 类封装的好处

    • 扩展性好

12.对SSR内容进行总结(SPA/SSR/同构/hydration)

  • SPA

    • Single Page Application, 单页面应用

    • 一种Web应用程序,它只需要将单个页面夹加载到浏览器中

    • 特点

      • 一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转
      • 利用路由机制实现页面内容的变换

    • 优点

      • 用户体验好、快、内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染，SPA 相对服务器压力小
      • 前后端职责分离，架构清晰，前后端进行交互逻辑，后端负责数据处理

    • 缺点

      • 初次加载耗时多：为实现单页 Web 的应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面按需加载
      • SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势。
      • 如果你使用了AJAX进行局部刷新，浏览过的内容就不能用后退按钮重现了。

  • SSR

    • Server Side Rendering, 服务端渲染的简称

    • 在服务器端生成完整的HTML页面结构,返回给浏览器进行渲染

    • 特点

      • 在服务端生成html网页的dom元素
      • 客户端（浏览器）只负责显示dom元素内容

    • 优点

      • 有利于SEO，网站通过href的url将搜索引擎直接引到服务端，服务端提供优质的网页内容给搜索引擎。

    • 缺点

      • 需要消耗一定的服务器资源

  • 同构应用

    • 一套代码既可以在服务端运行又可以在客户端运行,我们称为同构应用
    • 同构是一种SSR的形态,是现代SSR的一种表现形式

  • hydration

    • SSR引申出来的概念
    • SSR ----> 服务端将生成好的HTML页面发送浏览器进行展示,这其中是没有js逻辑的,比如事件的绑定,也就是不能和用户进行交互的
    • 在服务端渲染的时候,UI框架(React/Vue)会记录SSR渲染的页面的内部特征,然后将这个特只能特征映射到我们要在浏览器展示的页面上,它会让我们的页面具有交互性,这个过程称之为Hydration

13. 从服务器请求的数据保存在redux和保存在页面中有什么区别？保存在redux中的使用流程是什么？

React 是一个 JavaScript 库，用于构建用户界面，而 Redux 是一个用于管理应用程序状态的库。当在 React 应用程序中从服务器请求数据时，可以将其保存在组件状态或 Redux 存储中。

将数据保存在组件状态和将其保存在 Redux 存储中的主要区别在于，在 Redux 存储中保存的数据是全局的，可以由应用程序中的任何组件访问，而在组件状态中保存的数据仅可由该特定组件访问。此外，Redux 提供了集中管理应用程序状态的方式，使其更易于理解和调试。

要使用在 Redux 存储中保存的数据，组件需要使用 react-redux 库中的 connect() 函数连接到存储。一旦连接，组件可以使用 mapStateToProps() 函数访问存储中的数据，并使用 mapDispatchToProps() 函数调度操作来更新存储。

总之, Redux 允许集中管理状态,使得在应用的不同部分之间共享数据变得简单。

14. 首页区域封装的思路是什么？包括哪几部分？如何进行复用？

React首页区域封装的思路是使用React组件进行封装，将首页中的各个区域抽象成独立的组件，通过组合这些组件来构建首页。

这些组件可以包括：

  • 头部组件，负责顶部导航栏和logo等
  • 内容组件，负责显示首页主要内容
  • 侧边栏组件，负责显示首页边栏内容
  • 底部组件，负责页面底部的一些内容

复用这些组件可以通过在不同页面中多次使用同一个组件来实现。 例如，可以在不同的页面中都使用同一个头部组件，这样可以保证页面的一致性。

另外，还可以使用 props 和 state 来实现组件的自定义化，从而达到不同页面使用同一组件但显示不同内容的目的。

参考资料

  • Coderwhy学习资料
  • React官网
  • 其他参考资料 结语

志同道合的小伙伴可以加我，一起交流进步，我们坚持每日精进（互相监督思考学习，如果坚持不下来我可以监督你）。我们一起努力鸭！ ——>点击这里

avatar
文章
阅读
粉丝