当前位置：首页 > news >正文

react相关知识

news 2025/8/27 2:47:26

1.类组件和函数组件

（1）类组件

import React, { Component } from 'react';class UserProfile extends Component {constructor(props) {super(props);this.state = {userData: null,isLoading: true,};this.timerId = null;}componentDidMount() {// 模拟 API 调用this.timerId = setTimeout(() => {this.setState({userData: { name: 'John Doe', age: 28 },isLoading: false});}, 2000);}componentWillUnmount() {// 清理工作：清除定时器clearTimeout(this.timerId);}render() {const { isLoading, userData } = this.state;if (isLoading) {return <div>Loading user profile...</div>;}return (<div><h2>Welcome, {userData.name}!</h2><p>Age: {userData.age}</p><p>From: {this.props.city}</p> {/* 使用从父组件传来的 props */}</div>);}
}export default UserProfile;

（2）函数组件

import React, { useState, useEffect } from 'react';const UserProfile = ({ city }) => {// 使用 useState 替代 this.stateconst [userData, setUserData] = useState(null);const [isLoading, setIsLoading] = useState(true);// useEffect 替代生命周期方法useEffect(() => {// componentDidMount 的逻辑（以及 componentDidUpdate 的相关逻辑）const timerId = setTimeout(() => {setUserData({ name: 'John Doe', age: 28 });setIsLoading(false);}, 2000);// cleanup 函数：替代 componentWillUnmountreturn () => {clearTimeout(timerId);};}, []); // 空依赖数组表示只在组件挂载时执行if (isLoading) {return <div>Loading user profile...</div>;}return (<div><h2>Welcome, {userData.name}!</h2><p>Age: {userData.age}</p><p>From: {city}</p></div>);
};export default UserProfile;

2.高阶组件

高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的增强型组件。

简单来说：高阶组件是用于组件复用的高级技巧，它本质上是一个包装器（wrapper）

const EnhancedComponent = higherOrderComponent(WrappedComponent);

为了解决 React 中的逻辑复用问题。在自定义 Hooks 出现之前，这是 React 中主要的逻辑复用方式。

应用：

权限控制：利用高阶组件的 条件渲染 特性可以对页面进行权限控制，权限控制一般分为两个维度：页面级别和页面元素级别
组件渲染性能追踪：借助父组件子组件生命周期规则捕获子组件的生命周期，可以方便的对某个组件的渲染时间进行记录
页面复用

3.哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

setState（）方法被调用：但是这里有个点值得关注，执行 setState 的时候不一定会重新渲染。当 setState 传入 null 时，并不会触发 render。
父组件重新渲染：只要父组件重新渲染了，即使传入子组件的 props 未发生变化，那么子组件也会重新渲染，进而触发 render

重新渲染 render 会做些什么?

会对新旧 VNode 进行对比，也就是我们所说的Diff算法。
对新旧两棵树进行一个深度优先遍历，这样每一个节点都会一个标记，在到深度遍历的时候，每遍历到一和个节点，就把该节点和新的节点树进行对比，如果有差异就放到一个对象里面
遍历差异对象，根据差异的类型，根据对应对规则更新VNode

4.对React-Fiber的理解，它解决了什么问题？

Fiber 是 React 16 中全新的协调引擎（reconciliation engine），也是一种新的数据结构。

Fiber 是 React 的虚拟 DOM 的升级版，它让 React 能够实现增量渲染和更精细的任务控制。

旧架构的问题（Stack Reconciler）

在 React 16 之前，React 使用递归遍历虚拟 DOM 树来进行 diff 计算：

不可中断：一旦开始渲染，就必须完成整个树的计算
阻塞主线程：长时间的渲染会阻塞用户交互、动画等
性能瓶颈：复杂组件树会导致页面卡顿

Fiber 要解决的问题

可中断渲染：将渲染任务拆分成小任务，可以暂停和恢复
任务优先级：区分高优先级（用户交互）和低优先级（数据更新）任务
并发渲染：为未来的并发特性打下基础

5.常用的hook

1.useState

状态管理

2.usEffect

useEffect(() => {// 设置操作const timer = setInterval(() => {}, 1000);const listener = () => {};window.addEventListener('resize', listener);// 清理函数（可选）return () => {clearInterval(timer);                   // 清除定时器window.removeEventListener('resize', listener); // 移除监听console.log('清理完成！');               // 其他清理工作};
}, []);

useEffect 是：