Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e9d325c

Browse files
author
victorsun
committed
feat
1 parent 458effa commit e9d325c

File tree

2 files changed

+40
-0
lines changed

2 files changed

+40
-0
lines changed

‎12-前端框架/03-React/react18/07-portal/Backdrop.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* Portal 将子节点渲染到存在于父组件以外的 DOM 节点
3+
* ReactDOM.createPortal(child, container)
4+
*/
15
import ReactDOM from "react-dom";
26

37
const backdropRoot = document.getElementById('backdrop-root');

‎12-前端框架/03-React/react18/10-effect&StrictMode/App.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
1+
/*
2+
// useEffect 是 React 中的一个 Hook,用于在函数组件中处理副作用(如数据获取、订阅、手动更改 DOM 等)
3+
// 无依赖项: 如果不传递依赖项数组,副作用函数会在每次渲染后执行
4+
// 空依赖项数组: 如果传递一个空数组作为依赖项,副作用函数只会在组件首次渲染时执行一次
5+
// 带依赖项: 如果传递一个依赖项数组,副作用函数会在依赖项发生变化时执行,同时会先执行上一次渲染中的清除函数
6+
7+
useEffect(() => {
8+
// 副作用逻辑
9+
return () => {
10+
// 清除逻辑(可选)
11+
};
12+
}, [依赖项]);
13+
14+
// demo
15+
16+
import React, { useEffect } from 'react';
17+
18+
function MyComponent() {
19+
useEffect(() => {
20+
// 副作用逻辑
21+
// 相当于类组件中的生命周期方法 componentDidMount / componentDidUpdate
22+
console.log('组件渲染或更新了');
23+
24+
return () => {
25+
// 清除逻辑(可选)
26+
// 相当于类组件中的生命周期方法 componentWillUnmount
27+
console.log('组件卸载了');
28+
};
29+
}); // 无依赖项,在每次渲染后执行
30+
//}, []); // 空依赖数组,只在组件挂载和卸载时执行
31+
32+
return <div>Hello, useEffect!</div>;
33+
}
34+
*/
35+
36+
137
// 组件中部分逻辑如果直接写在函数体中,会影响到组件的渲染,如 setState 触发渲染死循环
238
// 为了避免副作用,使用钩子函数 useEffect() 处理那些不能直接写在组件内部的代码
339
// 如获取数据、记录日志、检查登录、设置定时器等

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /