复制安装命令
用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。
复制前请先查看来源、License 和安全提示。
SkillAtlasSkill 详情
react18-lifecycle-patterns
Powered by Awesome Copilot GitHub contributors from allcontributors.org
审核状态：已审核Quality 80Security 70
项目 README
来源文件：README.md
🤖 Awesome GitHub Copilot
A community-created collection of custom agents, instructions, skills, hooks, workflows, and plugins to supercharge your GitHub Copilot experience.
[!TIP] Explore the full collection on the website → awesome-copilot.github.com
The website offers full-text search and filtering across hundreds of resources, plus the Learning Hub for guides and tutorials.
Using this collection in an AI agent? A machine-readable
llms.txtis available with structured listings of all agents, instructions, and skills.
📖 Learning Hub
New to GitHub Copilot customization? The Learning Hub on the website offers curated articles, walkthroughs, and reference material — covering everything from core concepts like agents, skills, and instructions to hands-on guides for hooks, agentic workflows, MCP servers, and the Copilot coding agent.
What's in this repo
| Resource | Description | Browse |
|---|---|---|
| 🤖 Agents | Specialized Copilot agents that integrate with MCP servers | All agents → |
| 📋 Instructions | Coding standards applied automatically by file pattern | All instructions → |
| 🎯 Skills | Self-contained folders with instructions and bundled assets | All skills → |
| 🔌 Plugins | Curated bundles of agents and skills for specific workflows | All plugins → |
| 🍳 Cookbook | Copy-paste-ready recipes for working with Copilot APIs | — |
Install a Plugin
For most users, the Awesome Copilot marketplace is already registered in the Copilot CLI/VS Code, so you can install a plugin directly:
copilot plugin install <plugin-name>@awesome-copilot
If you are using an older Copilot CLI version or a custom setup and see an error that the marketplace is unknown, register it once and then install:
copilot plugin marketplace add github/awesome-copilot
copilot plugin install <plugin-name>@awesome-copilot
Contributing
See CONTRIBUTING.md · AGENTS.md for AI agent guidance · Security · Code of Conduct
The customizations here are sourced from third-party developers. Please inspect any agent and its documentation before installing.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
📚 Additional Resources
- VS Code Copilot Customization Documentation - Official Microsoft documentation
- GitHub Copilot Chat Documentation - Complete chat feature guide
- VS Code Settings - General VS Code configuration guide
™️ Trademarks
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
开发与工程内容与创作Agent / MCP / Skill 创作
高风险
- 来源需自行核对维护者身份。
- 未检测到明显脚本安装指令。
- 未检测到明显外部权限要求。
- 存在潜在风险命令，请谨慎安装。
- 扫描发现：1 条。
Codex — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-lifecycle-patterns" 文件夹复制到 Codex 的 skills 目录中。
- 重启 Codex 让新的 skill 生效。
Codex — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Codex 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Codex 让新的 skill 生效。
Claude Code — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-lifecycle-patterns" 文件夹复制到 Claude Code 的 skills 目录中。
- 重启 Claude Code 让新的 skill 生效。
Claude Code — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Claude Code 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Claude Code 让新的 skill 生效。
Cursor — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-lifecycle-patterns" 文件夹复制到 Cursor 的 skills 目录中。
- 重启 Cursor 让新的 skill 生效。
Cursor — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Cursor 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Cursor 让新的 skill 生效。
GitHub Copilot — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-lifecycle-patterns" 文件夹复制到 GitHub Copilot 的 skills 目录中。
- 重启 GitHub Copilot 让新的 skill 生效。
GitHub Copilot — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 GitHub Copilot 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 GitHub Copilot 让新的 skill 生效。
Windsurf — Git Clone 安装
- 安装前请先查看来源仓库和风险报告。
- 克隆仓库：git clone https://github.com/github/awesome-copilot.git
- 将 "skills/react18-lifecycle-patterns" 文件夹复制到 Windsurf 的 skills 目录中。
- 重启 Windsurf 让新的 skill 生效。
Windsurf — 手动复制安装
- 安装前请先查看来源仓库和风险报告。
- 从源仓库下载 SKILL.md 及相关文件。
- 在 Windsurf 的 skills 目录中创建新文件夹。
- 将所有 skill 文件复制到新文件夹中。
- 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: react18-lifecycle-patterns
description: 'Provides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - targeting React 18.3.1. Use this skill whenever a class component needs its lifecycle methods migrated, when deciding between getDerivedStateFromProps vs componentDidUpdate, when adding getSnapshotBeforeUpdate, or when fixing React 18 UNSAFE_ lifecycle warnings. Always use this skill before writing any lifecycle migration code - do not guess the pattern from memory, the decision trees here prevent the most common migration mistakes.'React 18 Lifecycle Patterns
Reference for migrating the three unsafe class component lifecycle methods to React 18.3.1 compliant patterns.
Quick Decision Guide
Before migrating any lifecycle method, identify the semantic category of what the method does. Wrong category = wrong migration. The table below routes you to the correct reference file.
componentWillMount - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
Sets initial state (this.setState(...)) | Move to constructor | → componentWillMount.md |
| Runs a side effect (fetch, subscription, DOM) | Move to componentDidMount | → componentWillMount.md |
| Derives initial state from props | Move to constructor with props | → componentWillMount.md |
componentWillReceiveProps - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
| Async side effect triggered by prop change (fetch, cancel) | componentDidUpdate | → componentWillReceiveProps.md |
| Pure state derivation from new props (no side effects) | getDerivedStateFromProps | → componentWillReceiveProps.md |
componentWillUpdate - what does it do?
| What it does | Correct migration | Reference |
|---|---|---|
| Reads the DOM before update (scroll, size, position) | getSnapshotBeforeUpdate | → componentWillUpdate.md |
| Cancels requests / runs effects before update | componentDidUpdate with prev comparison | → componentWillUpdate.md |
The UNSAFE_ Prefix Rule
Never use UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, or UNSAFE_componentWillUpdate as a permanent fix.
Prefixing suppresses the React 18.3.1 warning but does NOT:
- Fix concurrent mode safety issues
- Prepare the codebase for React 19 (where these are removed, with or without the prefix)
- Fix the underlying semantic problem the migration is meant to address
The UNSAFE_ prefix is only appropriate as a temporary hold while scheduling the real migration sprint. Mark any UNSAFE_ prefix additions with:
// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.
Reference Files
Read the full reference file for the lifecycle method you are migrating:
references/componentWillMount.md- 3 cases with full before/after codereferences/componentWillReceiveProps.md- getDerivedStateFromProps trap warnings, full examplesreferences/componentWillUpdate.md- getSnapshotBeforeUpdate + componentDidUpdate pairing
Read the relevant file before writing any migration code.
评论 (0)
暂无评论，成为第一个评论者吧！