5/12
86%
14 +3
| 标题 | 标签 | 记忆强度 | 最后编辑 | 下次回顾 | 操作 |
|---|---|---|---|---|---|
|
TypeScript 高级类型
|
前端 TypeScript |
|
今天 14:30 | 明天 | |
|
Kubernetes 部署策略
|
DevOps K8s |
|
昨天 09:15 | 3天后 | |
|
PostgreSQL 性能优化
|
数据库 SQL |
|
3天前 | 今天 |
桌面端设计 - 首页/仪表盘展示用户笔记概览、记忆强度分析和待回顾笔记
详细介绍了React Hooks的使用技巧和最佳实践,包括useState, useEffect, useContext等常用Hook的使用场景和注意事项。
MongoDB聚合管道操作详解,包括$match, $group, $project等常用操作符的使用方法和示例代码。
Docker容器网络模式详解,包括bridge、host、overlay等网络模式的特点和使用场景,以及自定义网络的配置方法。
TypeScript高级类型系统详解,包括交叉类型、联合类型、类型保护、类型别名、索引类型和映射类型等内容。
Kubernetes中的各种部署策略详解,包括滚动更新、蓝绿部署、金丝雀发布等策略的实现方法和最佳实践。
PostgreSQL数据库性能优化技巧,包括索引优化、查询优化、配置调优和监控方法等内容。
桌面端设计 - 笔记列表采用网格布局,展示笔记卡片,支持筛选、排序和分页
Hooks 是 React 16.8 引入的新特性,它允许在不编写 class 的情况下使用状态和其他 React 特性。
主要优势包括:
用于在函数组件中添加状态管理。
const [count, setCount] = useState(0);
// 使用状态
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
用于处理副作用,替代生命周期方法。
useEffect(() => {
document.title = `You clicked ${count} times`;
// 清理函数
return () => {
document.title = 'React App';
};
}, [count]); // 仅当 count 更改时才重新运行
创建自定义 Hook 可以将组件逻辑提取到可重用的函数中。
function useWindowSize() {
const [size, setSize] = useState({ width: 0, height: 0 });
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
handleResize(); // 初始化大小
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
将 Hooks 与类组件生命周期方法进行对比记忆:
记忆重要性
当前记忆强度
下次回顾
桌面端设计 - 笔记编辑器提供丰富的编辑功能和记忆设置选项
桌面端设计 - 知识图谱以网络图形式展示知识点之间的关联,支持交互和节点详情查看