React基础与实践|青训营笔记

草莓提提
73 阅读6分钟

React基础与实践

React简介与特性

构建用于构建用户界面的JavaScript库，快速响应，适用于大型Web应用程序

特点：

  • 声明式，React采用声明范式，可以轻松描述应用。

  • 组件化（把页面拆分成各个组件，支持JavaScript语法），通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中，复用性强

  • 跨平台编写（依靠渲染器）

可以解决资源加载等待时间过长和浏览器单线程执行问题

Schedule（调度器）：维护时间切片、与浏览器任务调度、优先级调度

Reconciler（协调器）：将JSX（JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，建议使用）转化为Fiber、Fiber树对比、确定更新的Fiber

Renderer（渲染器）：用于管理一颗React树，使其根据底层平台进行不同的调用

React基础

使用React开发web应用组件

image.png

组件

Class组件

类组件是通过各种生命周期函数来包装业务逻辑的，这也是类组件所特有的。

  • 继承+构造函数

  • this

  • 生命周期

  • render

函数式组件

函数组件会更加的纯粹，简单，更利于测试，支持自定义hook，使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织和复用，且能更好的适用于时间切片和并发模式

  • 没有生命周期
  • 借助Hook
  • return JSX

组件和hook关系：贴近组件内部运行的各种逻辑概念

Hook规则和原理

Hook简介：

(1)要启用Hooks，所有React软件包都必须为16.8.0或更高版本.

(2)钩子是允许从功能组件(function component)“挂钩”React状态和生命周期功能的功能。钩子在类内部不起作用-它们允许你在没有类的情况下使用React.

(3)React提供了一些像useState这样的内置Hook。你还可以创建自定义Hook以在不同组件之间重用有状态行为.

(4)Hook是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook不能在class组件中使用——这使得你不使用 class也能使用 React。

hook是JavaScript函数，但它们强加了两个额外的规则.

（1）只能在最顶层使用Hook，不要在循环，条件或嵌套函数中调用Hook。

（2）只能在React函数中调用Hook，不要从常规JavaScript函数中调用Hook。

useState语法:

const [state,setState] = useState(initialState);）(里面封装的是state（对象），在用的时候.)

(1)返回一个有状态值,以及一个更新它的函数.

(2)在初始渲染期间,返回的状态(state)与作为第一个参数（initialState）传递的值相同.

(3)该setState功能用于更新状态。它接受一个新的状态值并排队重新呈现组件.

(4)setState(newState);

(5)在随后的重新渲染过程中，返回的第一个值useState将始终是应用更新后的最新状态.

参考链接：blog.csdn.net/weixin_4513…

hook的过期闭包问题

函数闭包包住了旧的变量值时，就出现了过期闭包问题

React常见API及作用

image.png

React常见Hook及作用

image.png

具体场景案例

拆分组件

image.png

父子组件通信

父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。

React.cloneElement() React.cloneElement()是React顶层API的一部分，用于操作元素。它克隆并返回一个新的元素，使用其第一个参数作为起点。这个参数可以是一个React元素或一个渲染React元素的组件。 新的元素特点：

  • 原有元素的道具与新的道具浅浅地合并在一起
  • 新的子元素取代现有的子元素
  • 原元素中的key 和ref 被保留

当你想添加或修改一个父组件的子元素的道具时，React.cloneElement() ，同时避免不必要的重复代码。 参考链接：juejin.cn/post/706228… forwardRef

React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。

组件间共享信息

useContent

Context提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法，实现组件状态的穿透。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

useReducer

使用 useReducer 能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

useContext搭配useReducer实现组件状态共享

Redux

redux应该是react开发中一个进行统一状态管理的库，redux并非必须配合react去使用，它是可以单独使用去进行状态管理的

注：useReducer、useContext组合可以替代redux使用

组件性能优化

memo

count不变，counter不重新渲染，使用memo包一下

useMemo

count不变，不重新计算calcvalue

useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能

  • useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态

  • useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。 参考链接：blog.csdn.net/qq_35770417…

改变组件挂载位置

createPortal

createPortal() 方法，可以在渲染元素时将元素渲染到网页中的指定位置。这个方法就和他的名字一样，给React元素开启了一个传送门，让它可以去到它应该去的地方。

一个从portal内部触发的事件会一直冒泡至包含React树的祖先，即便这些元素不是Dom树的祖先

逻辑复用

useRequest

useRequest 是一个强大的异步数据管理的 Hooks，

功能：自动请求/手动请求、轮询、防抖、节流、屏幕聚焦重新请求、错误重试、loading delay、SWR(stale-while-revalidate)、缓存

avatar
文章
阅读
粉丝