├── pnpm-workspace.yaml ├── assets └── greatfrontend.gif ├── .prettierrc ├── __template__ └── todo-change-me │ ├── en-US.mdx │ └── metadata.json ├── questions ├── explain-what-react-hydration-is │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-virtual-dom-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── what-are-react-portals-used-for │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-the-rules-of-react-hooks │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-jsx-and-how-does-it-work │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── what-is-reconciliation-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── how-do-you-debug-react-applications │ ├── metadata.json │ └── en-US.langnostic.json ├── what-are-some-react-anti-patterns │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── how-do-you-test-react-applications │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-react-fragments-used-for │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── what-does-re-rendering-mean-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-error-boundaries-in-react-for │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-forwardref-in-react-used-for │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── explain-the-composition-pattern-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── how-do-you-localize-react-applications │ ├── metadata.json │ └── en-US.langnostic.json ├── what-are-higher-order-components-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-the-benefits-of-using-hooks-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── what-is-code-splitting-in-a-react-application │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-react-describe-the-benefits-of-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-purpose-of-the-key-prop-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── how-do-you-reset-a-components-state-in-react │ ├── metadata.json │ └── en-US.langnostic.json ├── what-does-the-dependency-array-of-useeffect-affect │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-react-suspense-and-what-does-it-enable │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── why-does-react-recommend-against-mutating-state │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── explain-one-way-data-flow-of-react-and-its-benefits │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-some-pitfalls-about-using-context-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-react-strict-mode-and-what-are-its-benefits │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-flux-pattern-and-what-are-its-benefits │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── explain-what-happens-when-setstate-is-called-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-render-props-in-react-and-what-are-they-for │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-difference-between-state-and-props-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-useid-hook-in-react-and-when-should-it-be-used │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-usememo-hook-in-react-and-when-should-it-be-used │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-useref-hook-in-react-and-when-should-it-be-used │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── explain-static-generation-of-react-applications-and-its-benefits │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-are-some-common-pitfalls-when-doing-data-fetching-in-react │ ├── metadata.json │ └── en-US.langnostic.json ├── what-is-the-usecallback-hook-in-react-and-when-should-it-be-used │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-usereducer-hook-in-react-and-when-should-it-be-used │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── explain-the-presentational-vs-container-component-pattern-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-difference-between-useeffect-and-uselayouteffect-in-react │ ├── metadata.json │ └── en-US.langnostic.json ├── explain-server-side-rendering-of-react-applications-and-its-benefits │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── how-do-you-handle-asynchronous-data-loading-in-react-applications │ ├── metadata.json │ └── en-US.langnostic.json ├── how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-difference-between-controlled-and-uncontrolled-react-components │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── what-is-the-difference-between-react-node-react-element-and-a-react-component │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── how-do-you-decide-between-using-react-state-context-and-external-state-managers │ ├── metadata.json │ └── en-US.langnostic.json ├── what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react │ ├── metadata.json │ ├── en-US.langnostic.json │ ├── zh-CN.mdx │ └── en-US.mdx ├── how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx └── what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used │ ├── metadata.json │ ├── en-US.langnostic.json │ └── zh-CN.mdx ├── langnostic.config.ts ├── scripts ├── types.ts └── sync.ts ├── package.json ├── .github └── workflows │ └── gen-toc.yml └── .gitignore /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | # To let pnpm know this is the repo root as it's also installed as a submodule 2 | -------------------------------------------------------------------------------- /assets/greatfrontend.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yangshun/top-reactjs-interview-questions/HEAD/assets/greatfrontend.gif -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSameLine": true, 3 | "printWidth": 80, 4 | "proseWrap": "never", 5 | "singleQuote": true, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /__template__/todo-change-me/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: TODO_REPLACE_TITLE 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 8 | 9 | --- 10 | 11 | ## Some heading 12 | 13 | TODO 14 | 15 | ## Further reading 16 | 17 | - [Foo](#foo) 18 | - [Bar](#bar) 19 | -------------------------------------------------------------------------------- /__template__/todo-change-me/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "todo-change-me", 3 | "languages": [], 4 | "companies": [], 5 | "premium": false, 6 | "duration": 5, 7 | "published": false, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["javascript"], 11 | "importance": "low", 12 | "ranking": 999, 13 | "difficulty": "easy" 14 | } 15 | -------------------------------------------------------------------------------- /questions/explain-what-react-hydration-is/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-what-react-hydration-is", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 260, 14 | "difficulty": "hard", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-virtual-dom-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-virtual-dom-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 450, 14 | "difficulty": "hard", 15 | "section": "internals" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-react-portals-used-for/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-react-portals-used-for", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 270, 14 | "difficulty": "hard", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-the-rules-of-react-hooks/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-the-rules-of-react-hooks", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 100, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-jsx-and-how-does-it-work/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-jsx-and-how-does-it-work", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 30, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-reconciliation-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-reconciliation-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 480, 14 | "difficulty": "hard", 15 | "section": "internals" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-do-you-debug-react-applications/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-do-you-debug-react-applications", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 280, 14 | "difficulty": "hard", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-some-react-anti-patterns/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-some-react-anti-patterns", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 420, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-do-you-test-react-applications/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-do-you-test-react-applications", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 250, 14 | "difficulty": "medium", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-react-fragments-used-for/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-react-fragments-used-for", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 200, 14 | "difficulty": "medium", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-does-re-rendering-mean-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-does-re-rendering-mean-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 190, 14 | "difficulty": "hard", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-error-boundaries-in-react-for/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-error-boundaries-in-react-for", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 240, 14 | "difficulty": "medium", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-forwardref-in-react-used-for/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-forwardref-in-react-used-for", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 210, 14 | "difficulty": "medium", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/explain-the-composition-pattern-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-the-composition-pattern-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 440, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-do-you-localize-react-applications/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-do-you-localize-react-applications", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react", "i18n"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 300, 14 | "difficulty": "medium", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-higher-order-components-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-higher-order-components-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 330, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-the-benefits-of-using-hooks-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-the-benefits-of-using-hooks-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 90, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-code-splitting-in-a-react-application/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-code-splitting-in-a-react-application", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 310, 14 | "difficulty": "medium", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-react-describe-the-benefits-of-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-react-describe-the-benefits-of-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 10, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-purpose-of-the-key-prop-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-purpose-of-the-key-prop-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 50, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-do-you-reset-a-components-state-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-do-you-reset-a-components-state-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 220, 14 | "difficulty": "medium", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-does-the-dependency-array-of-useeffect-affect/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-does-the-dependency-array-of-useeffect-affect", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 130, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-react-suspense-and-what-does-it-enable/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-react-suspense-and-what-does-it-enable", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 490, 14 | "difficulty": "medium", 15 | "section": "internals" 16 | } 17 | -------------------------------------------------------------------------------- /questions/why-does-react-recommend-against-mutating-state/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "why-does-react-recommend-against-mutating-state", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 230, 14 | "difficulty": "hard", 15 | "section": "intermediate" 16 | } 17 | -------------------------------------------------------------------------------- /questions/explain-one-way-data-flow-of-react-and-its-benefits/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-one-way-data-flow-of-react-and-its-benefits", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 350, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-some-pitfalls-about-using-context-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-some-pitfalls-about-using-context-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 80, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-react-strict-mode-and-what-are-its-benefits/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-react-strict-mode-and-what-are-its-benefits", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 290, 14 | "difficulty": "medium", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-flux-pattern-and-what-are-its-benefits/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-flux-pattern-and-what-are-its-benefits", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 340, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/explain-what-happens-when-setstate-is-called-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-what-happens-when-setstate-is-called-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 500, 14 | "difficulty": "medium", 15 | "section": "internals" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-render-props-in-react-and-what-are-they-for/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-render-props-in-react-and-what-are-they-for", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 410, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-state-and-props-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-difference-between-state-and-props-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 40, 14 | "difficulty": "easy", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-useid-hook-in-react-and-when-should-it-be-used", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 180, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-usememo-hook-in-react-and-when-should-it-be-used", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 160, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-useref-hook-in-react-and-when-should-it-be-used", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 140, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/explain-static-generation-of-react-applications-and-its-benefits/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-static-generation-of-react-applications-and-its-benefits", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 380, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-are-some-common-pitfalls-when-doing-data-fetching-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 400, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-usecallback-hook-in-react-and-when-should-it-be-used", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 150, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-usereducer-hook-in-react-and-when-should-it-be-used", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 170, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /langnostic.config.ts: -------------------------------------------------------------------------------- 1 | import { ConfigType } from 'langnostic'; 2 | 3 | export default { 4 | ai: { 5 | provider: 'google', 6 | }, 7 | localeConfig: { 8 | source: 'en-US', 9 | target: ['zh-CN'], 10 | }, 11 | groups: [ 12 | { 13 | name: 'quiz-react', 14 | plugin: 'mdx', 15 | paths: [ 16 | { 17 | source: './questions/*/en-US.mdx', 18 | target: './questions/*/{locale}.mdx', 19 | }, 20 | ], 21 | }, 22 | ], 23 | } satisfies ConfigType; 24 | -------------------------------------------------------------------------------- /questions/explain-the-presentational-vs-container-component-pattern-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-the-presentational-vs-container-component-pattern-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 390, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-difference-between-useeffect-and-uselayouteffect-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 110, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /questions/explain-server-side-rendering-of-react-applications-and-its-benefits/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "explain-server-side-rendering-of-react-applications-and-its-benefits", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 370, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-do-you-handle-asynchronous-data-loading-in-react-applications", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react", "async"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 360, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 460, 14 | "difficulty": "hard", 15 | "section": "internals" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-difference-between-controlled-and-uncontrolled-react-components", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 70, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 470, 14 | "difficulty": "hard", 15 | "section": "internals" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-difference-between-react-node-react-element-and-a-react-component", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 20, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-do-you-decide-between-using-react-state-context-and-external-state-managers", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 430, 14 | "difficulty": "medium", 15 | "section": "patterns" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "medium", 13 | "ranking": 60, 14 | "difficulty": "medium", 15 | "section": "basics" 16 | } 17 | -------------------------------------------------------------------------------- /questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react", "performance"], 11 | "frameworks": ["react"], 12 | "importance": "high", 13 | "ranking": 320, 14 | "difficulty": "medium", 15 | "section": "advanced" 16 | } 17 | -------------------------------------------------------------------------------- /questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used", 3 | "languages": [], 4 | "companies": [], 5 | "access": "free", 6 | "duration": 5, 7 | "published": true, 8 | "featured": true, 9 | "category": "react", 10 | "topics": ["react"], 11 | "frameworks": ["react"], 12 | "importance": "low", 13 | "ranking": 120, 14 | "difficulty": "medium", 15 | "section": "hooks" 16 | } 17 | -------------------------------------------------------------------------------- /scripts/types.ts: -------------------------------------------------------------------------------- 1 | export type QuestionMetadata = Readonly<{ 2 | published: boolean; 3 | slug: string; 4 | ranking: number; 5 | importance: string; 6 | featured: boolean; 7 | }>; 8 | 9 | export type QuestionFrontmatter = Readonly<{ 10 | title: string; 11 | }>; 12 | 13 | export type QuestionItem = Readonly<{ 14 | metadata: QuestionMetadata; 15 | href: string; 16 | title: string; 17 | titleSlug: string; 18 | locale: string; 19 | content: string; 20 | }>; 21 | 22 | // From parsed CSV. 23 | export type QuestionRaw = Readonly<{ 24 | slug: string; 25 | title: string; 26 | ranking: number; 27 | section: string; 28 | }>; 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "top-reactjs-interview-questions", 3 | "version": "1.0.0", 4 | "description": "List of top React interview questions", 5 | "main": "index.js", 6 | "scripts": { 7 | "gen": "tsx scripts/gen.ts", 8 | "sync": "tsx scripts/sync.ts", 9 | "i18n": "langnostic translate" 10 | }, 11 | "keywords": [ 12 | "javascript", 13 | "interview", 14 | "questions" 15 | ], 16 | "author": "yangshun", 17 | "license": "ISC", 18 | "dependencies": { 19 | "@types/node": "^20.14.2", 20 | "csv-parse": "^5.5.6", 21 | "github-slugger": "^2.0.0", 22 | "globby": "^14.0.1", 23 | "gray-matter": "^4.0.3", 24 | "langnostic": "^0.0.8", 25 | "tsx": "^4.15.1" 26 | }, 27 | "devDependencies": { 28 | "typescript": "^5.8.2" 29 | }, 30 | "engines": { 31 | "node": ">= 22.15.0" 32 | }, 33 | "packageManager": "pnpm@10.9.0" 34 | } 35 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "8feb9b4e" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "e57ace0a", 11 | "2a7816d0", 12 | "db2104d1", 13 | "1d2f13cf", 14 | "5c2a81c6", 15 | "d8144183", 16 | "1e7edf1", 17 | "d974c44a", 18 | "f78b3a8f", 19 | "8b4fde5a", 20 | "e1ff7345", 21 | "1f4770e5", 22 | "a474117" 23 | ] 24 | }, 25 | "targets": { 26 | "zh-CN": [ 27 | "77da26a5", 28 | "e57ace0a", 29 | "2a7816d0", 30 | "db2104d1", 31 | "1d2f13cf", 32 | "5c2a81c6", 33 | "d8144183", 34 | "1e7edf1", 35 | "d974c44a", 36 | "f78b3a8f", 37 | "8b4fde5a", 38 | "e1ff7345", 39 | "1f4770e5", 40 | "a474117" 41 | ] 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /questions/what-does-the-dependency-array-of-useeffect-affect/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "a308a791" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "a9bbe1f4", 11 | "2a7816d0", 12 | "677e111a", 13 | "6d2be08c", 14 | "f2fc784e", 15 | "69538c71", 16 | "9d4d559d", 17 | "324bbb23", 18 | "a1c25b61", 19 | "b778d1bb", 20 | "d494e056", 21 | "fe32bc78", 22 | "1f4770e5", 23 | "1ec7714" 24 | ] 25 | }, 26 | "targets": { 27 | "zh-CN": [ 28 | "77da26a5", 29 | "a9bbe1f4", 30 | "2a7816d0", 31 | "677e111a", 32 | "6d2be08c", 33 | "f2fc784e", 34 | "69538c71", 35 | "9d4d559d", 36 | "324bbb23", 37 | "a1c25b61", 38 | "b778d1bb", 39 | "d494e056", 40 | "fe32bc78", 41 | "1f4770e5", 42 | "1ec7714" 43 | ] 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /questions/what-is-virtual-dom-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "673f7cc3" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "101b6b73", 11 | "2a7816d0", 12 | "3abd7d7", 13 | "83283a80", 14 | "9ab3a4db", 15 | "4e8ede6c", 16 | "d9194b1b", 17 | "2819c383", 18 | "d536590c", 19 | "9b5019f0", 20 | "45656029", 21 | "c5b1f058", 22 | "528e3a81", 23 | "1f4770e5", 24 | "52bdcb5c" 25 | ] 26 | }, 27 | "targets": { 28 | "zh-CN": [ 29 | "77da26a5", 30 | "101b6b73", 31 | "2a7816d0", 32 | "3abd7d7", 33 | "83283a80", 34 | "9ab3a4db", 35 | "4e8ede6c", 36 | "d9194b1b", 37 | "2819c383", 38 | "d536590c", 39 | "9b5019f0", 40 | "45656029", 41 | "c5b1f058", 42 | "528e3a81", 43 | "1f4770e5", 44 | "52bdcb5c" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "bad88451" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "2373cc1e", 11 | "c0c3890c", 12 | "2a7816d0", 13 | "4bf584f2", 14 | "842bf7e8", 15 | "ca0350ad", 16 | "8b3145d3", 17 | "b0a712ce", 18 | "274caa8f", 19 | "4759a135", 20 | "7ee77cb7", 21 | "67d1483d", 22 | "c91eea09", 23 | "1f4770e5", 24 | "ff3d501d" 25 | ] 26 | }, 27 | "targets": { 28 | "zh-CN": [ 29 | "77da26a5", 30 | "2373cc1e", 31 | "c0c3890c", 32 | "2a7816d0", 33 | "4bf584f2", 34 | "842bf7e8", 35 | "ca0350ad", 36 | "8b3145d3", 37 | "b0a712ce", 38 | "274caa8f", 39 | "4759a135", 40 | "7ee77cb7", 41 | "67d1483d", 42 | "c91eea09", 43 | "1f4770e5", 44 | "ff3d501d" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /questions/what-are-the-rules-of-react-hooks/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "c629b10" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "de8b3ee0", 11 | "2a7816d0", 12 | "f5aba161", 13 | "ed720c14", 14 | "16f17360", 15 | "2cc993f2", 16 | "ac41889a", 17 | "9a4391aa", 18 | "138f48cb", 19 | "40ffa3ae", 20 | "5d83599a", 21 | "5497be2f", 22 | "4b6b601a", 23 | "5b71e887", 24 | "1f4770e5", 25 | "3ad62e32" 26 | ] 27 | }, 28 | "targets": { 29 | "zh-CN": [ 30 | "77da26a5", 31 | "de8b3ee0", 32 | "2a7816d0", 33 | "f5aba161", 34 | "ed720c14", 35 | "16f17360", 36 | "2cc993f2", 37 | "ac41889a", 38 | "9a4391aa", 39 | "138f48cb", 40 | "40ffa3ae", 41 | "5d83599a", 42 | "5497be2f", 43 | "4b6b601a", 44 | "5b71e887", 45 | "1f4770e5", 46 | "3ad62e32" 47 | ] 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /questions/what-is-the-purpose-of-the-key-prop-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "2601e0d7" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "d2a2b38f", 11 | "be3278d7", 12 | "2a7816d0", 13 | "b4ec927b", 14 | "83283a80", 15 | "c06c7ca6", 16 | "7d8fd03c", 17 | "1e7a3ee9", 18 | "16dd4479", 19 | "33022fb4", 20 | "7ea1eb88", 21 | "2ff1b601", 22 | "ce982534", 23 | "20390e69", 24 | "1f4770e5", 25 | "5e88b75" 26 | ] 27 | }, 28 | "targets": { 29 | "zh-CN": [ 30 | "77da26a5", 31 | "d2a2b38f", 32 | "be3278d7", 33 | "2a7816d0", 34 | "b4ec927b", 35 | "83283a80", 36 | "c06c7ca6", 37 | "7d8fd03c", 38 | "1e7a3ee9", 39 | "16dd4479", 40 | "33022fb4", 41 | "7ea1eb88", 42 | "2ff1b601", 43 | "ce982534", 44 | "20390e69", 45 | "1f4770e5", 46 | "5e88b75" 47 | ] 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /questions/why-does-react-recommend-against-mutating-state/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "8ef415b" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "945aa235", 11 | "2a7816d0", 12 | "659d32f8", 13 | "aca26603", 14 | "688b93e4", 15 | "aace65b5", 16 | "f21a1285", 17 | "3ba086f", 18 | "fa3a5394", 19 | "c1c28417", 20 | "9e029a78", 21 | "d0d12f49", 22 | "79d9587b", 23 | "ecbd7a1a", 24 | "1f4770e5", 25 | "7aa2ae0" 26 | ] 27 | }, 28 | "targets": { 29 | "zh-CN": [ 30 | "77da26a5", 31 | "945aa235", 32 | "2a7816d0", 33 | "659d32f8", 34 | "aca26603", 35 | "688b93e4", 36 | "aace65b5", 37 | "f21a1285", 38 | "3ba086f", 39 | "fa3a5394", 40 | "c1c28417", 41 | "9e029a78", 42 | "d0d12f49", 43 | "79d9587b", 44 | "ecbd7a1a", 45 | "1f4770e5", 46 | "7aa2ae0" 47 | ] 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /questions/explain-what-happens-when-setstate-is-called-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "c395a10b" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "bc93022f", 11 | "2a7816d0", 12 | "ea57d6f1", 13 | "8bf1f14", 14 | "2b5b2680", 15 | "56f02148", 16 | "7b51019", 17 | "6ddd5305", 18 | "3294def3", 19 | "4610812b", 20 | "bdc4dbb4", 21 | "28eb626b", 22 | "9de13ed8", 23 | "f1596715", 24 | "1f4770e5", 25 | "fa842b3f" 26 | ] 27 | }, 28 | "targets": { 29 | "zh-CN": [ 30 | "77da26a5", 31 | "bc93022f", 32 | "2a7816d0", 33 | "ea57d6f1", 34 | "8bf1f14", 35 | "2b5b2680", 36 | "56f02148", 37 | "7b51019", 38 | "6ddd5305", 39 | "3294def3", 40 | "4610812b", 41 | "bdc4dbb4", 42 | "28eb626b", 43 | "9de13ed8", 44 | "f1596715", 45 | "1f4770e5", 46 | "fa842b3f" 47 | ] 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /.github/workflows/gen-toc.yml: -------------------------------------------------------------------------------- 1 | name: Generate table of contents 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: 7 | - main 8 | 9 | jobs: 10 | gen-toc: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@v3 15 | with: 16 | ref: ${{ github.head_ref }} 17 | - name: Install pnpm 18 | uses: pnpm/action-setup@v2 19 | - name: Install dependencies 20 | run: pnpm install 21 | - name: Generate table of contents 22 | run: npm run gen 23 | - name: 'Commit changes if required' 24 | run: | 25 | if ! git diff --quiet README.md; then 26 | git config user.email "github-actions[bot]@users.noreply.github.com" 27 | git config user.name "GitHub Actions" 28 | git add README.md 29 | git commit -m "[auto] regenerate table of contents" 30 | git push 31 | echo "[info] Table of contents updated and committed." 32 | else 33 | echo "[info] No changes to table of contents." 34 | fi 35 | working-directory: ${{ github.workspace }} 36 | -------------------------------------------------------------------------------- /questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "74976db5" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "a96ea384", 11 | "2a7816d0", 12 | "2d88e1ef", 13 | "cd5858c6", 14 | "f1e6f589", 15 | "de6d76a0", 16 | "da2659c6", 17 | "9b5019f0", 18 | "2f9c8751", 19 | "6c730271", 20 | "a3337c67", 21 | "9c6171f", 22 | "91984c7a", 23 | "4cf9f513", 24 | "7ec7f19", 25 | "1f4770e5", 26 | "ee4913a3" 27 | ] 28 | }, 29 | "targets": { 30 | "zh-CN": [ 31 | "77da26a5", 32 | "a96ea384", 33 | "2a7816d0", 34 | "2d88e1ef", 35 | "cd5858c6", 36 | "f1e6f589", 37 | "de6d76a0", 38 | "da2659c6", 39 | "9b5019f0", 40 | "2f9c8751", 41 | "6c730271", 42 | "a3337c67", 43 | "9c6171f", 44 | "91984c7a", 45 | "4cf9f513", 46 | "7ec7f19", 47 | "1f4770e5", 48 | "ee4913a3" 49 | ] 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /questions/what-are-react-fragments-used-for/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "68d8dd3b" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "2c3f9550", 11 | "dd9fd698", 12 | "2a7816d0", 13 | "bf3278a0", 14 | "1f4d779f", 15 | "f3e08907", 16 | "a254281b", 17 | "9df49c4", 18 | "eea083fa", 19 | "6e4d142f", 20 | "fa14afe9", 21 | "76a96f35", 22 | "fe82c56", 23 | "98258d16", 24 | "6dd3b324", 25 | "b2e4f802", 26 | "1f4770e5", 27 | "3ecc2af2" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "2c3f9550", 34 | "dd9fd698", 35 | "2a7816d0", 36 | "bf3278a0", 37 | "1f4d779f", 38 | "f3e08907", 39 | "a254281b", 40 | "9df49c4", 41 | "eea083fa", 42 | "6e4d142f", 43 | "fa14afe9", 44 | "76a96f35", 45 | "fe82c56", 46 | "98258d16", 47 | "6dd3b324", 48 | "b2e4f802", 49 | "1f4770e5", 50 | "3ecc2af2" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/explain-what-react-hydration-is/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "1e9bbc14" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "7fb6ab38", 11 | "2a7816d0", 12 | "d0297b79", 13 | "16b36c26", 14 | "e5673308", 15 | "d4cfa24b", 16 | "58452457", 17 | "a4946601", 18 | "9b5019f0", 19 | "efc9687e", 20 | "be20f28a", 21 | "f59558f6", 22 | "7427c0b2", 23 | "18dc6284", 24 | "b473e52c", 25 | "13518d3f", 26 | "1f4770e5", 27 | "dab0684e" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "7fb6ab38", 34 | "2a7816d0", 35 | "d0297b79", 36 | "16b36c26", 37 | "e5673308", 38 | "d4cfa24b", 39 | "58452457", 40 | "a4946601", 41 | "9b5019f0", 42 | "efc9687e", 43 | "be20f28a", 44 | "f59558f6", 45 | "7427c0b2", 46 | "18dc6284", 47 | "b473e52c", 48 | "13518d3f", 49 | "1f4770e5", 50 | "dab0684e" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/what-is-reconciliation-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "6cd6cde0" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "395ad6b4", 11 | "2a7816d0", 12 | "70689fd5", 13 | "83283a80", 14 | "73b06133", 15 | "5ca1142e", 16 | "99ef4b1f", 17 | "567d60e7", 18 | "6ed53fbc", 19 | "d184173c", 20 | "d4cf191f", 21 | "50fae776", 22 | "9b5019f0", 23 | "a611c0e2", 24 | "289ac849", 25 | "f47f3922", 26 | "1f4770e5", 27 | "f1a2f6f6" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "395ad6b4", 34 | "2a7816d0", 35 | "70689fd5", 36 | "83283a80", 37 | "73b06133", 38 | "5ca1142e", 39 | "99ef4b1f", 40 | "567d60e7", 41 | "6ed53fbc", 42 | "d184173c", 43 | "d4cf191f", 44 | "50fae776", 45 | "9b5019f0", 46 | "a611c0e2", 47 | "289ac849", 48 | "f47f3922", 49 | "1f4770e5", 50 | "f1a2f6f6" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/what-is-react-suspense-and-what-does-it-enable/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "8ffa840b" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "371f1daf", 11 | "e19d9140", 12 | "2a7816d0", 13 | "84654cb7", 14 | "e13c0460", 15 | "26e79d86", 16 | "8d7ee4f", 17 | "163c801e", 18 | "e518ce63", 19 | "3bb9ecf1", 20 | "ee167ce", 21 | "5f97c4a8", 22 | "cd87b9ba", 23 | "c7a2ab39", 24 | "2f9739a9", 25 | "5b2826a2", 26 | "1f4770e5", 27 | "930b7f1b" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "371f1daf", 34 | "e19d9140", 35 | "2a7816d0", 36 | "84654cb7", 37 | "e13c0460", 38 | "26e79d86", 39 | "8d7ee4f", 40 | "163c801e", 41 | "e518ce63", 42 | "3bb9ecf1", 43 | "ee167ce", 44 | "5f97c4a8", 45 | "cd87b9ba", 46 | "c7a2ab39", 47 | "2f9739a9", 48 | "5b2826a2", 49 | "1f4770e5", 50 | "930b7f1b" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "74dcaf9" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "bf2da619", 11 | "2a7816d0", 12 | "f100e86a", 13 | "62e3785", 14 | "f9a4a61e", 15 | "9b5019f0", 16 | "bb6ad948", 17 | "512d4005", 18 | "df6d0005", 19 | "c32224bc", 20 | "349bbc4a", 21 | "389d0daa", 22 | "182800d5", 23 | "117d06f9", 24 | "98a50d6b", 25 | "f9866dae", 26 | "1f4770e5", 27 | "db46a0c" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "bf2da619", 34 | "2a7816d0", 35 | "f100e86a", 36 | "62e3785", 37 | "f9a4a61e", 38 | "9b5019f0", 39 | "bb6ad948", 40 | "512d4005", 41 | "df6d0005", 42 | "c32224bc", 43 | "349bbc4a", 44 | "389d0daa", 45 | "182800d5", 46 | "117d06f9", 47 | "98a50d6b", 48 | "f9866dae", 49 | "1f4770e5", 50 | "db46a0c" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "5f87efb5" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "840ffa08", 11 | "2a7816d0", 12 | "e5691f6a", 13 | "bd34032", 14 | "9eb5243b", 15 | "6210916a", 16 | "bab4ca0d", 17 | "12a78449", 18 | "1fb87459", 19 | "27a65bb7", 20 | "1b2bedd5", 21 | "6ef3f763", 22 | "35fba11a", 23 | "9095386", 24 | "f2048bc7", 25 | "ae476bdb", 26 | "1f4770e5", 27 | "bb590db9" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "840ffa08", 34 | "2a7816d0", 35 | "e5691f6a", 36 | "bd34032", 37 | "9eb5243b", 38 | "6210916a", 39 | "bab4ca0d", 40 | "12a78449", 41 | "1fb87459", 42 | "27a65bb7", 43 | "1b2bedd5", 44 | "6ef3f763", 45 | "35fba11a", 46 | "9095386", 47 | "f2048bc7", 48 | "ae476bdb", 49 | "1f4770e5", 50 | "bb590db9" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/what-are-some-pitfalls-about-using-context-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "7399b59d" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "5544ad8f", 11 | "2a7816d0", 12 | "889c6919", 13 | "cd5858c6", 14 | "487c5dfd", 15 | "748ffe75", 16 | "d46b78ac", 17 | "2c498dfb", 18 | "a92f301a", 19 | "70db662a", 20 | "67fefae4", 21 | "6ebe5176", 22 | "ca8721bd", 23 | "c40ecfa4", 24 | "706c6c06", 25 | "7342f74b", 26 | "1f4770e5", 27 | "dc6d6f1c" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "5544ad8f", 34 | "2a7816d0", 35 | "889c6919", 36 | "cd5858c6", 37 | "487c5dfd", 38 | "748ffe75", 39 | "d46b78ac", 40 | "2c498dfb", 41 | "a92f301a", 42 | "70db662a", 43 | "67fefae4", 44 | "6ebe5176", 45 | "ca8721bd", 46 | "c40ecfa4", 47 | "706c6c06", 48 | "7342f74b", 49 | "1f4770e5", 50 | "dc6d6f1c" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "b2fd6847" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "321d563c", 11 | "7174ec19", 12 | "2a7816d0", 13 | "8cb8b8df", 14 | "f028028d", 15 | "dc2dc65d", 16 | "eea083fa", 17 | "3e0714dd", 18 | "86822c1d", 19 | "9e786467", 20 | "9031225", 21 | "9b5019f0", 22 | "2ea79bbe", 23 | "23a510cf", 24 | "23970dcc", 25 | "1f4770e5", 26 | "373cd902" 27 | ] 28 | }, 29 | "targets": { 30 | "zh-CN": [ 31 | "77da26a5", 32 | "321d563c", 33 | "7174ec19", 34 | "2a7816d0", 35 | "8cb8b8df", 36 | "f028028d", 37 | "dc2dc65d", 38 | "eea083fa", 39 | "3e0714dd", 40 | "86822c1d", 41 | "9e786467", 42 | "9031225", 43 | "9b5019f0", 44 | "2ea79bbe", 45 | "23a510cf", 46 | "23970dcc", 47 | "1f4770e5", 48 | "373cd902" 49 | ] 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "46266351" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "4eab0c12", 11 | "cb5c44ad", 12 | "2a7816d0", 13 | "236d8040", 14 | "67a21e91", 15 | "c141c5d", 16 | "eea083fa", 17 | "cb5c44ad", 18 | "1e359897", 19 | "b19fcba1", 20 | "8a97ac33", 21 | "1529ceee", 22 | "59b2ab0e", 23 | "13769acd", 24 | "4ab2c29f", 25 | "2af178e4", 26 | "1f4770e5", 27 | "36259355" 28 | ] 29 | }, 30 | "targets": { 31 | "zh-CN": [ 32 | "77da26a5", 33 | "4eab0c12", 34 | "cb5c44ad", 35 | "2a7816d0", 36 | "236d8040", 37 | "67a21e91", 38 | "c141c5d", 39 | "eea083fa", 40 | "cb5c44ad", 41 | "1e359897", 42 | "b19fcba1", 43 | "8a97ac33", 44 | "1529ceee", 45 | "59b2ab0e", 46 | "13769acd", 47 | "4ab2c29f", 48 | "2af178e4", 49 | "1f4770e5", 50 | "36259355" 51 | ] 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /questions/explain-the-composition-pattern-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "29cbb0d2" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "68db0f6f", 11 | "70512550", 12 | "2a7816d0", 13 | "53a643ed", 14 | "da9629f7", 15 | "f5a438e3", 16 | "7fa2d952", 17 | "59f30a47", 18 | "7b1deb12", 19 | "5d73d3", 20 | "42239dd9", 21 | "e566d65d", 22 | "9e8f9bed", 23 | "1a1967fd", 24 | "b201bd43", 25 | "fb38abd3", 26 | "4352471d", 27 | "1f4770e5", 28 | "35076104" 29 | ] 30 | }, 31 | "targets": { 32 | "zh-CN": [ 33 | "77da26a5", 34 | "68db0f6f", 35 | "70512550", 36 | "2a7816d0", 37 | "53a643ed", 38 | "da9629f7", 39 | "f5a438e3", 40 | "7fa2d952", 41 | "59f30a47", 42 | "7b1deb12", 43 | "5d73d3", 44 | "42239dd9", 45 | "e566d65d", 46 | "9e8f9bed", 47 | "1a1967fd", 48 | "b201bd43", 49 | "fb38abd3", 50 | "4352471d", 51 | "1f4770e5", 52 | "35076104" 53 | ] 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /questions/what-is-code-splitting-in-a-react-application/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "376f98fc" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "ed877c7c", 11 | "ac539b00", 12 | "2a7816d0", 13 | "bae1524", 14 | "83283a80", 15 | "df1bb8b5", 16 | "b9b23f65", 17 | "ba1d6dd2", 18 | "9faa97a2", 19 | "5a26f06e", 20 | "6cde9269", 21 | "83cf918c", 22 | "37977ef", 23 | "e739fb0a", 24 | "dda280ab", 25 | "351414c8", 26 | "a76f6320", 27 | "1f4770e5", 28 | "d8aa5534" 29 | ] 30 | }, 31 | "targets": { 32 | "zh-CN": [ 33 | "77da26a5", 34 | "ed877c7c", 35 | "ac539b00", 36 | "2a7816d0", 37 | "bae1524", 38 | "83283a80", 39 | "df1bb8b5", 40 | "b9b23f65", 41 | "ba1d6dd2", 42 | "9faa97a2", 43 | "5a26f06e", 44 | "6cde9269", 45 | "83cf918c", 46 | "37977ef", 47 | "e739fb0a", 48 | "dda280ab", 49 | "351414c8", 50 | "a76f6320", 51 | "1f4770e5", 52 | "d8aa5534" 53 | ] 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /questions/what-are-render-props-in-react-and-what-are-they-for/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "d75c0577" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "e8c61628", 11 | "2f6596c9", 12 | "2a7816d0", 13 | "3c2c8638", 14 | "25841bc3", 15 | "262197fc", 16 | "852a6583", 17 | "c62218a4", 18 | "5a5fd5cb", 19 | "4e8ede6c", 20 | "ace9d2e1", 21 | "9b5019f0", 22 | "7fefc5d8", 23 | "283d5b2f", 24 | "395f8bf1", 25 | "2819c383", 26 | "b3764a6c", 27 | "1f4770e5", 28 | "597b122f" 29 | ] 30 | }, 31 | "targets": { 32 | "zh-CN": [ 33 | "77da26a5", 34 | "e8c61628", 35 | "2f6596c9", 36 | "2a7816d0", 37 | "3c2c8638", 38 | "25841bc3", 39 | "262197fc", 40 | "852a6583", 41 | "c62218a4", 42 | "5a5fd5cb", 43 | "4e8ede6c", 44 | "ace9d2e1", 45 | "9b5019f0", 46 | "7fefc5d8", 47 | "283d5b2f", 48 | "395f8bf1", 49 | "2819c383", 50 | "b3764a6c", 51 | "1f4770e5", 52 | "597b122f" 53 | ] 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "991928de" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "41868f26", 11 | "2a7816d0", 12 | "a8fea19e", 13 | "75a96b85", 14 | "ffbebcd0", 15 | "6bf6ed5b", 16 | "14cc7f39", 17 | "748ffe75", 18 | "7faaa789", 19 | "b99e9a39", 20 | "da5e9c4e", 21 | "6bf6ed5b", 22 | "1a3866ad", 23 | "748ffe75", 24 | "f600445", 25 | "2819c383", 26 | "11aa9a75", 27 | "1f4770e5", 28 | "4caa2581" 29 | ] 30 | }, 31 | "targets": { 32 | "zh-CN": [ 33 | "77da26a5", 34 | "41868f26", 35 | "2a7816d0", 36 | "a8fea19e", 37 | "75a96b85", 38 | "ffbebcd0", 39 | "6bf6ed5b", 40 | "14cc7f39", 41 | "748ffe75", 42 | "7faaa789", 43 | "b99e9a39", 44 | "da5e9c4e", 45 | "6bf6ed5b", 46 | "1a3866ad", 47 | "748ffe75", 48 | "f600445", 49 | "2819c383", 50 | "11aa9a75", 51 | "1f4770e5", 52 | "4caa2581" 53 | ] 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "881ca1be" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "b470c7e5", 11 | "e6409148", 12 | "2a7816d0", 13 | "c0577d0", 14 | "fc21e221", 15 | "b30e0c10", 16 | "16cac91a", 17 | "48145934", 18 | "3f6acdf2", 19 | "709d86f1", 20 | "37db7e81", 21 | "e50b6a62", 22 | "f337fed2", 23 | "8ced981", 24 | "b0115bf8", 25 | "2945cbb3", 26 | "25aeafcd", 27 | "1f4770e5", 28 | "80b0b37f" 29 | ] 30 | }, 31 | "targets": { 32 | "zh-CN": [ 33 | "77da26a5", 34 | "b470c7e5", 35 | "e6409148", 36 | "2a7816d0", 37 | "c0577d0", 38 | "fc21e221", 39 | "b30e0c10", 40 | "16cac91a", 41 | "48145934", 42 | "3f6acdf2", 43 | "709d86f1", 44 | "37db7e81", 45 | "e50b6a62", 46 | "f337fed2", 47 | "8ced981", 48 | "b0115bf8", 49 | "2945cbb3", 50 | "25aeafcd", 51 | "1f4770e5", 52 | "80b0b37f" 53 | ] 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /questions/what-does-re-rendering-mean-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "135f5269" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "1d4e45ef", 11 | "2a7816d0", 12 | "5f187ad8", 13 | "47e66d00", 14 | "f05cd80", 15 | "c91094f3", 16 | "b110cbae", 17 | "e394f752", 18 | "e629a8d9", 19 | "bd664992", 20 | "9b5019f0", 21 | "d95182d8", 22 | "62c52617", 23 | "670df17e", 24 | "3675e491", 25 | "c500fc82", 26 | "9d88969", 27 | "7646e3ce", 28 | "1f4770e5", 29 | "3c6d09b3" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "1d4e45ef", 36 | "2a7816d0", 37 | "5f187ad8", 38 | "47e66d00", 39 | "f05cd80", 40 | "c91094f3", 41 | "b110cbae", 42 | "e394f752", 43 | "e629a8d9", 44 | "bd664992", 45 | "9b5019f0", 46 | "d95182d8", 47 | "62c52617", 48 | "670df17e", 49 | "3675e491", 50 | "c500fc82", 51 | "9d88969", 52 | "7646e3ce", 53 | "1f4770e5", 54 | "3c6d09b3" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-is-forwardref-in-react-used-for/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "14f0637c" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "f005ab41", 11 | "8dde7c01", 12 | "2a7816d0", 13 | "93e000ed", 14 | "83283a80", 15 | "830b1b55", 16 | "e47d825", 17 | "8fe2e31b", 18 | "2f7df216", 19 | "143f45c6", 20 | "c554e7c5", 21 | "748ffe75", 22 | "5b86f2fd", 23 | "9f9e9fbe", 24 | "670df17e", 25 | "919e84c2", 26 | "3da76af2", 27 | "78365b8d", 28 | "1f4770e5", 29 | "d0643d37" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "f005ab41", 36 | "8dde7c01", 37 | "2a7816d0", 38 | "93e000ed", 39 | "83283a80", 40 | "830b1b55", 41 | "e47d825", 42 | "8fe2e31b", 43 | "2f7df216", 44 | "143f45c6", 45 | "c554e7c5", 46 | "748ffe75", 47 | "5b86f2fd", 48 | "9f9e9fbe", 49 | "670df17e", 50 | "919e84c2", 51 | "3da76af2", 52 | "78365b8d", 53 | "1f4770e5", 54 | "d0643d37" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-are-error-boundaries-in-react-for/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "339a56c6" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "4770976a", 11 | "2a7816d0", 12 | "b5e0f38a", 13 | "83283a80", 14 | "a4fc2d01", 15 | "826738fe", 16 | "81c423f4", 17 | "70b58868", 18 | "2c108148", 19 | "40f66da7", 20 | "4abfb705", 21 | "1a7866d1", 22 | "ea45e6ea", 23 | "5fedbc8e", 24 | "83b16d73", 25 | "cfb17e09", 26 | "3b882e5b", 27 | "5b143767", 28 | "1f4770e5", 29 | "34bdf19e" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "4770976a", 36 | "2a7816d0", 37 | "b5e0f38a", 38 | "83283a80", 39 | "a4fc2d01", 40 | "826738fe", 41 | "81c423f4", 42 | "70b58868", 43 | "2c108148", 44 | "40f66da7", 45 | "4abfb705", 46 | "1a7866d1", 47 | "ea45e6ea", 48 | "5fedbc8e", 49 | "83b16d73", 50 | "cfb17e09", 51 | "3b882e5b", 52 | "5b143767", 53 | "1f4770e5", 54 | "34bdf19e" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-is-react-describe-the-benefits-of-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "e59255f3" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "b4e26ad0", 11 | "861b27b9", 12 | "ee93075c", 13 | "2a7816d0", 14 | "fc564fd0", 15 | "80ed709b", 16 | "67ca0237", 17 | "a05a0d5", 18 | "7b0f69f1", 19 | "2a9bb992", 20 | "816351f7", 21 | "b5709a8f", 22 | "dfa0444d", 23 | "6218d568", 24 | "d2b4812d", 25 | "868f9ad", 26 | "787786ba", 27 | "cdc02c9", 28 | "1f4770e5", 29 | "dd5e4a01" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "b4e26ad0", 36 | "861b27b9", 37 | "ee93075c", 38 | "2a7816d0", 39 | "fc564fd0", 40 | "80ed709b", 41 | "67ca0237", 42 | "a05a0d5", 43 | "7b0f69f1", 44 | "2a9bb992", 45 | "816351f7", 46 | "b5709a8f", 47 | "dfa0444d", 48 | "6218d568", 49 | "d2b4812d", 50 | "868f9ad", 51 | "787786ba", 52 | "cdc02c9", 53 | "1f4770e5", 54 | "dd5e4a01" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/how-do-you-reset-a-components-state-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "738c44ca" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "e6520c6f", 11 | "df0a02de", 12 | "48d5ee42", 13 | "8d07a59b", 14 | "2a7816d0", 15 | "dc0ae19f", 16 | "46dcb5b2", 17 | "7c538db3", 18 | "748ffe75", 19 | "dcab6bcf", 20 | "879c865", 21 | "1f85a6d2", 22 | "748ffe75", 23 | "d0f47b39", 24 | "9fa54076", 25 | "ba92e928", 26 | "748ffe75", 27 | "a9d4bc55", 28 | "1f4770e5", 29 | "9b310d5c" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "e6520c6f", 36 | "df0a02de", 37 | "48d5ee42", 38 | "8d07a59b", 39 | "2a7816d0", 40 | "dc0ae19f", 41 | "46dcb5b2", 42 | "7c538db3", 43 | "748ffe75", 44 | "dcab6bcf", 45 | "879c865", 46 | "1f85a6d2", 47 | "748ffe75", 48 | "d0f47b39", 49 | "9fa54076", 50 | "ba92e928", 51 | "748ffe75", 52 | "a9d4bc55", 53 | "1f4770e5", 54 | "9b310d5c" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-are-the-benefits-of-using-hooks-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "25e4b0c8" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "e3fb8481", 11 | "2a7816d0", 12 | "2d5ea3ac", 13 | "c03b2e89", 14 | "c2da2016", 15 | "b2ddaf08", 16 | "449a157c", 17 | "96cb5355", 18 | "7fd9248", 19 | "26039123", 20 | "55a919a", 21 | "b34bf62d", 22 | "6895b306", 23 | "4bf1123f", 24 | "fd420608", 25 | "45e3d798", 26 | "5bc98c0b", 27 | "950368f4", 28 | "1f4770e5", 29 | "45ed957a" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "e3fb8481", 36 | "2a7816d0", 37 | "2d5ea3ac", 38 | "c03b2e89", 39 | "c2da2016", 40 | "b2ddaf08", 41 | "449a157c", 42 | "96cb5355", 43 | "7fd9248", 44 | "26039123", 45 | "55a919a", 46 | "b34bf62d", 47 | "6895b306", 48 | "4bf1123f", 49 | "fd420608", 50 | "45e3d798", 51 | "5bc98c0b", 52 | "950368f4", 53 | "1f4770e5", 54 | "45ed957a" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "f4b0277" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "c6fbfd6c", 11 | "f7434ccf", 12 | "2a7816d0", 13 | "72cfb6d8", 14 | "7f416508", 15 | "f91c2be4", 16 | "1d0b1259", 17 | "d2f3936b", 18 | "98866949", 19 | "f7434ccf", 20 | "31a10b33", 21 | "233f776f", 22 | "5e774e69", 23 | "98b862ac", 24 | "f5509c09", 25 | "a4881093", 26 | "3b882e5b", 27 | "80b8934c", 28 | "1f4770e5", 29 | "3a07aa36" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "c6fbfd6c", 36 | "f7434ccf", 37 | "2a7816d0", 38 | "72cfb6d8", 39 | "7f416508", 40 | "f91c2be4", 41 | "1d0b1259", 42 | "d2f3936b", 43 | "98866949", 44 | "f7434ccf", 45 | "31a10b33", 46 | "233f776f", 47 | "5e774e69", 48 | "98b862ac", 49 | "f5509c09", 50 | "a4881093", 51 | "3b882e5b", 52 | "80b8934c", 53 | "1f4770e5", 54 | "3a07aa36" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "6051d09b" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "4003af38", 11 | "2a7816d0", 12 | "e8d1c6df", 13 | "65cf75d5", 14 | "6fd70b78", 15 | "190f5e6b", 16 | "7e0be3a2", 17 | "1145ea69", 18 | "e9921cce", 19 | "1e891578", 20 | "4aaf49d2", 21 | "5246fe1f", 22 | "52980d6c", 23 | "651f8f17", 24 | "d63001b7", 25 | "7cfd4e62", 26 | "66449215", 27 | "167d9a8", 28 | "1f4770e5", 29 | "2dead1cf" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "4003af38", 36 | "2a7816d0", 37 | "e8d1c6df", 38 | "65cf75d5", 39 | "6fd70b78", 40 | "190f5e6b", 41 | "7e0be3a2", 42 | "1145ea69", 43 | "e9921cce", 44 | "1e891578", 45 | "4aaf49d2", 46 | "5246fe1f", 47 | "52980d6c", 48 | "651f8f17", 49 | "d63001b7", 50 | "7cfd4e62", 51 | "66449215", 52 | "167d9a8", 53 | "1f4770e5", 54 | "2dead1cf" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "2848ef1d" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "aa9d0800", 11 | "5bbeab9a", 12 | "83a1eb62", 13 | "2a7816d0", 14 | "145deb4a", 15 | "672d5abb", 16 | "e749e1f", 17 | "eea083fa", 18 | "77f286d2", 19 | "5bbeab9a", 20 | "119efa90", 21 | "858ba261", 22 | "e316f675", 23 | "19c254ba", 24 | "ab232b6e", 25 | "6af9d4fa", 26 | "a21db932", 27 | "872ec8e3", 28 | "1f4770e5", 29 | "2383221b" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "aa9d0800", 36 | "5bbeab9a", 37 | "83a1eb62", 38 | "2a7816d0", 39 | "145deb4a", 40 | "672d5abb", 41 | "e749e1f", 42 | "eea083fa", 43 | "77f286d2", 44 | "5bbeab9a", 45 | "119efa90", 46 | "858ba261", 47 | "e316f675", 48 | "19c254ba", 49 | "ab232b6e", 50 | "6af9d4fa", 51 | "a21db932", 52 | "872ec8e3", 53 | "1f4770e5", 54 | "2383221b" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "a9bfa8d7" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "14c4b903", 11 | "2a7816d0", 12 | "dd977c16", 13 | "a6ae6ec", 14 | "27c9b634", 15 | "748ffe75", 16 | "65bd08f3", 17 | "2d0a03d7", 18 | "4aeacce6", 19 | "748ffe75", 20 | "71817d6b", 21 | "67423e0a", 22 | "dbaa40b1", 23 | "e89f2d30", 24 | "14d2459a", 25 | "f31b09dc", 26 | "f47a7738", 27 | "5dead499", 28 | "1f4770e5", 29 | "2a8c879d" 30 | ] 31 | }, 32 | "targets": { 33 | "zh-CN": [ 34 | "77da26a5", 35 | "14c4b903", 36 | "2a7816d0", 37 | "dd977c16", 38 | "a6ae6ec", 39 | "27c9b634", 40 | "748ffe75", 41 | "65bd08f3", 42 | "2d0a03d7", 43 | "4aeacce6", 44 | "748ffe75", 45 | "71817d6b", 46 | "67423e0a", 47 | "dbaa40b1", 48 | "e89f2d30", 49 | "14d2459a", 50 | "f31b09dc", 51 | "f47a7738", 52 | "5dead499", 53 | "1f4770e5", 54 | "2a8c879d" 55 | ] 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /questions/how-do-you-test-react-applications/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "28bf6b28" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "683ef68e", 11 | "2a7816d0", 12 | "1fa12836", 13 | "7c737123", 14 | "8ebc5a02", 15 | "748ffe75", 16 | "c4c911e", 17 | "ca7a8d03", 18 | "bc4a7117", 19 | "748ffe75", 20 | "1fa4fd4f", 21 | "3d29713c", 22 | "fbeb2223", 23 | "748ffe75", 24 | "599f6f2f", 25 | "d0b33059", 26 | "7f80f688", 27 | "748ffe75", 28 | "6b7c1b3e", 29 | "1f4770e5", 30 | "bca7d982" 31 | ] 32 | }, 33 | "targets": { 34 | "zh-CN": [ 35 | "77da26a5", 36 | "683ef68e", 37 | "2a7816d0", 38 | "1fa12836", 39 | "7c737123", 40 | "8ebc5a02", 41 | "748ffe75", 42 | "c4c911e", 43 | "ca7a8d03", 44 | "bc4a7117", 45 | "748ffe75", 46 | "1fa4fd4f", 47 | "3d29713c", 48 | "fbeb2223", 49 | "748ffe75", 50 | "599f6f2f", 51 | "d0b33059", 52 | "7f80f688", 53 | "748ffe75", 54 | "6b7c1b3e", 55 | "1f4770e5", 56 | "bca7d982" 57 | ] 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /questions/what-are-higher-order-components-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "dc83adae" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "b8e2b85d", 11 | "2e8bb27d", 12 | "2a7816d0", 13 | "48765d3d", 14 | "25841bc3", 15 | "2f8f66d7", 16 | "852a6583", 17 | "2ca50239", 18 | "3cfb08e5", 19 | "9b5019f0", 20 | "3aae1835", 21 | "a5e18a42", 22 | "d8025fc4", 23 | "9912c3a1", 24 | "e0153075", 25 | "3b882e5b", 26 | "aa2d6949", 27 | "14eca64f", 28 | "9969d9da", 29 | "1f4770e5", 30 | "d3b230ef" 31 | ] 32 | }, 33 | "targets": { 34 | "zh-CN": [ 35 | "77da26a5", 36 | "b8e2b85d", 37 | "2e8bb27d", 38 | "2a7816d0", 39 | "48765d3d", 40 | "25841bc3", 41 | "2f8f66d7", 42 | "852a6583", 43 | "2ca50239", 44 | "3cfb08e5", 45 | "9b5019f0", 46 | "3aae1835", 47 | "a5e18a42", 48 | "d8025fc4", 49 | "9912c3a1", 50 | "e0153075", 51 | "3b882e5b", 52 | "aa2d6949", 53 | "14eca64f", 54 | "9969d9da", 55 | "1f4770e5", 56 | "d3b230ef" 57 | ] 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-state-and-props-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "a2e309f6" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "bfcc6263", 11 | "2a7816d0", 12 | "c64b8fe5", 13 | "3a89f1f3", 14 | "b75b4336", 15 | "eba7f88c", 16 | "78384cad", 17 | "232c22ff", 18 | "fcd53b04", 19 | "721b4c55", 20 | "5002c978", 21 | "15dbbe0e", 22 | "574e1196", 23 | "ab6406bb", 24 | "57bb0deb", 25 | "d38fbc9f", 26 | "77e9bd2", 27 | "67423e0a", 28 | "724592dc", 29 | "1f4770e5", 30 | "59901556" 31 | ] 32 | }, 33 | "targets": { 34 | "zh-CN": [ 35 | "77da26a5", 36 | "bfcc6263", 37 | "2a7816d0", 38 | "c64b8fe5", 39 | "3a89f1f3", 40 | "b75b4336", 41 | "eba7f88c", 42 | "78384cad", 43 | "232c22ff", 44 | "fcd53b04", 45 | "721b4c55", 46 | "5002c978", 47 | "15dbbe0e", 48 | "574e1196", 49 | "ab6406bb", 50 | "57bb0deb", 51 | "d38fbc9f", 52 | "77e9bd2", 53 | "67423e0a", 54 | "724592dc", 55 | "1f4770e5", 56 | "59901556" 57 | ] 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "fd87a65f" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "3f062a33", 11 | "b10ffe95", 12 | "2a7816d0", 13 | "30bbd593", 14 | "220f5e6d", 15 | "21b7502a", 16 | "eea083fa", 17 | "eb89d2b3", 18 | "b10ffe95", 19 | "60132214", 20 | "29193748", 21 | "d34e9197", 22 | "7e34dff6", 23 | "29a37296", 24 | "e16a821b", 25 | "7f517bbe", 26 | "244c6bca", 27 | "4ab2c29f", 28 | "ec2dc26b", 29 | "1f4770e5", 30 | "ac742655" 31 | ] 32 | }, 33 | "targets": { 34 | "zh-CN": [ 35 | "77da26a5", 36 | "3f062a33", 37 | "b10ffe95", 38 | "2a7816d0", 39 | "30bbd593", 40 | "220f5e6d", 41 | "21b7502a", 42 | "eea083fa", 43 | "eb89d2b3", 44 | "b10ffe95", 45 | "60132214", 46 | "29193748", 47 | "d34e9197", 48 | "7e34dff6", 49 | "29a37296", 50 | "e16a821b", 51 | "7f517bbe", 52 | "244c6bca", 53 | "4ab2c29f", 54 | "ec2dc26b", 55 | "1f4770e5", 56 | "ac742655" 57 | ] 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "37afa3e3" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "6a72a7b0", 11 | "2a7816d0", 12 | "efa46a08", 13 | "25841bc3", 14 | "66abf5fd", 15 | "4e8ede6c", 16 | "43069d97", 17 | "4ef53dec", 18 | "e6f2ba5a", 19 | "80a31f50", 20 | "474b69f9", 21 | "4ebf4dcc", 22 | "ced6ae25", 23 | "26104a22", 24 | "45bdfffe", 25 | "71c88e09", 26 | "264e4c2c", 27 | "4fddd280", 28 | "7e9fbf0a", 29 | "1f4770e5", 30 | "a7a5cfdf" 31 | ] 32 | }, 33 | "targets": { 34 | "zh-CN": [ 35 | "77da26a5", 36 | "6a72a7b0", 37 | "2a7816d0", 38 | "efa46a08", 39 | "25841bc3", 40 | "66abf5fd", 41 | "4e8ede6c", 42 | "43069d97", 43 | "4ef53dec", 44 | "e6f2ba5a", 45 | "80a31f50", 46 | "474b69f9", 47 | "4ebf4dcc", 48 | "ced6ae25", 49 | "26104a22", 50 | "45bdfffe", 51 | "71c88e09", 52 | "264e4c2c", 53 | "4fddd280", 54 | "7e9fbf0a", 55 | "1f4770e5", 56 | "a7a5cfdf" 57 | ] 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /questions/what-are-react-portals-used-for/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "db50555c" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "34d72af8", 11 | "2a7816d0", 12 | "10faed59", 13 | "83283a80", 14 | "6de639f4", 15 | "6dd3b324", 16 | "57777aa2", 17 | "5b45d0e9", 18 | "a6674be9", 19 | "ef6c8f0a", 20 | "4fe146f2", 21 | "1d7120f1", 22 | "4db551a7", 23 | "a883cfb4", 24 | "34a0cd30", 25 | "d2fa5dbf", 26 | "7a8194ce", 27 | "560adfa9", 28 | "2819c383", 29 | "a6f17ea9", 30 | "1f4770e5", 31 | "6637c03a" 32 | ] 33 | }, 34 | "targets": { 35 | "zh-CN": [ 36 | "77da26a5", 37 | "34d72af8", 38 | "2a7816d0", 39 | "10faed59", 40 | "83283a80", 41 | "6de639f4", 42 | "6dd3b324", 43 | "57777aa2", 44 | "5b45d0e9", 45 | "a6674be9", 46 | "ef6c8f0a", 47 | "4fe146f2", 48 | "1d7120f1", 49 | "4db551a7", 50 | "a883cfb4", 51 | "34a0cd30", 52 | "d2fa5dbf", 53 | "7a8194ce", 54 | "560adfa9", 55 | "2819c383", 56 | "a6f17ea9", 57 | "1f4770e5", 58 | "6637c03a" 59 | ] 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "17b3b8ce" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "2d11528a", 11 | "2a7816d0", 12 | "669c4f4e", 13 | "4fff29f", 14 | "f58033a", 15 | "db71e64", 16 | "36b185d3", 17 | "10cb0bd1", 18 | "905cf287", 19 | "8673c68", 20 | "357266f3", 21 | "65de325c", 22 | "3808017f", 23 | "4351478", 24 | "f9fe0b22", 25 | "dc4b812c", 26 | "74adc395", 27 | "eacab160", 28 | "8cc0201c", 29 | "6e0b9e77", 30 | "1f4770e5", 31 | "92d795c7" 32 | ] 33 | }, 34 | "targets": { 35 | "zh-CN": [ 36 | "77da26a5", 37 | "2d11528a", 38 | "2a7816d0", 39 | "669c4f4e", 40 | "4fff29f", 41 | "f58033a", 42 | "db71e64", 43 | "36b185d3", 44 | "10cb0bd1", 45 | "905cf287", 46 | "8673c68", 47 | "357266f3", 48 | "65de325c", 49 | "3808017f", 50 | "4351478", 51 | "f9fe0b22", 52 | "dc4b812c", 53 | "74adc395", 54 | "eacab160", 55 | "8cc0201c", 56 | "6e0b9e77", 57 | "1f4770e5", 58 | "92d795c7" 59 | ] 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "406130b7" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "1c475dbb", 11 | "2a7816d0", 12 | "adf819a8", 13 | "1fdd52c4", 14 | "b6180576", 15 | "415d9baa", 16 | "e76737be", 17 | "1a49e04b", 18 | "76ba3fe1", 19 | "af1f937", 20 | "e43f1483", 21 | "ce619ae4", 22 | "262fc2d", 23 | "75d28be1", 24 | "29c01477", 25 | "151b2625", 26 | "4ef53dec", 27 | "1c87a8f8", 28 | "455929ce", 29 | "f5a508dd", 30 | "1f4770e5", 31 | "51b6137a" 32 | ] 33 | }, 34 | "targets": { 35 | "zh-CN": [ 36 | "77da26a5", 37 | "1c475dbb", 38 | "2a7816d0", 39 | "adf819a8", 40 | "1fdd52c4", 41 | "b6180576", 42 | "415d9baa", 43 | "e76737be", 44 | "1a49e04b", 45 | "76ba3fe1", 46 | "af1f937", 47 | "e43f1483", 48 | "ce619ae4", 49 | "262fc2d", 50 | "75d28be1", 51 | "29c01477", 52 | "151b2625", 53 | "4ef53dec", 54 | "1c87a8f8", 55 | "455929ce", 56 | "f5a508dd", 57 | "1f4770e5", 58 | "51b6137a" 59 | ] 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /questions/why-does-react-recommend-against-mutating-state/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 为什么 React 建议不要修改状态？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 建议不要修改状态，因为它可能导致意外行为和错误。React 依赖于状态不变性来有效地确定何时重新渲染组件。当状态被直接修改时，React 可能无法检测到更改，从而导致过时或不正确的 UI 更新。相反，请始终使用 `setState` 或 `useState` 钩子等方法创建一个新的状态对象。 8 | 9 | *** 10 | 11 | ## 为什么 React 建议不要修改状态？ 12 | 13 | ### React 的渲染机制 14 | 15 | React 使用虚拟 DOM 来优化渲染。当状态改变时，React 将新的虚拟 DOM 与之前的虚拟 DOM 进行比较，以确定更新实际 DOM 所需的最小更改集。此过程称为协调。 16 | 17 | ### 不变性和状态比较 18 | 19 | React 依赖于不变性来有效地检测更改。当状态是不可变的，React 可以通过比较引用来快速确定组件是否需要重新渲染。如果引用不同，React 知道状态已更改。 20 | 21 | ### 修改状态的问题 22 | 23 | 1. **过时的 UI 更新**：直接修改状态可能导致 React 无法检测到更改，从而导致 UI 未按预期更新。 24 | 2. **调试困难**：直接修改状态会使跟踪状态更改和调试问题变得更加困难。 25 | 3. **意外行为**：修改状态可能导致不可预测的行为，尤其是在多个组件依赖于同一状态时。 26 | 27 | ### 如何正确更新状态 28 | 29 | 不要直接修改状态，而是始终创建一个新的状态对象。例如，当使用 `useState` 钩子时： 30 | 31 | ```javascript 32 | const [state, setState] = useState(initialState); 33 | 34 | // 错误：直接修改状态 35 | state.value = newValue; 36 | 37 | // 正确：创建一个新的状态对象 38 | setState({ ...state, value: newValue }); 39 | ``` 40 | 41 | 当使用类组件和 `setState` 时： 42 | 43 | ```javascript 44 | this.setState((prevState) => ({ 45 | ...prevState, 46 | value: newValue, 47 | })); 48 | ``` 49 | 50 | ## 延伸阅读 51 | 52 | * [React documentation on state](https://react.dev/learn/state-a-components-memory) 53 | * [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) 54 | * [Why not to mutate state in React](https://daveceddia.com/why-not-modify-react-state-directly/) 55 | -------------------------------------------------------------------------------- /questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "3a2c89da" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "3459d0d8", 11 | "2a7816d0", 12 | "3b749c9f", 13 | "3192d2e1", 14 | "b1902634", 15 | "eb315a7b", 16 | "1bdd205f", 17 | "748ffe75", 18 | "62c52617", 19 | "4f8986d7", 20 | "41a97c7b", 21 | "b066fc58", 22 | "53b97fdb", 23 | "748ffe75", 24 | "91016b4b", 25 | "8a9ad5e5", 26 | "3fd22f1d", 27 | "7c33f40a", 28 | "996a41e2", 29 | "e2b36f0b", 30 | "8d62a5c5", 31 | "1f4770e5", 32 | "42c2150d" 33 | ] 34 | }, 35 | "targets": { 36 | "zh-CN": [ 37 | "77da26a5", 38 | "3459d0d8", 39 | "2a7816d0", 40 | "3b749c9f", 41 | "3192d2e1", 42 | "b1902634", 43 | "eb315a7b", 44 | "1bdd205f", 45 | "748ffe75", 46 | "62c52617", 47 | "4f8986d7", 48 | "41a97c7b", 49 | "b066fc58", 50 | "53b97fdb", 51 | "748ffe75", 52 | "91016b4b", 53 | "8a9ad5e5", 54 | "3fd22f1d", 55 | "7c33f40a", 56 | "996a41e2", 57 | "e2b36f0b", 58 | "8d62a5c5", 59 | "1f4770e5", 60 | "42c2150d" 61 | ] 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /questions/what-are-some-react-anti-patterns/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "f887e833" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "3276d39", 11 | "4efde3fa", 12 | "2a7816d0", 13 | "9dd07882", 14 | "208b46a6", 15 | "6836d054", 16 | "26021bc8", 17 | "a5d10b50", 18 | "6cc42412", 19 | "a85eae6e", 20 | "2979e59e", 21 | "844a4a17", 22 | "825a913", 23 | "ae5d2e7f", 24 | "624979e4", 25 | "56ac0442", 26 | "8067c72", 27 | "d4009f5", 28 | "958cf747", 29 | "932bf6f2", 30 | "4d6a678e", 31 | "981c9c8c", 32 | "1f4770e5", 33 | "62d5eaf3" 34 | ] 35 | }, 36 | "targets": { 37 | "zh-CN": [ 38 | "77da26a5", 39 | "3276d39", 40 | "4efde3fa", 41 | "2a7816d0", 42 | "9dd07882", 43 | "208b46a6", 44 | "6836d054", 45 | "26021bc8", 46 | "a5d10b50", 47 | "6cc42412", 48 | "a85eae6e", 49 | "2979e59e", 50 | "844a4a17", 51 | "825a913", 52 | "ae5d2e7f", 53 | "624979e4", 54 | "56ac0442", 55 | "8067c72", 56 | "d4009f5", 57 | "958cf747", 58 | "932bf6f2", 59 | "4d6a678e", 60 | "981c9c8c", 61 | "1f4770e5", 62 | "62d5eaf3" 63 | ] 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /questions/how-do-you-debug-react-applications/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "b02467cf" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "48511126", 11 | "2a7816d0", 12 | "10a2ab60", 13 | "aecb7a44", 14 | "ffc2648", 15 | "2a5e2351", 16 | "aa5da455", 17 | "fb8d1004", 18 | "61a47d53", 19 | "d179df37", 20 | "71186e16", 21 | "d43999e0", 22 | "d70f5918", 23 | "5ea0fbf", 24 | "1741360c", 25 | "4383249f", 26 | "824424e3", 27 | "4e6feb2c", 28 | "b7ef1382", 29 | "43dc61db", 30 | "29b74665", 31 | "6663cd19", 32 | "1f4770e5", 33 | "1c865358" 34 | ] 35 | }, 36 | "targets": { 37 | "zh-CN": [ 38 | "77da26a5", 39 | "48511126", 40 | "2a7816d0", 41 | "10a2ab60", 42 | "aecb7a44", 43 | "ffc2648", 44 | "2a5e2351", 45 | "aa5da455", 46 | "fb8d1004", 47 | "61a47d53", 48 | "d179df37", 49 | "71186e16", 50 | "d43999e0", 51 | "d70f5918", 52 | "5ea0fbf", 53 | "1741360c", 54 | "4383249f", 55 | "824424e3", 56 | "4e6feb2c", 57 | "b7ef1382", 58 | "43dc61db", 59 | "29b74665", 60 | "6663cd19", 61 | "1f4770e5", 62 | "1c865358" 63 | ] 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "f217f37" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "66ae3b53", 11 | "11431816", 12 | "2a7816d0", 13 | "addb65f5", 14 | "8774649e", 15 | "e2348f37", 16 | "e17f53cf", 17 | "f12ca507", 18 | "5beca282", 19 | "e76b9a8", 20 | "11431816", 21 | "232627bf", 22 | "46dfdc0", 23 | "c6d72b23", 24 | "e76b9a8", 25 | "c24e839d", 26 | "9c67f48", 27 | "a95809e4", 28 | "d5dac2", 29 | "e76b9a8", 30 | "a675fc16", 31 | "87e73480", 32 | "1f4770e5", 33 | "31d6aeb9" 34 | ] 35 | }, 36 | "targets": { 37 | "zh-CN": [ 38 | "77da26a5", 39 | "66ae3b53", 40 | "11431816", 41 | "2a7816d0", 42 | "addb65f5", 43 | "8774649e", 44 | "e2348f37", 45 | "e17f53cf", 46 | "f12ca507", 47 | "5beca282", 48 | "e76b9a8", 49 | "11431816", 50 | "232627bf", 51 | "46dfdc0", 52 | "c6d72b23", 53 | "e76b9a8", 54 | "c24e839d", 55 | "9c67f48", 56 | "a95809e4", 57 | "d5dac2", 58 | "e76b9a8", 59 | "a675fc16", 60 | "87e73480", 61 | "1f4770e5", 62 | "31d6aeb9" 63 | ] 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "f993a423" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "38030f67", 11 | "2a7816d0", 12 | "f1c83909", 13 | "3bd3660a", 14 | "ac0e5035", 15 | "46caa831", 16 | "fe2415aa", 17 | "4ef53dec", 18 | "3d21b886", 19 | "80e2f77a", 20 | "9d82f0c5", 21 | "a1c5ce2c", 22 | "7fa677f5", 23 | "407204b4", 24 | "16705b6a", 25 | "a086cf3a", 26 | "ec8042bf", 27 | "88b7708b", 28 | "d8618f31", 29 | "90fc0672", 30 | "cd8ca69a", 31 | "c1949f5c", 32 | "1f4770e5", 33 | "bed3c648" 34 | ] 35 | }, 36 | "targets": { 37 | "zh-CN": [ 38 | "77da26a5", 39 | "38030f67", 40 | "2a7816d0", 41 | "f1c83909", 42 | "3bd3660a", 43 | "ac0e5035", 44 | "46caa831", 45 | "fe2415aa", 46 | "4ef53dec", 47 | "3d21b886", 48 | "80e2f77a", 49 | "9d82f0c5", 50 | "a1c5ce2c", 51 | "7fa677f5", 52 | "407204b4", 53 | "16705b6a", 54 | "a086cf3a", 55 | "ec8042bf", 56 | "88b7708b", 57 | "d8618f31", 58 | "90fc0672", 59 | "cd8ca69a", 60 | "c1949f5c", 61 | "1f4770e5", 62 | "bed3c648" 63 | ] 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /questions/what-is-virtual-dom-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的虚拟 DOM 是什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的虚拟 DOM 是实际 DOM 的轻量级副本。它允许 React 通过比较虚拟 DOM 和真实 DOM 并仅进行必要的更改来有效地更新 UI。此过程称为协调。通过使用虚拟 DOM，React 最小化了对真实 DOM 的直接操作，这可能很慢且效率低下。 8 | 9 | *** 10 | 11 | ## React 中的虚拟 DOM 是什么？ 12 | 13 | ### 简介 14 | 15 | 虚拟 DOM 是 React 等库实现的一个概念，用于提高 Web 应用程序的性能。它是一个编程概念，其中 UI 的虚拟表示保存在内存中，并通过 ReactDOM 等库与真实 DOM 同步。 16 | 17 | ### 工作原理 18 | 19 | 1. **初始渲染**：首次渲染 React 组件时，会创建一个虚拟 DOM 树。此树是实际 DOM 的轻量级副本。 20 | 2. **更新状态**：当组件的状态发生变化时，会创建一个新的虚拟 DOM 树。然后，React 将此新树与前一个树进行比较。 21 | 3. **差异算法**：React 使用差异算法来查找新虚拟 DOM 树与前一个树之间的差异。此过程称为协调。 22 | 4. **更新真实 DOM**：在确定差异后，React 仅更新已更改的真实 DOM 部分，而不是重新渲染整个 UI。 23 | 24 | ### 优点 25 | 26 | * **性能**：通过最大限度地减少对真实 DOM 的直接操作，React 可以更有效地更新 UI。 27 | * **抽象**：开发人员可以编写代码，而无需担心直接 DOM 操作的性能影响。 28 | * **可预测性**：虚拟 DOM 提供了一种可预测的方式来更新 UI，从而更容易推断应用程序的状态。 29 | 30 | ### 示例 31 | 32 | 这是一个简单的例子，说明虚拟 DOM 在 React 中的工作方式： 33 | 34 | ```jsx 35 | import React, { useState } from 'react'; 36 | 37 | function Counter() { 38 | const [count, setCount] = useState(0); 39 | 40 | return ( 41 |
42 |

You clicked {count} times

43 | 44 |
45 | ); 46 | } 47 | 48 | export default Counter; 49 | ``` 50 | 51 | 在此示例中，当单击按钮时，状态 `count` 会更新。React 创建一个新的虚拟 DOM 树，将其与前一个树进行比较，并仅更新真实 DOM 中 `

` 标签内的文本。 52 | 53 | ## 延伸阅读 54 | 55 | * [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) 56 | * [Understanding the virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) 57 | -------------------------------------------------------------------------------- /questions/what-are-the-benefits-of-using-hooks-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 React Hooks 有什么好处？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 Hooks 允许您使用状态和其他 React 功能，而无需编写类。它们使在组件之间重用有状态逻辑、提高代码可读性以及通过减少对生命周期方法的需求来简化代码库变得更容易。像 `useState` 和 `useEffect` 这样的 Hooks 通常用于管理函数组件中的状态和副作用。 8 | 9 | *** 10 | 11 | ## 使用 React Hooks 的好处 12 | 13 | ### 简化的状态管理 14 | 15 | 像 `useState` 这样的 Hooks 允许您将状态添加到函数组件，而无需将它们转换为类组件。这使得代码更简洁，更易于阅读。 16 | 17 | ```javascript 18 | const [count, setCount] = useState(0); 19 | ``` 20 | 21 | ### 提高代码可读性 22 | 23 | Hooks 有助于将复杂的组件分解成更小、可重用的逻辑片段。这使得代码更模块化，更容易理解。 24 | 25 | ### 可重用逻辑 26 | 27 | 自定义 Hook 允许您跨多个组件提取和重用有状态逻辑。这促进了代码重用并减少了重复。 28 | 29 | ```javascript 30 | function useCustomHook() { 31 | const [state, setState] = useState(initialState); 32 | // Custom logic here 33 | return [state, setState]; 34 | } 35 | ``` 36 | 37 | ### 减少对生命周期方法的需求 38 | 39 | 像 `useEffect` 这样的 Hooks 可以替换生命周期方法，例如 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount`。这简化了组件生命周期管理。 40 | 41 | ```javascript 42 | useEffect(() => { 43 | // Side effect logic here 44 | return () => { 45 | // Cleanup logic here 46 | }; 47 | }, [dependencies]); 48 | ``` 49 | 50 | ### 更好地关注分离 51 | 52 | Hooks 允许您通过将相关逻辑分组在一起来分离关注点。这使得代码库更易于维护和调试。 53 | 54 | ### 增强测试 55 | 56 | 与类组件相比，具有 Hooks 的函数组件通常更容易测试。Hooks 可以在隔离状态下进行测试，使单元测试更简单。 57 | 58 | ## 延伸阅读 59 | 60 | * [React Hooks documentation](https://react.dev/reference/react/hooks) 61 | * [Using the State Hook](https://react.dev/reference/react/useState) 62 | * [Using the Effect Hook](https://react.dev/reference/react/useEffect) 63 | * [Building Your Own Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) 64 | -------------------------------------------------------------------------------- /questions/what-is-jsx-and-how-does-it-work/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "74c167d0" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "4feb162b", 11 | "2a7816d0", 12 | "73f27953", 13 | "93433116", 14 | "9cb86c06", 15 | "21a03354", 16 | "b30ac0da", 17 | "af9b160d", 18 | "5d6a4f5d", 19 | "60e224d5", 20 | "dc52ddd6", 21 | "2868c456", 22 | "60e224d5", 23 | "37ccfa69", 24 | "a1588ad3", 25 | "321f112a", 26 | "a213cc6", 27 | "ba340e2e", 28 | "8fb787bf", 29 | "775b4925", 30 | "1af3a690", 31 | "5bd206ec", 32 | "c429a6f7", 33 | "3c1edc1b", 34 | "ad3f37e3", 35 | "1f4770e5", 36 | "4e74bc0b" 37 | ] 38 | }, 39 | "targets": { 40 | "zh-CN": [ 41 | "77da26a5", 42 | "4feb162b", 43 | "2a7816d0", 44 | "73f27953", 45 | "93433116", 46 | "9cb86c06", 47 | "21a03354", 48 | "b30ac0da", 49 | "af9b160d", 50 | "5d6a4f5d", 51 | "60e224d5", 52 | "dc52ddd6", 53 | "2868c456", 54 | "60e224d5", 55 | "37ccfa69", 56 | "a1588ad3", 57 | "321f112a", 58 | "a213cc6", 59 | "ba340e2e", 60 | "8fb787bf", 61 | "775b4925", 62 | "1af3a690", 63 | "5bd206ec", 64 | "c429a6f7", 65 | "3c1edc1b", 66 | "ad3f37e3", 67 | "1f4770e5", 68 | "4e74bc0b" 69 | ] 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /questions/how-do-you-localize-react-applications/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "763df569" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "cf2aeb7b", 11 | "e7faef16", 12 | "2a7816d0", 13 | "8e19662e", 14 | "80edddd7", 15 | "b907f324", 16 | "d3e377dc", 17 | "7d98059b", 18 | "59e69ea8", 19 | "551a43b5", 20 | "3992aeb2", 21 | "40eec61d", 22 | "3b1131fc", 23 | "11996fcc", 24 | "dc2238a4", 25 | "cf7e94e0", 26 | "3cd18c66", 27 | "ff1a0479", 28 | "92b23dcb", 29 | "4e2ccbb5", 30 | "8c82b301", 31 | "31708a98", 32 | "2349edde", 33 | "71fa4ac0", 34 | "d47937eb", 35 | "1f4770e5", 36 | "e22842f9" 37 | ] 38 | }, 39 | "targets": { 40 | "zh-CN": [ 41 | "77da26a5", 42 | "cf2aeb7b", 43 | "e7faef16", 44 | "2a7816d0", 45 | "8e19662e", 46 | "80edddd7", 47 | "b907f324", 48 | "d3e377dc", 49 | "7d98059b", 50 | "59e69ea8", 51 | "551a43b5", 52 | "3992aeb2", 53 | "40eec61d", 54 | "3b1131fc", 55 | "11996fcc", 56 | "dc2238a4", 57 | "cf7e94e0", 58 | "3cd18c66", 59 | "ff1a0479", 60 | "92b23dcb", 61 | "4e2ccbb5", 62 | "8c82b301", 63 | "31708a98", 64 | "2349edde", 65 | "71fa4ac0", 66 | "d47937eb", 67 | "1f4770e5", 68 | "e22842f9" 69 | ] 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /questions/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 什么是 React 严格模式以及它有什么好处？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 严格模式是一个开发工具，可帮助识别应用程序中的潜在问题。它为其后代激活额外的检查和警告。它不呈现任何可见的 UI，也不会影响生产构建。其好处包括识别不安全的生命周期方法、警告旧的字符串 ref API 的使用、检测意外的副作用以及确保组件能够适应未来的变化。 8 | 9 | *** 10 | 11 | ## 什么是 React 严格模式以及它有什么好处？ 12 | 13 | ### 什么是 React 严格模式？ 14 | 15 | React 严格模式是 React 中的一个功能，可帮助开发人员识别其应用程序中的潜在问题。它是一个包装组件，您可以使用它来包装应用程序的某些部分以启用额外的检查和警告。它不呈现任何可见的 UI，也不会影响生产构建。 16 | 17 | 要使用 React 严格模式，您可以使用 `StrictMode` 组件包装您的组件树： 18 | 19 | ```jsx 20 | import React from 'react'; 21 | import ReactDOM from 'react-dom'; 22 | 23 | ReactDOM.render( 24 | 25 | 26 | , 27 | document.getElementById('root'), 28 | ); 29 | ``` 30 | 31 | ### React 严格模式的好处 32 | 33 | #### 识别不安全的生命周期方法 34 | 35 | React 严格模式有助于识别使用不安全的生命周期方法的组件，例如 `componentWillMount`、`componentWillReceiveProps` 和 `componentWillUpdate`。这些方法被认为是不安全的，因为它们可能导致错误和意外行为。如果您的任何组件使用这些方法，React 严格模式将向您发出警告。 36 | 37 | #### 警告旧的字符串 ref API 的使用 38 | 39 | 如果您正在使用旧的字符串 ref API，React 严格模式会向您发出警告。字符串 ref API 被认为是旧的，不建议在新代码中使用。相反，您应该使用回调 ref API 或 `React.createRef` API。 40 | 41 | #### 检测意外的副作用 42 | 43 | React 严格模式通过有意地双重调用某些生命周期方法和函数来帮助检测意外的副作用。这有助于确保您的组件能够适应未来的变化，并且它们不依赖于可能不总是执行的副作用。 44 | 45 | #### 确保组件能够适应未来的变化 46 | 47 | 通过启用 React 严格模式，您可以确保您的组件更能适应 React 的未来变化。额外的检查和警告可帮助您尽早识别潜在问题，从而更容易维护和更新您的代码库。 48 | 49 | ## 延伸阅读 50 | 51 | * [React Strict Mode Documentation](https://react.dev/reference/react/StrictMode) 52 | * [React Lifecycle Methods](https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component) 53 | * [Refs and the DOM](https://react.dev/learn/manipulating-the-dom-with-refs) 54 | -------------------------------------------------------------------------------- /questions/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "e8f5c8fd" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "2208586a", 11 | "979ab49e", 12 | "fa56e8ae", 13 | "446d9e38", 14 | "2a7816d0", 15 | "23372814", 16 | "7e5d8c12", 17 | "e32cbb24", 18 | "b018a7dd", 19 | "55548e3f", 20 | "5f209d31", 21 | "5ce5ff2a", 22 | "d5052397", 23 | "4ef53dec", 24 | "51e631d8", 25 | "9b6f2b95", 26 | "d0670ffc", 27 | "a94bffe9", 28 | "97041e06", 29 | "e468ef4a", 30 | "85d4994d", 31 | "6c32b943", 32 | "dca3e811", 33 | "3cda4b66", 34 | "84a4e59", 35 | "1262f9ad", 36 | "1f4770e5", 37 | "9172435d" 38 | ] 39 | }, 40 | "targets": { 41 | "zh-CN": [ 42 | "77da26a5", 43 | "2208586a", 44 | "979ab49e", 45 | "fa56e8ae", 46 | "446d9e38", 47 | "2a7816d0", 48 | "23372814", 49 | "7e5d8c12", 50 | "e32cbb24", 51 | "b018a7dd", 52 | "55548e3f", 53 | "5f209d31", 54 | "5ce5ff2a", 55 | "d5052397", 56 | "4ef53dec", 57 | "51e631d8", 58 | "9b6f2b95", 59 | "d0670ffc", 60 | "a94bffe9", 61 | "97041e06", 62 | "e468ef4a", 63 | "85d4994d", 64 | "6c32b943", 65 | "dca3e811", 66 | "3cda4b66", 67 | "84a4e59", 68 | "1262f9ad", 69 | "1f4770e5", 70 | "9172435d" 71 | ] 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react/en-US.langnostic.json: -------------------------------------------------------------------------------- 1 | { 2 | "frontmatter": { 3 | "title": "f4e00b35" 4 | }, 5 | "content": { 6 | "source": { 7 | "locale": "en-US", 8 | "hashes": [ 9 | "77da26a5", 10 | "38e72066", 11 | "ac3ae693", 12 | "39b6fd0e", 13 | "7e7436a1", 14 | "2a7816d0", 15 | "be84eef", 16 | "1df552e9", 17 | "d6115eaf", 18 | "4ef53dec", 19 | "9a192759", 20 | "9912c3a1", 21 | "4fc0a022", 22 | "d32617e0", 23 | "933d03bd", 24 | "1416c99f", 25 | "4ef53dec", 26 | "ab417da6", 27 | "9912c3a1", 28 | "935e571f", 29 | "2efd1958", 30 | "1ae25ea7", 31 | "9b746cb4", 32 | "4a8086fb", 33 | "9c8c8dbd", 34 | "dc3a9577", 35 | "d1097a2e", 36 | "1f4770e5", 37 | "8c3c6692" 38 | ] 39 | }, 40 | "targets": { 41 | "zh-CN": [ 42 | "77da26a5", 43 | "38e72066", 44 | "ac3ae693", 45 | "39b6fd0e", 46 | "7e7436a1", 47 | "2a7816d0", 48 | "be84eef", 49 | "1df552e9", 50 | "d6115eaf", 51 | "4ef53dec", 52 | "9a192759", 53 | "9912c3a1", 54 | "4fc0a022", 55 | "d32617e0", 56 | "933d03bd", 57 | "1416c99f", 58 | "4ef53dec", 59 | "ab417da6", 60 | "9912c3a1", 61 | "935e571f", 62 | "2efd1958", 63 | "1ae25ea7", 64 | "9b746cb4", 65 | "4a8086fb", 66 | "9c8c8dbd", 67 | "dc3a9577", 68 | "d1097a2e", 69 | "1f4770e5", 70 | "8c3c6692" 71 | ] 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /questions/what-is-reconciliation-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的协调是什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的协调是 React 更新 DOM 以匹配虚拟 DOM 的过程。当组件的状态或属性发生变化时，React 会创建一个新的虚拟 DOM 树，并将其与之前的树进行比较。这个比较过程称为“差异”。然后，React 只更新实际 DOM 中发生变化的部分，从而使更新高效且快速。 8 | 9 | *** 10 | 11 | ## React 中的协调是什么？ 12 | 13 | ### 简介 14 | 15 | 协调是 React 中的一个关键概念，它处理 React 如何更新 DOM 以匹配虚拟 DOM。虚拟 DOM 是实际 DOM 的轻量级副本，React 使用它来确定更新用户界面的最有效方法。 16 | 17 | ### 虚拟 DOM 18 | 19 | React 维护一个虚拟 DOM 以优化更新。当组件的状态或属性发生变化时，React 会创建一个新的虚拟 DOM 树。然后将这棵新树与之前的虚拟 DOM 树进行比较，以确定发生了什么变化。 20 | 21 | ### 差异算法 22 | 23 | 将新的虚拟 DOM 树与之前的树进行比较的过程称为“差异”。React 使用高度优化的差异算法来执行此比较。该算法的工作方式如下： 24 | 25 | 1. **元素类型比较**：如果元素类型不同，React 将用新元素替换旧元素。 26 | 2. **键比较**：如果元素类型相同但具有不同的键，React 会将它们视为不同的元素，并用新元素替换旧元素。 27 | 3. **属性和状态比较**：如果元素类型相同且具有相同的键，React 将比较它们的属性和状态以确定发生了什么变化。 28 | 29 | ### 更新 DOM 30 | 31 | 一旦差异算法确定了更改，React 只会更新实际 DOM 中发生更改的部分。这使得更新高效且快速，因为 React 避免了重新渲染整个 DOM。 32 | 33 | ### 示例 34 | 35 | 这是一个简单的示例，用于说明协调： 36 | 37 | ```jsx 38 | class MyComponent extends React.Component { 39 | constructor(props) { 40 | super(props); 41 | this.state = { count: 0 }; 42 | } 43 | 44 | increment = () => { 45 | this.setState({ count: this.state.count + 1 }); 46 | }; 47 | 48 | render() { 49 | return ( 50 |

51 |

{this.state.count}

52 | 53 |
54 | ); 55 | } 56 | } 57 | ``` 58 | 59 | 在此示例中，当调用 `increment` 方法时，状态发生变化，React 会创建一个新的虚拟 DOM 树。差异算法将新树与之前的树进行比较，并仅使用新的计数 value 更新 `

` 元素。 60 | 61 | ## 延伸阅读 62 | 63 | * [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) 64 | * [Understanding the virtual DOM](https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/) 65 | -------------------------------------------------------------------------------- /questions/what-is-jsx-and-how-does-it-work/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 什么是JSX以及它如何工作？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。JSX 通过允许您直接在 JavaScript 代码中编写类似 HTML 的内容，从而更容易创建 React 组件。在底层，JSX 被转换为 JavaScript 函数调用，通常使用 Babel 等工具。例如，JSX 中的 `

Hello, world!
` 被转换为 `React.createElement('div', null, 'Hello, world!')`。 8 | 9 | *** 10 | 11 | ## 什么是JSX以及它如何工作？ 12 | 13 | ### 什么是JSX？ 14 | 15 | JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。JSX 主要与 React 一起使用，用于描述 UI 应该是什么样子。 16 | 17 | ### JSX 如何工作？ 18 | 19 | JSX 本身不是有效的 JavaScript。它需要先转换为常规 JavaScript，然后才能由浏览器执行。这种转换通常由 Babel 等工具完成。 20 | 21 | ### JSX 语法 22 | 23 | JSX 允许您直接在 JavaScript 代码中编写类似 HTML 的标签。例如： 24 | 25 | ```jsx 26 | const element =

Hello, world!

; 27 | ``` 28 | 29 | ### 转换过程 30 | 31 | 当您编写 JSX 时，它会被转换为 JavaScript 函数调用。例如，JSX 代码： 32 | 33 | ```jsx 34 | const element =

Hello, world!

; 35 | ``` 36 | 37 | 被转换为： 38 | 39 | ```javascript 40 | const element = React.createElement('h1', null, 'Hello, world!'); 41 | ``` 42 | 43 | ### 嵌入表达式 44 | 45 | 您可以使用大括号 `{}` 将 JavaScript 表达式嵌入到 JSX 中。例如： 46 | 47 | ```jsx 48 | const name = 'John'; 49 | const element =

Hello, {name}!

; 50 | ``` 51 | 52 | ### JSX 中的属性 53 | 54 | 您可以使用引号指定字符串字面量作为属性，并使用大括号嵌入 JavaScript 表达式。例如： 55 | 56 | ```jsx 57 | const element = User Avatar; 58 | ``` 59 | 60 | ### JSX 是一个表达式 61 | 62 | 编译后，JSX 表达式会变成常规的 JavaScript 函数调用，并计算为 JavaScript 对象。这意味着您可以在 if 语句、for 循环中使用 JSX，并将其分配给变量。 63 | 64 | ### JSX 阻止注入攻击 65 | 66 | 默认情况下，React DOM 会在渲染之前转义 JSX 中嵌入的任何值。这确保了您永远无法注入未在应用程序中明确编写的任何内容。 67 | 68 | ## 延伸阅读 69 | 70 | * [React JSX documentation](https://react.dev/learn/writing-markup-with-jsx) 71 | * [Babel](https://babeljs.io/) 72 | -------------------------------------------------------------------------------- /questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释在 React 中调用 `useState` 设置器函数时会发生什么 3 | --- 4 | 5 | ## 总结 6 | 7 | 当在 React 中调用 `useState` 钩子返回的设置器函数时，它会安排对组件状态值的更新。然后，React 会将组件重新渲染与新状态排队。此过程通常是异步的，并且 React 会将多个状态更新批处理在一起以提高性能。 8 | 9 | *** 10 | 11 | ## 调用 `useState` 设置器时会发生什么 12 | 13 | ### 状态更新调度 14 | 15 | 当您调用 `useState` 提供的设置器函数（例如，`setCount`）时，React 会安排对该特定状态变量的更新。这不会立即发生；React 会将组件标记为需要使用更新后的状态值重新渲染。 16 | 17 | ```javascript 18 | const [count, setCount] = useState(0); 19 | // ... 20 | setCount(count + 1); // 安排更新以将 'count' 设置为 1 21 | ``` 22 | 23 | ### 状态替换 24 | 25 | `useState` 设置器函数**完全替换**您提供的新值中的旧状态值。如果您的状态是一个对象，并且您只想更新一个属性，则需要手动展开旧状态并覆盖特定属性。 26 | 27 | ```javascript 28 | const [user, setUser] = useState({ name: 'Anon', age: 99 }); 29 | 30 | // 仅更新 name，您必须展开旧状态： 31 | setUser((prevState) => ({ ...prevState, name: 'John' })); 32 | // 如果您只是执行 setUser({ name: 'John' })，则 'age' 属性将会丢失。 33 | ``` 34 | 35 | ### 重新渲染 36 | 37 | 在安排状态更新后，React 最终将触发组件的重新渲染。函数组件主体将使用新的状态值再次执行。React 更新其虚拟 DOM，将其与之前的版本进行比较，并仅在必要时有效地更新实际 DOM。 38 | 39 | ### 异步性质和批处理 40 | 41 | 由 `useState` 设置器触发的状态更新通常是异步和批处理的。如果您在同一个事件处理程序或 effect 中调用多个状态设置器，React 通常会将这些更新批处理在一起，以进行单次重新渲染，从而获得更好的性能。因此，您不应该依赖状态变量在调用设置器后立即具有新值。如果新状态依赖于之前的状态，请使用函数式更新形式。 42 | 43 | ```javascript 44 | // 假设 count 为 0 45 | setCount(count + 1); // 将更新排队到 1 46 | setCount(count + 1); // 仍然将 count 视为 0，再次将更新排队到 1! 47 | // 结果可能是 1，而不是 2 48 | 49 | // 使用函数式更新的正确方法： 50 | setCount((prevCount) => prevCount + 1); // 根据之前的状态将更新排队 51 | setCount((prevCount) => prevCount + 1); // 根据第一个的结果将另一个更新排队 52 | // 结果将是 2 53 | ``` 54 | 55 | ## 延伸阅读 56 | 57 | * [React 文档：使用状态 Hook (`useState`)](https://react.dev/reference/react/useState) 58 | * [React 文档：将多个状态更新排队](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state) 59 | -------------------------------------------------------------------------------- /questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 在 React 中使用数组索引作为 `key` 的值有什么后果？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 在 React 中使用数组索引作为 `key` 的值可能会导致性能问题和错误。当项目顺序发生变化时，React 可能无法正确识别哪些项目已更改，从而导致不必要的重新渲染或不正确的组件更新。最好使用唯一的标识符作为 `key`，以确保 React 可以有效地管理和更新 DOM。 8 | 9 | *** 10 | 11 | ## 使用数组索引作为 React 中 `key` 值的后果 12 | 13 | ### 性能问题 14 | 15 | 当数组索引用作 `key` 时，React 可能无法有效地更新 DOM。如果数组中项目的顺序发生变化，React 将无法正确识别已添加、删除或移动的项目。这可能导致不必要的重新渲染和性能下降。 16 | 17 | ### 不正确的组件更新 18 | 19 | 使用数组索引作为 `key` 可能会导致应用程序中的错误。例如，如果项目的顺序发生变化，React 可能会为不同的项目重用相同的组件实例，从而导致不正确的状态和 props 传递给组件。这可能导致意外行为和难以调试的问题。 20 | 21 | ### 例子 22 | 23 | 考虑以下使用数组索引作为 `key` 的示例： 24 | 25 | ```jsx 26 | const items = ['Item 1', 'Item 2', 'Item 3']; 27 | 28 | const List = () => ( 29 | 34 | ); 35 | ``` 36 | 37 | 如果 `items` 的顺序发生变化，React 可能无法正确更新 DOM，从而导致性能问题和潜在的错误。 38 | 39 | ### 更好的方法 40 | 41 | 与其使用数组索引，不如使用唯一的标识符作为 `key`。这确保了 React 可以有效地管理和更新 DOM。 42 | 43 | ```jsx 44 | const items = [ 45 | { id: 1, name: 'Item 1' }, 46 | { id: 2, name: 'Item 2' }, 47 | { id: 3, name: 'Item 3' }, 48 | ]; 49 | 50 | const List = () => ( 51 | 56 | ); 57 | ``` 58 | 59 | 在此示例中，使用 `item.id` 作为 `key` 可确保 React 在顺序更改时正确识别和更新项目。 60 | 61 | ## 延伸阅读 62 | 63 | * [React documentation on keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) 64 | * [Why using array index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) 65 | * [React performance optimization with keys](https://kentcdodds.com/blog/understanding-reacts-key-prop) 66 | -------------------------------------------------------------------------------- /questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释 React 应用程序的服务器端渲染及其优势？ 3 | --- 4 | 5 | ## 总结 6 | 7 | React 中的服务器端渲染 (SSR) 涉及在服务器上渲染 React 组件，并将完全渲染的 HTML 发送到客户端。这种方法可以改善初始加载时间和 SEO。服务器处理初始渲染，客户端通过 React 的水合过程接管。好处包括更快的初始页面加载、更好的 SEO 以及在较慢设备上的改进性能。 8 | 9 | *** 10 | 11 | ## 什么是 React 应用程序的服务器端渲染？ 12 | 13 | ### 定义 14 | 15 | 服务器端渲染 (SSR) 是一种技术，服务器渲染 React 应用程序的初始 HTML 并将其发送到客户端。这与客户端渲染 (CSR) 形成对比，在客户端渲染中，浏览器下载一个最小的 HTML 页面，并使用 JavaScript 渲染内容。 16 | 17 | ### 工作原理 18 | 19 | 1. **初始请求**：当用户请求页面时，服务器处理此请求。 20 | 2. **在服务器上渲染**：服务器使用 React 将组件渲染成 HTML。 21 | 3. **将 HTML 发送到客户端**：服务器将完全渲染的 HTML 发送到客户端。 22 | 4. **水合**：加载 HTML 后，React 接管并绑定事件处理程序，使页面具有交互性。 23 | 24 | ### 代码示例 25 | 26 | 这是一个使用 `Next.js` 的基本示例，这是一个支持开箱即用的 SSR 的流行 React 框架： 27 | 28 | ```javascript 29 | import React from 'react'; 30 | 31 | const Home = ({ data }) => ( 32 |
33 |

欢迎来到我的 SSR React 应用程序

34 |

来自服务器的数据：{data}

35 |
36 | ); 37 | 38 | export async function getServerSideProps() { 39 | // 从 API 或数据库中获取数据 40 | const data = await fetchDataFromAPI(); 41 | return { props: { data } }; 42 | } 43 | 44 | export default Home; 45 | ``` 46 | 47 | ## 服务器端渲染的优势 48 | 49 | ### 改进的初始加载时间 50 | 51 | * **更快的内容显示**：由于服务器发送完全渲染的 HTML，用户看到内容的显示速度比 CSR 快，在 CSR 中，浏览器必须先下载并执行 JavaScript 才能渲染。 52 | 53 | ### 更好的 SEO 54 | 55 | * **搜索引擎索引**：搜索引擎可以轻松地索引完全渲染的 HTML，从而改善应用程序的 SEO。这对于内容丰富的网站尤其重要。 56 | 57 | ### 在较慢设备上的性能 58 | 59 | * **减少客户端处理**：SSR 减少了需要在客户端处理的 JavaScript 量，这对于使用较慢设备或网络状况不佳的用户来说是有益的。 60 | 61 | ### 增强的用户体验 62 | 63 | * **感知性能**：用户会觉得应用程序更快，因为他们可以更快地看到内容，即使 JavaScript 仍在后台加载。 64 | 65 | ## 延伸阅读 66 | 67 | * [Next.js 文档](https://nextjs.org/docs) 68 | * [React 服务器组件](https://react.dev/reference/rsc/server-components) 69 | * [React 中的服务器端渲染](https://react.dev/reference/react-dom/server) 70 | -------------------------------------------------------------------------------- /questions/what-are-react-fragments-used-for/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Fragments 有什么用？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React Fragments 用于对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，而无需将它们包裹在额外的 HTML 元素中时，这非常有用。您可以使用简写语法 `<>...` 或 `React.Fragment` 语法。 8 | 9 | ```jsx 10 | return ( 11 | <> 12 | 13 | 14 | 15 | ); 16 | ``` 17 | 18 | *** 19 | 20 | ## React Fragments 有什么用？ 21 | 22 | ### 对多个元素进行分组 23 | 24 | React Fragments 允许您对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，但又不想引入不必要的包装元素时，这特别有用。 25 | 26 | ### 避免不必要的 DOM 节点 27 | 28 | 使用 React Fragments 有助于避免不必要的 DOM 节点，这对于性能和维护更清晰的 DOM 结构是有益的。这在复杂应用程序中尤为重要，因为额外的节点可能导致内存使用增加和渲染时间变慢。 29 | 30 | ### 语法 31 | 32 | 使用 React Fragments 有两种方法： 33 | 34 | 1. **简写语法**：这是使用 fragments 最简洁的方式。它使用空标签 `<>...`。 35 | 36 | ```jsx 37 | return ( 38 | <> 39 | 40 | 41 | 42 | ); 43 | ``` 44 | 45 | 2. **完整语法**：这使用 `React.Fragment`，如果您需要向 fragment 添加键，这可能很有用。 46 | 47 | ```jsx 48 | return ( 49 | 50 | 51 | 52 | 53 | ); 54 | ``` 55 | 56 | ### 向 fragments 添加键 57 | 58 | 如果您需要向 fragment 中的元素添加键，则必须使用完整的 `React.Fragment` 语法。这在渲染元素列表时很有用。 59 | 60 | ```jsx 61 | return ( 62 | <> 63 | {items.map((item) => ( 64 | 65 | 66 | 67 | ))} 68 | 69 | ); 70 | ``` 71 | 72 | ### 用例 73 | 74 | * **从组件返回多个元素**：当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。 75 | * **渲染列表**：渲染元素列表时，可以使用 fragments 对列表项进行分组，而无需向 DOM 添加额外的节点。 76 | * **条件渲染**：当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。 77 | 78 | ## 延伸阅读 79 | 80 | * [React Fragments - Official Documentation](https://react.dev/reference/react/Fragment) 81 | -------------------------------------------------------------------------------- /questions/what-does-re-rendering-mean-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中重新渲染是什么意思？ 3 | --- 4 | 5 | ## 总结 6 | 7 | 在 React 中，重新渲染是指组件响应状态或 props 的变化而更新其在 DOM 中的输出的过程。当组件的状态或 props 发生变化时，React 会触发重新渲染，以确保 UI 反映最新的数据。此过程涉及再次调用组件的 render 方法以生成新的虚拟 DOM，然后将其与之前的虚拟 DOM 进行比较，以确定更新实际 DOM 所需的最小更改集。 8 | 9 | *** 10 | 11 | ## React 中重新渲染是什么意思？ 12 | 13 | ### 理解重新渲染 14 | 15 | 在 React 中，重新渲染是指组件响应其状态或 props 的变化而更新其在 DOM 中的输出的过程。这确保了 UI 始终与底层数据同步。 16 | 17 | ### 什么时候会发生重新渲染？ 18 | 19 | 重新渲染发生在以下情况下： 20 | 21 | * 当组件使用 `setState` 更改状态时 22 | * 当组件从其父组件接收到新的 props 时 23 | * 当父组件重新渲染时，导致其子组件也重新渲染 24 | 25 | ### 重新渲染过程 26 | 27 | 1. **状态或 props 更改**：当组件的状态或 props 更改时，React 会为该组件安排重新渲染。 28 | 2. **render 方法**：React 调用组件的 `render` 方法以生成新的虚拟 DOM 树。 29 | 3. **虚拟 DOM 比较**：React 使用 diffing 算法将新的虚拟 DOM 树与之前的虚拟 DOM 树进行比较。 30 | 4. **DOM 更新**：React 计算所需的最小更改集并相应地更新实际 DOM。 31 | 32 | ### 示例 33 | 34 | 这是一个简单的示例，用于说明重新渲染： 35 | 36 | ```jsx 37 | import React, { useState } from 'react'; 38 | 39 | function Counter() { 40 | const [count, setCount] = useState(0); 41 | 42 | return ( 43 |
44 |

Count: {count}

45 | 46 |
47 | ); 48 | } 49 | ``` 50 | 51 | 在此示例中： 52 | 53 | * `Counter` 组件有一个状态变量 `count`。 54 | * 当单击按钮时，`setCount` 会更新状态，从而触发重新渲染。 55 | * 再次调用 `render` 方法，并将新的虚拟 DOM 与之前的虚拟 DOM 进行比较。 56 | * React 更新实际 DOM 以反映新的计数。 57 | 58 | ### 性能考虑 59 | 60 | 重新渲染可能很昂贵，尤其对于复杂的组件或大型应用程序而言。为了优化性能，React 提供了几种技术： 61 | 62 | * **PureComponent**：一个基类，它实现了 props 和 state 的浅层比较，以防止不必要的重新渲染。 63 | * **React.memo**：一个高阶组件，它会记忆组件 render 的结果，以避免在 props 未更改的情况下重新渲染。 64 | * **useMemo 和 useCallback**：用于记忆值和函数的 Hook，以防止不必要的重新渲染。 65 | 66 | ## 延伸阅读 67 | 68 | * [React documentation on rendering](https://react.dev/learn/render-and-commit) 69 | * [React documentation on state](https://react.dev/learn/state-a-components-memory) 70 | * [React.memo](https://react.dev/reference/react/memo) 71 | -------------------------------------------------------------------------------- /questions/explain-what-react-hydration-is/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释 React 水合是什么 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 水合是在客户端附加事件监听器并使服务器渲染的 HTML 页面具有交互性的过程。当 React 应用程序进行服务器端渲染时，HTML 会发送到客户端，React 会接管并通过附加事件处理程序和初始化状态来使其具有动态性。此过程称为水合。 8 | 9 | *** 10 | 11 | ## 什么是 React 水合？ 12 | 13 | ### 服务器端渲染 (SSR) 14 | 15 | 服务器端渲染 (SSR) 是一种在服务器上生成网页 HTML 并将其发送到客户端的技术。这允许更快的初始页面加载和更好的 SEO，因为内容在加载页面时已经可用。 16 | 17 | ### 水合过程 18 | 19 | 水合是在将服务器端渲染的 HTML 发送到客户端后发生的过程。React 获取静态 HTML 并通过附加事件监听器和初始化状态来“水合”它，从而使页面具有交互性。此过程涉及： 20 | 21 | 1. **重用现有的 HTML**：React 使用服务器生成的 HTML，而不是从头开始重新渲染它。 22 | 2. **附加事件监听器**：React 将必要的事件监听器附加到现有的 HTML 元素。 23 | 3. **初始化状态**：React 初始化组件状态和属性以使页面具有动态性。 24 | 25 | ### 示例 26 | 27 | 这是一个简单的例子，说明这个概念： 28 | 29 | 1. **服务器端渲染**：服务器生成以下 HTML： 30 | 31 | ```html 32 |
33 | 34 |
35 | ``` 36 | 37 | 2. **客户端水合**：当 HTML 发送到客户端时，React 使用以下代码对其进行水合： 38 | 39 | ```jsx 40 | import React from 'react'; 41 | import ReactDOM from 'react-dom'; 42 | 43 | function App() { 44 | const handleClick = () => { 45 | alert('Button clicked!'); 46 | }; 47 | 48 | return ; 49 | } 50 | 51 | ReactDOM.hydrate(, document.getElementById('root')); 52 | ``` 53 | 54 | 在此示例中，服务器将带有按钮的静态 HTML 发送到客户端。然后，React 通过附加 `onClick` 事件监听器来对按钮进行水合，使其具有交互性。 55 | 56 | ### 水合的好处 57 | 58 | 1. **更快的初始加载**：由于 HTML 已经可用，因此初始页面加载速度更快。 59 | 2. **SEO 优势**：搜索引擎可以抓取服务器渲染的 HTML，从而改善 SEO。 60 | 3. **改进的用户体验**：用户可以立即看到内容，甚至在 React 完全接管之前。 61 | 62 | ### 水合的挑战 63 | 64 | 1. **不匹配问题**：如果服务器渲染的 HTML 与客户端 React 组件不匹配，则可能导致错误和警告。 65 | 2. **性能开销**：水合可能占用大量资源，尤其对于大型应用程序而言。 66 | 67 | ## 延伸阅读 68 | 69 | * [React 文档关于 hydration](https://react.dev/reference/react-dom/client/hydrateRoot) 70 | * [React 中的服务端渲染](https://react.dev/reference/react-dom/server) 71 | * [Next.js 文档关于 hydration](https://nextjs.org/docs/basic-features/pages#hydration) 72 | -------------------------------------------------------------------------------- /questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 什么是 React Fiber？与之前的方案相比，它有哪些改进？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React Fiber 是对 React 渲染算法的完全重写，在 React 16 中引入。它通过将渲染工作分解成更小的单元来改进渲染过程，允许 React 暂停和恢复工作，从而使 UI 具有更高的响应速度。这种方法支持时间切片和 Suspense 等功能，而这些功能在之前的基于堆栈的算法中是不可能实现的。 8 | 9 | *** 10 | 11 | ## 什么是 React Fiber？与之前的方案相比，它有哪些改进？ 12 | 13 | ### React Fiber 简介 14 | 15 | React Fiber 是 React 核心渲染和协调算法的重新实现。它在 React 16 中引入，用于解决之前基于堆栈的算法的局限性。Fiber 的主要目标是实现虚拟 DOM 的增量渲染，这使得 React 可以将渲染工作拆分成块，并在多个帧中分散开来。 16 | 17 | ### 与之前的方案相比的主要改进 18 | 19 | #### 增量渲染 20 | 21 | 之前的基于堆栈的算法在一个单一的、同步的传递中处理更新，这可能导致性能问题，尤其是在复杂的 UI 中。React Fiber 将渲染工作分解成更小的单元，称为“fiber”，允许 React 暂停和恢复工作。这使得 UI 具有更高的响应速度，并防止长时间阻塞主线程。 22 | 23 | #### 时间切片 24 | 25 | React Fiber 引入了时间切片的概念，它允许 React 根据更新的紧急程度对其进行优先级排序。例如，用户交互（如点击和按键）可以优先于不太关键的更新。这确保了即使在繁重的渲染任务期间，UI 也能保持响应。 26 | 27 | #### 并发 28 | 29 | 使用 Fiber，React 可以同时处理多个任务。这意味着 React 可以在处理其他任务的同时开始渲染更新，从而带来更流畅、更具响应性的用户体验。 30 | 31 | #### 错误边界 32 | 33 | React Fiber 引入了错误边界，允许开发人员优雅地捕获和处理组件树中的错误。这在之前的基于堆栈的算法中是不可能的，在之前的算法中，错误可能导致整个应用程序崩溃。 34 | 35 | #### 改进的动画支持 36 | 37 | Fiber 的增量渲染和时间切片功能使得实现流畅的动画和过渡变得更容易。React 现在可以优先考虑动画帧并确保及时渲染它们，从而带来更好的用户体验。 38 | 39 | ### 代码示例 40 | 41 | 这里有一个简单的例子来说明 React Fiber 如何提高渲染性能： 42 | 43 | ```jsx 44 | class MyComponent extends React.Component { 45 | state = { 46 | items: Array.from({ length: 10000 }, (_, i) => i), 47 | }; 48 | 49 | render() { 50 | return ( 51 |
52 | {this.state.items.map((item) => ( 53 |
{item}
54 | ))} 55 |
56 | ); 57 | } 58 | } 59 | ``` 60 | 61 | 使用之前的基于堆栈的算法，渲染此组件可能会导致 UI 冻结。使用 React Fiber，渲染工作被分解成更小的单元，允许 React 暂停和恢复工作，保持 UI 的响应性。 62 | 63 | ## 延伸阅读 64 | 65 | * [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture) 66 | * [React Blog: Concurrent Features](https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features) 67 | -------------------------------------------------------------------------------- /questions/explain-the-composition-pattern-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释 React 中的组合模式 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的组合模式是一种通过组合更小、可复用的组件来构建组件的方式。React 鼓励使用组合来创建复杂的 UI，而不是使用继承。你可以将组件作为子组件或 props 传递给其他组件来实现这一点。例如： 8 | 9 | ```jsx 10 | function WelcomeDialog() { 11 | return ( 12 | 13 |

Welcome

14 |

Thank you for visiting our spacecraft!

15 | 16 | ); 17 | } 18 | 19 | function Dialog(props) { 20 | return
{props.children}
; 21 | } 22 | ``` 23 | 24 | *** 25 | 26 | ## React 中的组合模式 27 | 28 | ### 什么是组合？ 29 | 30 | 组合是一种设计原则，它涉及组合更小、可复用的组件来构建更复杂的组件。在 React 中，这比继承更适合创建复杂的 UI。 31 | 32 | ### 如何在 React 中使用组合 33 | 34 | #### 将组件作为子组件传递 35 | 36 | 使用组合的一种常见方法是将组件作为子组件传递给其他组件。这允许你嵌套组件并创建一个层次结构。 37 | 38 | ```jsx 39 | function Dialog(props) { 40 | return
{props.children}
; 41 | } 42 | 43 | function WelcomeDialog() { 44 | return ( 45 | 46 |

Welcome

47 |

Thank you for visiting our spacecraft!

48 | 49 | ); 50 | } 51 | ``` 52 | 53 | #### 将组件作为 props 传递 54 | 55 | 实现组合的另一种方法是将组件作为 props 传递。这允许更大的灵活性和自定义。 56 | 57 | ```jsx 58 | function SplitPane(props) { 59 | return ( 60 |
61 |
{props.left}
62 |
{props.right}
63 |
64 | ); 65 | } 66 | 67 | function App() { 68 | return } right={} />; 69 | } 70 | ``` 71 | 72 | ### 组合的优点 73 | 74 | * **可重用性**：较小的组件可以在应用程序的不同部分重复使用。 75 | * **可维护性**：更容易管理和更新较小的组件。 76 | * **灵活性**：组件可以以不同的方式轻松组合，以创建复杂的 UI。 77 | 78 | ### 什么时候使用组合 79 | 80 | * 当你需要从更小、可重用的组件创建复杂的 UI 时。 81 | * 当你想避免继承的缺陷时，例如紧密耦合和难以管理状态。 82 | 83 | ## 延伸阅读 84 | 85 | * [React 中的组合](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/) 86 | * [关于 React 组合的 Medium 文章](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) 87 | -------------------------------------------------------------------------------- /questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的 `useMemo` Hook 是什么？应该在什么时候使用它？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 `useMemo` Hook 用于记忆昂贵的计算，以便仅在其中一个依赖项发生更改时才重新计算它们。 这可以通过避免不必要的重新计算来提高性能。 当您有一个计算量很大的函数，并且不需要在每次渲染时运行它时，您应该使用 `useMemo`。 8 | 9 | ```javascript 10 | const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 11 | ``` 12 | 13 | *** 14 | 15 | ## React 中的 `useMemo` Hook 是什么？应该在什么时候使用它？ 16 | 17 | ### 什么是 `useMemo`？ 18 | 19 | `useMemo` Hook 是一个内置的 React Hook，它允许您记忆函数的计算结果。 这意味着该函数仅在其依赖项之一发生更改时才会重新执行。 `useMemo` 的主要目的是通过防止不必要的重新计算来优化性能。 20 | 21 | ### 语法 22 | 23 | `useMemo` 的语法如下： 24 | 25 | ```javascript 26 | const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 27 | ``` 28 | 29 | * 第一个参数是一个返回您要记忆的值的函数。 30 | * 第二个参数是一个依赖项数组。 仅当这些依赖项之一发生更改时，才会重新计算记忆值。 31 | 32 | ### 什么时候应该使用它？ 33 | 34 | #### 昂贵的计算 35 | 36 | 如果您有一个执行计算量很大的计算的函数，则可以使用 `useMemo` 确保仅在必要时才执行此计算。 37 | 38 | ```javascript 39 | const expensiveCalculation = (num) => { 40 | // Some expensive calculation 41 | return num * 2; 42 | }; 43 | 44 | const MyComponent = ({ number }) => { 45 | const memoizedValue = useMemo(() => expensiveCalculation(number), [number]); 46 | 47 | return
{memoizedValue}
; 48 | }; 49 | ``` 50 | 51 | #### 避免不必要的渲染 52 | 53 | `useMemo` 还可以用于避免子组件的不必要渲染。 如果子组件依赖于计算量很大的值，则可以使用 `useMemo` 确保仅在必要时才重新计算该值。 54 | 55 | ```javascript 56 | const MyComponent = ({ items }) => { 57 | const sortedItems = useMemo(() => { 58 | return items.sort((a, b) => a - b); 59 | }, [items]); 60 | 61 | return ; 62 | }; 63 | ``` 64 | 65 | ### 注意事项 66 | 67 | * **过度使用**：过度使用 `useMemo` 可能会导致代码更复杂，而没有显着的性能优势。 应谨慎使用。 68 | * **依赖项**：确保正确指定所有依赖项。 缺少依赖项可能会导致值过时，而额外的依赖项可能会导致不必要的重新计算。 69 | 70 | ## 延伸阅读 71 | 72 | * [React documentation on `useMemo`](https://react.dev/reference/react/useMemo) 73 | * [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback) by Kent C. Dodds 74 | -------------------------------------------------------------------------------- /questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的虚拟 DOM 如何工作？它有哪些优点和缺点？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的虚拟 DOM 是实际 DOM 的轻量级副本。当组件的状态发生变化时，React 会创建一个新的虚拟 DOM 树，并使用称为“协调”的过程将其与之前的树进行比较。然后，只有差异会在实际 DOM 中更新，从而使更新更有效。优点包括提高性能和更具声明性的方式来管理 UI。但是，它可能会增加复杂性，并且对于非常简单的应用程序可能没有那么高的性能。 8 | 9 | *** 10 | 11 | ## React 中的虚拟 DOM 如何工作？ 12 | 13 | ### 什么是虚拟 DOM？ 14 | 15 | 虚拟 DOM 是一个概念，其中 UI 的虚拟表示形式保存在内存中，并通过 React 等库与真实的 DOM 同步。此过程称为“协调”。 16 | 17 | ### 它是如何工作的？ 18 | 19 | 1. **初始渲染**：首次渲染 React 组件时，会创建一个虚拟 DOM 树。此树是实际 DOM 的轻量级副本。 20 | 2. **状态更改**：当组件的状态发生变化时，React 会创建一个新的虚拟 DOM 树。 21 | 3. **差异**：React 将新的虚拟 DOM 树与之前的树进行比较，以找到差异。此过程称为“差异”。 22 | 4. **协调**：React 仅根据在差异过程中找到的差异来更新实际 DOM 的部分。 23 | 24 | ### 代码示例 25 | 26 | ```jsx 27 | import { useState } from 'react'; 28 | 29 | function MyComponent() { 30 | const [count, setCount] = useState(0); 31 | 32 | const increment = () => setCount(count + 1); 33 | 34 | return ( 35 |
36 |

{count}

37 | 38 |
39 | ); 40 | } 41 | ``` 42 | 43 | 在此示例中，当单击按钮时，状态会发生变化，从而触发创建新的虚拟 DOM 树。然后，React 将此新树与之前的树进行比较，并仅更新实际 DOM 中的 `

` 元素。 44 | 45 | ## 虚拟 DOM 的好处 46 | 47 | ### 提高性能 48 | 49 | * **高效更新**：通过仅更新已更改的 DOM 部分，React 最小化了昂贵的 DOM 操作的数量。 50 | * **批量更新**：React 可以将多个更新批量处理在一起，从而减少重新渲染的次数。 51 | 52 | ### 声明式 UI 53 | 54 | * **简化开发**：开发人员可以描述 UI 在给定状态下应该是什么样子，而 React 负责更新 DOM 以匹配该状态。 55 | 56 | ### 跨平台 57 | 58 | * **React Native**：虚拟 DOM 概念允许 React 用于使用 React Native 进行移动应用程序开发，从而在不同平台上提供一致的开发体验。 59 | 60 | ## 虚拟 DOM 的缺点 61 | 62 | ### 复杂性 63 | 64 | * **学习曲线**：对于初学者来说，理解虚拟 DOM 的工作原理以及如何优化组件可能具有挑战性。 65 | * **开销**：对于非常简单的应用程序，维护虚拟 DOM 的开销可能不合理。 66 | 67 | ### 性能限制 68 | 69 | * **并非万能药**：虽然虚拟 DOM 改善了许多用例的性能，但在非常具体、高度优化的场景中，它的性能可能不如手动 DOM 操作。 70 | 71 | ## 延伸阅读 72 | 73 | * [React Docs on Reconciliation](https://react.dev/learn/render-and-commit) 74 | * [What is the Virtual DOM in React?](https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/) 75 | -------------------------------------------------------------------------------- /questions/what-are-some-pitfalls-about-using-context-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 React Context 时有哪些陷阱？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 如果管理不当，在 React 中使用 Context 可能会导致性能问题。它可能导致使用 Context 的组件不必要的重新渲染，即使它们使用的 Context 部分没有改变。此外，过度使用 Context 进行状态管理会使代码更难理解和维护。谨慎使用 Context 并考虑使用 Redux 或 Zustand 等其他状态管理解决方案来满足更复杂的状态需求非常重要。 8 | 9 | *** 10 | 11 | ## 使用 React Context 的陷阱 12 | 13 | ### 性能问题 14 | 15 | 在 React 中使用 Context 的主要陷阱之一是潜在的性能问题。当 Context 值更改时，所有使用 Context 的组件都将重新渲染，即使它们不使用已更改的 Context 部分。这可能导致不必要的重新渲染并降低应用程序的性能。 16 | 17 | #### 示例 18 | 19 | ```jsx 20 | const MyContext = React.createContext(); 21 | 22 | function ParentComponent() { 23 | const [value, setValue] = React.useState(0); 24 | 25 | return ( 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | function ChildComponent() { 33 | const value = React.useContext(MyContext); 34 | console.log('ChildComponent re-rendered'); 35 | return

{value}
; 36 | } 37 | ``` 38 | 39 | 在此示例中，`ChildComponent` 将在 `ParentComponent` 中的 `value` 每次更改时重新渲染，即使 `ChildComponent` 不需要更新。 40 | 41 | ### 过度使用 Context 42 | 43 | 使用 Context 进行状态管理会使代码更难理解和维护。Context 最适合于不经常更改的全局状态，例如主题设置或用户身份验证状态。过度使用 Context 进行更复杂的状态管理会导致代码库混乱且难以理解。 44 | 45 | ### 调试困难 46 | 47 | 调试与 Context 相关的问题可能具有挑战性。由于 Context 更新可能会在多个组件中触发重新渲染，因此很难追踪错误或性能问题的根源。对于具有许多 Context 提供程序和使用者的较大应用程序来说尤其如此。 48 | 49 | ### 缺乏细粒度控制 50 | 51 | Context 提供了一种在组件树中传递数据的方法，而无需在每个级别手动传递 props。但是，它缺乏对 Context 值更改时应重新渲染哪些组件的细粒度控制。如果管理不当，这可能导致性能瓶颈。 52 | 53 | ### Context 的替代方案 54 | 55 | 对于更复杂的状态管理需求，请考虑使用 Redux、Zustand 或 Recoil 等其他状态管理解决方案。这些库提供了对状态更新的更细粒度控制，并且可以帮助避免与使用 Context 相关的一些陷阱。 56 | 57 | ## 延伸阅读 58 | 59 | * [React Context](https://react.dev/learn/passing-data-deeply-with-context) 60 | * [React memo Performance Optimization](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) 61 | * [Redux](https://redux.js.org/) 62 | * [Zustand](https://github.com/pmndrs/zustand) 63 | * [Recoil](https://recoiljs.org/) 64 | -------------------------------------------------------------------------------- /questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的 `useCallback` Hook 是什么？应该在什么时候使用？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 `useCallback` Hook 用于记忆函数，防止它们在每次渲染时被重新创建。当将回调传递给依赖于引用相等性以防止不必要渲染的优化子组件时，这特别有用。当您有一个作为 prop 传递给子组件的函数，并且您希望避免子组件不必要地重新渲染时，应该使用 `useCallback`。 8 | 9 | ```javascript 10 | const memoizedCallback = useCallback(() => { 11 | doSomething(a, b); 12 | }, [a, b]); 13 | ``` 14 | 15 | *** 16 | 17 | ## React 中的 `useCallback` Hook 是什么？应该在什么时候使用？ 18 | 19 | ### 什么是 `useCallback`？ 20 | 21 | `useCallback` Hook 是一个 React Hook，它返回一个记忆化的回调函数，该函数仅在其中一个依赖项发生更改时才会更改。它对于通过防止不必要的函数重新创建来优化性能非常有用。 22 | 23 | ### 语法 24 | 25 | ```javascript 26 | const memoizedCallback = useCallback(() => { 27 | doSomething(a, b); 28 | }, [a, b]); 29 | ``` 30 | 31 | ### 什么时候应该使用 `useCallback`？ 32 | 33 | #### 防止不必要的重新渲染 34 | 35 | 当您将一个函数作为 prop 传递给子组件时，即使函数本身没有改变，子组件也可能在每次父组件重新渲染时重新渲染。使用 `useCallback` 可确保函数引用保持不变，只要其依赖项没有改变，从而防止不必要的重新渲染。 36 | 37 | ```javascript 38 | const ParentComponent = () => { 39 | const [count, setCount] = useState(0); 40 | 41 | const handleClick = useCallback(() => { 42 | setCount(count + 1); 43 | }, [count]); 44 | 45 | return ; 46 | }; 47 | 48 | const ChildComponent = React.memo(({ onClick }) => { 49 | console.log('ChildComponent rendered'); 50 | return ; 51 | }); 52 | ``` 53 | 54 | #### 优化性能 55 | 56 | 在复杂的应用程序中，在每次渲染时重新创建函数在性能方面可能代价高昂。通过使用 `useCallback`，您可以避免这种开销，并使您的应用程序更有效率。 57 | 58 | ### 注意事项 59 | 60 | * **过度使用**：过度使用 `useCallback` 可能会导致代码更复杂，并且不一定总能提高性能。应谨慎使用。 61 | * **依赖项**：确保所有依赖项都在依赖项数组中正确指定。缺少依赖项可能会导致陈旧的闭包和错误。 62 | 63 | ## 延伸阅读 64 | 65 | * [React documentation on `useCallback`](https://react.dev/reference/react/useCallback) 66 | * [React memoization techniques](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) 67 | * [Understanding React's `useCallback` and `useMemo`](https://kentcdodds.com/blog/usememo-and-usecallback) 68 | -------------------------------------------------------------------------------- /questions/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中 `key` prop 的作用是什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 `key` prop 用于唯一标识列表中的元素。它通过有效地更新和重新排序元素来帮助 React 优化渲染。如果没有唯一的 `key`，React 可能会不必要地重新渲染元素，从而导致性能问题和错误。 8 | 9 | ```jsx 10 | { 11 | items.map((item) => ); 12 | } 13 | ``` 14 | 15 | *** 16 | 17 | ## React 中 `key` prop 的作用是什么？ 18 | 19 | ### 简介 20 | 21 | `key` prop 是一个特殊的属性，当你在 React 中创建元素列表时，你需要包含它。它对于帮助 React 识别哪些项目已更改、已添加或已删除至关重要，从而优化渲染过程。 22 | 23 | ### 为什么 `key` 很重要 24 | 25 | 1. **高效更新**：React 使用 `key` prop 来跟踪元素。当列表的状态发生变化时，React 可以快速确定哪些项目需要重新渲染、添加或删除。 26 | 2. **避免错误**：如果没有唯一的键，React 可能会不必要地或错误地重新渲染元素，从而导致应用程序中出现潜在的错误。 27 | 3. **性能优化**：通过使用唯一的键，React 最小化了 DOM 操作的数量，使你的应用程序更快、更高效。 28 | 29 | ### 如何使用 `key` prop 30 | 31 | 当渲染元素列表时，你应该为每个元素提供一个唯一的 `key`。此键应该是稳定的，这意味着它不应在渲染之间更改。通常，你可以使用数据中的唯一标识符，例如 `id`。 32 | 33 | ```jsx 34 | const items = [ 35 | { id: 1, value: 'Item 1' }, 36 | { id: 2, value: 'Item 2' }, 37 | { id: 3, value: 'Item 3' }, 38 | ]; 39 | 40 | function ItemList() { 41 | return ( 42 |
    43 | {items.map((item) => ( 44 | 45 | ))} 46 |
47 | ); 48 | } 49 | 50 | function ListItem({ value }) { 51 | return
  • {value}
    • ; 52 | } 53 | ``` 54 | 55 | ### 常见错误 56 | 57 | 1. **使用数组索引作为键**：虽然使用数组索引作为键可能很诱人，但我们不建议这样做，因为如果列表被重新排序或添加/删除项目，索引可能会发生变化。 58 | 2. **非唯一键**：确保键在整个列表中是唯一的。重复的键可能导致意外行为和错误。 59 | 60 | ```jsx 61 | // 错误做法：使用数组索引作为键 62 | { 63 | items.map((item, index) => ); 64 | } 65 | 66 | // 好的做法：使用唯一标识符作为键 67 | { 68 | items.map((item) => ); 69 | } 70 | ``` 71 | 72 | ## 延伸阅读 73 | 74 | * [React 文档关于 keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) 75 | * [为什么 keys 在 React 中很重要](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) 76 | * [在 React 中保留和重置状态](https://react.dev/learn/preserving-and-resetting-state) 77 | -------------------------------------------------------------------------------- /questions/what-is-react-describe-the-benefits-of-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 什么是 React？ 描述 React 的优点 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 是一个由 Facebook 创建的 JavaScript 库，用于构建用户界面，主要用于单页应用程序。它允许开发人员创建管理自己状态的可重用组件。React 的主要优点包括基于组件的架构，用于模块化代码，虚拟 DOM 用于高效更新，声明式 UI 用于更易读的代码，单向数据绑定用于可预测的数据流，以及拥有丰富资源和工具的强大社区和生态系统。 8 | 9 | **React 的主要特点**： 10 | 11 | * **声明式**：您根据数据描述 UI 的所需状态，React 处理高效更新实际 DOM。 12 | * **基于组件**：构建管理自身状态和逻辑的可重用和模块化 UI 元素（组件）。 13 | * **虚拟 DOM**：React 使用实际 DOM 的轻量级内存表示，允许它选择性地高效地执行更新。 14 | * **JSX**：虽然不是强制性的，但 JSX 提供了一个语法扩展，允许您在 JavaScript 代码中编写类似 HTML 的结构，使 UI 开发更直观。 15 | 16 | *** 17 | 18 | ## 什么是 React？ 19 | 20 | React 是一个由 Facebook 开发的开源 JavaScript 库，用于构建用户界面。它专注于应用程序的视图层，特别适用于创建单页应用程序，在这种应用程序中，无缝的用户体验至关重要。React 允许开发人员构建封装其自身状态的组件，并将它们组合起来创建复杂的 UI。 21 | 22 | ## React 的优点 23 | 24 | ### 1. 基于组件的架构 25 | 26 | React 鼓励将您的 UI 分解为独立的、可重用的组件。每个组件封装其自身的状态、逻辑和渲染，使您的代码： 27 | 28 | * **模块化和可重用**：组件可以在应用程序的不同部分甚至其他项目中轻松重用。 29 | * **可维护**：组件内的更改是隔离的，从而降低了意外副作用的风险。 30 | * **更易于测试**：组件可以独立测试，确保其功能和可靠性。 31 | 32 | ### 2. 虚拟 DOM 和高效更新 33 | 34 | React 使用虚拟 DOM，即实际 DOM 的轻量级内存表示。当数据更改时，React 首先更新虚拟 DOM，然后将其与之前的版本进行比较。这个过程称为 diffing，它允许 React 识别实际 DOM 中所需的最少更改集。通过仅更新必要的元素，React 最小化了昂贵的 DOM 操作，从而显着提高了性能。 35 | 36 | ### 3. 大型且活跃的社区 37 | 38 | React 拥有庞大而活跃的全球开发人员社区。 这转化为： 39 | 40 | * **广泛的文档和资源**：查找全面的文档、教程和社区驱动的资源，以帮助您的学习和开发过程。 41 | * **丰富的第三方库和工具**：利用丰富的预构建组件、库和工具生态系统，这些生态系统扩展了 React 的功能并简化了开发。 42 | * **强大的社区支持**：通过论坛、在线社区和聚会寻求帮助、分享知识并与同行开发人员互动。 43 | 44 | ### 4. 一次学习，随处编写 45 | 46 | React 的多功能性超出了 Web 开发的范围。 使用 React Native，您可以使用您的 React 知识为 iOS 和 Android 构建原生移动应用程序。 这种“一次学习，随处编写”的方法允许您： 47 | 48 | * **在平台之间共享代码**：在 Web 和移动设备之间重用组件和逻辑，从而减少开发时间和精力。 49 | * **利用现有技能**：将您的 React 专业知识应用于移动开发，而无需学习全新的技术。 50 | * **使用单个代码库定位多个平台**：通过为多个平台管理单个代码库来简化开发和维护。 51 | 52 | ## 延伸阅读 53 | 54 | * **React 官方网站：** [https://react.dev/](https://react.dev/) 55 | * **React 文档：** [https://react.dev/learn](https://react.dev/learn) 56 | * **React 博客：** [https://react.dev/blog](https://react.dev/blog) 57 | * **React Native：** [https://reactnative.dev/](https://reactnative.dev/) 58 | -------------------------------------------------------------------------------- /questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释 React 应用程序的静态生成及其优势？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 应用程序中的静态生成涉及在构建时预渲染 HTML，而不是在每个请求时。这可以加快加载时间并提高性能，因为 HTML 已经生成，可以直接从 CDN 提供。它还可以改善 SEO 并减少服务器负载。像 Next.js 这样的工具通过允许开发人员轻松生成静态页面来促进静态生成。 8 | 9 | *** 10 | 11 | ## React 应用程序的静态生成及其优势 12 | 13 | ### 什么是静态生成？ 14 | 15 | 静态生成是一种预渲染方法，其中页面的 HTML 在构建时生成。这意味着 HTML 在构建过程中创建一次，然后在每个请求中重复使用。在 React 应用程序的上下文中，这通常使用 Next.js 等框架来实现。 16 | 17 | ### 静态生成如何工作？ 18 | 19 | 1. **构建时渲染**：在构建过程中，框架根据 React 组件和数据为每个页面生成 HTML。 20 | 2. **静态文件**：然后，生成的 HTML、CSS 和 JavaScript 文件将存储为静态文件。 21 | 3. **提供文件**：这些静态文件可以直接从 CDN 或 Web 服务器提供，而无需在每个请求上进行服务器端渲染。 22 | 23 | ### 静态生成的优势 24 | 25 | #### 提高性能 26 | 27 | * **更快的加载时间**：由于 HTML 是预生成的，因此可以立即提供，而无需等待服务器端渲染。 28 | * **减少服务器负载**：静态文件可以从 CDN 提供，从而减少了源服务器的负载。 29 | 30 | #### 更好的 SEO 31 | 32 | * **搜索引擎索引**：预渲染的 HTML 更容易被搜索引擎索引，从而改善 SEO。 33 | * **一致的内容**：内容在请求之间保持一致，确保搜索引擎看到与用户相同的内容。 34 | 35 | #### 增强安全性 36 | 37 | * **没有服务器端代码执行**：由于没有服务器端渲染，服务器端漏洞的风险较小。 38 | * **静态文件**：提供静态文件减少了与动态内容生成相比的攻击面。 39 | 40 | #### 可扩展性 41 | 42 | * **CDN 分发**：静态文件可以在多个 CDN 节点之间分发，从而提高可扩展性并减少延迟。 43 | * **高效缓存**：静态文件可以轻松缓存，从而进一步提高性能并减少服务器负载。 44 | 45 | ### Next.js 示例 46 | 47 | Next.js 是一个流行的 React 框架，支持静态生成。这是一个在 Next.js 中使用静态生成的简单示例： 48 | 49 | ```javascript 50 | // pages/index.js 51 | import React from 'react'; 52 | 53 | const HomePage = ({ data }) => { 54 | return ( 55 |
    56 |

    欢迎来到我的静态网站！

    57 |

    {data.message}

    58 |
    59 | ); 60 | }; 61 | 62 | export async function getStaticProps() { 63 | // 在构建时获取数据 64 | const data = { message: '你好，世界！' }; 65 | return { 66 | props: { 67 | data, 68 | }, 69 | }; 70 | } 71 | 72 | export default HomePage; 73 | ``` 74 | 75 | 在这个例子中，`getStaticProps` 函数在构建时获取数据，`HomePage` 组件使用这些数据来渲染 HTML。 76 | 77 | ## 延伸阅读 78 | 79 | * [Next.js 关于静态生成的文档](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) 80 | * [React 官方文档](https://react.dev/learn) 81 | * [静态站点生成器比较](https://www.staticgen.com/) 82 | -------------------------------------------------------------------------------- /questions/what-are-the-rules-of-react-hooks/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Hooks 的规则是什么？ 3 | --- 4 | 5 | ## 总结 6 | 7 | React Hooks 有一些基本规则来确保它们正常工作。 始终在 React 函数的顶层调用 Hooks，切勿在循环、条件或嵌套函数内调用。 仅从 React 函数组件或自定义 Hooks 调用 Hooks。 这些规则确保 Hooks 保持正确的状态和生命周期行为。 8 | 9 | *** 10 | 11 | ## React Hooks 的规则是什么？ 12 | 13 | ### 始终在顶层调用 Hooks 14 | 15 | Hooks 应该始终在 React 函数的顶层调用。 这意味着你不应该在循环、条件或嵌套函数内调用 Hooks。 此规则确保每次组件渲染时 Hooks 以相同的顺序调用，这对于维护正确的状态和生命周期行为至关重要。 16 | 17 | ```javascript 18 | // 正确 19 | function MyComponent() { 20 | const [count, setCount] = useState(0); 21 | 22 | if (count > 0) { 23 | // 做一些事情 24 | } 25 | } 26 | 27 | // 不正确 28 | function MyComponent() { 29 | if (someCondition) { 30 | const [count, setCount] = useState(0); // 这将破坏 Hooks 的规则 31 | } 32 | } 33 | ``` 34 | 35 | ### 仅从 React 函数组件或自定义 Hooks 调用 Hooks 36 | 37 | Hooks 应该仅从 React 函数组件或自定义 Hooks 调用。 此规则确保 Hooks 在 React 可以管理其状态和生命周期的适当上下文中被使用。 38 | 39 | ```javascript 40 | // 正确 41 | function MyComponent() { 42 | const [count, setCount] = useState(0); 43 | return
    {count}
    ; 44 | } 45 | 46 | // 正确（自定义 Hook） 47 | function useCustomHook() { 48 | const [state, setState] = useState(null); 49 | return [state, setState]; 50 | } 51 | 52 | // 不正确 53 | function regularFunction() { 54 | const [count, setCount] = useState(0); // 这将破坏 Hooks 的规则 55 | } 56 | ``` 57 | 58 | ### 使用 `eslint-plugin-react-hooks` linter 59 | 60 | 为了执行这些规则，你可以使用 `eslint-plugin-react-hooks` linter。 这个插件将帮助你识别和修复代码中 Hooks 规则的违规行为。 61 | 62 | ```bash 63 | npm install eslint-plugin-react-hooks --save-dev 64 | ``` 65 | 66 | 将插件添加到你的 ESLint 配置中： 67 | 68 | ```json 69 | { 70 | "plugins": ["react-hooks"], 71 | "rules": { 72 | "react-hooks/rules-of-hooks": "error", // 检查 Hooks 的规则 73 | "react-hooks/exhaustive-deps": "warn" // 检查 effect 依赖项 74 | } 75 | } 76 | ``` 77 | 78 | ## 延伸阅读 79 | 80 | * [React hooks documentation](https://react.dev/reference/react/hooks) 81 | * [Rules of hooks](https://react.dev/reference/rules/rules-of-hooks) 82 | * [Using the `eslint-plugin-react-hooks` linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) 83 | -------------------------------------------------------------------------------- /questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释 React 的单向数据流及其优势 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 在 React 中，单向数据流意味着 React 应用程序中的数据以单个方向流动，从父组件到子组件。这使得数据流可预测且更易于调试。主要优点包括提高可维护性、更易于调试和更好的性能。 8 | 9 | *** 10 | 11 | ## React 的单向数据流及其优势 12 | 13 | ### 什么是单向数据流？ 14 | 15 | 在 React 中，单向数据流是指数据以单个方向流动，从父组件到子组件的概念。这是通过使用 `props` 实现的。父组件通过 `props` 将数据传递给子组件，子组件只能读取这些 `props`，但不能修改它们。如果子组件需要反馈给父组件，它会通过调用从父组件作为 prop 传递下来的函数来实现。 16 | 17 | ### 示例 18 | 19 | 这是一个简单的示例，用于说明单向数据流： 20 | 21 | ```jsx 22 | // ParentComponent.jsx 23 | import React, { useState } from 'react'; 24 | import ChildComponent from './ChildComponent'; 25 | 26 | const ParentComponent = () => { 27 | const [data, setData] = useState('Hello from Parent'); 28 | 29 | const handleChange = (newData) => { 30 | setData(newData); 31 | }; 32 | 33 | return ( 34 |
    35 |

    {data}

    36 | 37 |
    38 | ); 39 | }; 40 | 41 | export default ParentComponent; 42 | 43 | // ChildComponent.jsx 44 | import React from 'react'; 45 | 46 | const ChildComponent = ({ data, onChange }) => { 47 | return ( 48 |
    49 |

    {data}

    50 | 51 |
    52 | ); 53 | }; 54 | 55 | export default ChildComponent; 56 | ``` 57 | 58 | 在此示例中，`ParentComponent` 通过 `props` 将 `data` 和 `handleChange` 函数传递给 `ChildComponent`。`ChildComponent` 可以读取 `data` 并调用 `onChange` 以反馈给父组件。 59 | 60 | ### 单向数据流的优势 61 | 62 | #### 提高可维护性 63 | 64 | 单向数据流使应用程序结构更具可预测性，更易于理解。由于数据以单个方向流动，因此更容易跟踪数据随时间的变化，从而使代码库更易于维护。 65 | 66 | #### 更易于调试 67 | 68 | 使用单向数据流，更容易查明可能发生错误的地点。由于数据只能从父级流向子级，因此您可以跟踪数据流并更快地确定问题来源。 69 | 70 | #### 更好的性能 71 | 72 | 单向数据流可以带来更好的性能，因为它降低了数据管理的复杂性。React 的协调算法可以通过比较当前状态和先前状态来有效地更新 DOM，从而最大限度地减少所需的更新次数。 73 | 74 | ## 延伸阅读 75 | 76 | * [React 组件和 Props 文档](https://react.dev/learn/passing-props-to-a-component) 77 | * [React 状态文档](https://react.dev/learn/state-a-components-memory) 78 | * [React 提升状态文档](https://react.dev/learn/sharing-state-between-components) 79 | -------------------------------------------------------------------------------- /questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中 `setState()` 的回调函数参数格式的目的是什么？应该在什么时候使用它？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中 `setState()` 的回调函数参数格式用于确保状态更新基于最新的状态和 props。当新状态依赖于之前的状态时，这一点尤其重要。您无需直接将对象传递给 `setState()`，而是传递一个函数，该函数将之前的状态和 props 作为参数，并返回新状态。 8 | 9 | ```javascript 10 | this.setState((prevState, props) => ({ 11 | counter: prevState.counter + props.increment, 12 | })); 13 | ``` 14 | 15 | *** 16 | 17 | ## React 中 `setState()` 的回调函数参数格式的目的 18 | 19 | ### 确保状态更新基于最新的状态 20 | 21 | React 的 `setState()` 是异步的，这意味着可以出于性能原因将对 `setState()` 的多个调用批处理在一起。如果依赖当前状态来计算下一个状态，使用回调函数格式可确保您使用最新的状态。 22 | 23 | ### 语法 24 | 25 | `setState()` 的回调函数格式将一个函数作为参数。此函数接收两个参数：`prevState` 和 `props`。它返回一个表示新状态的对象。 26 | 27 | ```javascript 28 | this.setState((prevState, props) => { 29 | return { 30 | counter: prevState.counter + props.increment, 31 | }; 32 | }); 33 | ``` 34 | 35 | ### 什么时候使用它 36 | 37 | * **当新状态依赖于之前的状态时**：如果需要根据当前状态更新状态，请使用回调函数格式以避免与异步状态更新相关的潜在问题。 38 | * **当多个状态更新被批处理时**：在多个 `setState()` 调用可能被批处理在一起的情况下，使用回调函数可确保每次更新都基于最新的状态。 39 | 40 | ### 示例 41 | 42 | 考虑一个计数器组件，其中状态更新取决于之前的状态： 43 | 44 | ```javascript 45 | class Counter extends React.Component { 46 | constructor(props) { 47 | super(props); 48 | this.state = { counter: 0 }; 49 | } 50 | 51 | incrementCounter = () => { 52 | this.setState((prevState, props) => ({ 53 | counter: prevState.counter + 1, 54 | })); 55 | }; 56 | 57 | render() { 58 | return ( 59 |
    60 |

    Counter: {this.state.counter}

    61 | 62 |
    63 | ); 64 | } 65 | } 66 | ``` 67 | 68 | 在此示例中，使用回调函数格式可确保正确递增 `counter` 状态，即使在短时间内多次调用 `incrementCounter` 也是如此。 69 | 70 | ## 延伸阅读 71 | 72 | * [React Docs: State: A Component's Memory](https://react.dev/learn/state-a-components-memory) 73 | * [React Docs: setState()](https://react.dev/reference/react/useState#setstate) 74 | * [React Docs: Responding to Events](https://react.dev/learn/responding-to-events) 75 | -------------------------------------------------------------------------------- /questions/what-is-code-splitting-in-a-react-application/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 应用程序中的代码拆分是什么？ 3 | --- 4 | 5 | ## 总结 6 | 7 | React 应用程序中的代码拆分是一种通过将代码拆分成更小的块（可以按需加载）来提高性能的技术。这有助于减少应用程序的初始加载时间。您可以使用动态 `import()` 语句或 React 的 `React.lazy` 和 `Suspense` 来实现代码拆分。 8 | 9 | ```javascript 10 | // 使用 React.lazy 和 Suspense 11 | const LazyComponent = React.lazy(() => import('./LazyComponent')); 12 | 13 | function App() { 14 | return ( 15 | Loading...}> 16 | 17 | 18 | ); 19 | } 20 | ``` 21 | 22 | *** 23 | 24 | ## React 应用程序中的代码拆分是什么？ 25 | 26 | ### 简介 27 | 28 | 代码拆分是一种性能优化技术，它涉及将应用程序的代码分解成更小、更易于管理的块。这允许应用程序最初只加载必要的代码，并将其他部分的加载推迟到需要时。这可以显着减少初始加载时间并改善整体用户体验。 29 | 30 | ### 如何实现代码拆分 31 | 32 | #### 使用动态 `import()` 33 | 34 | 动态 `import()` 是一个 JavaScript 特性，允许您异步加载模块。这可以用于将代码拆分成单独的块。 35 | 36 | ```javascript 37 | // 动态导入示例 38 | import('./module').then((module) => { 39 | // 使用该模块 40 | }); 41 | ``` 42 | 43 | #### 使用 React.lazy 和 Suspense 44 | 45 | React 通过 `React.lazy` 和 `Suspense` 提供对代码拆分的内置支持。`React.lazy` 允许您将动态导入呈现为常规组件，而 `Suspense` 允许您在加载组件时指定加载回退。 46 | 47 | ```javascript 48 | // 延迟加载组件 49 | const LazyComponent = React.lazy(() => import('./LazyComponent')); 50 | 51 | function App() { 52 | return ( 53 | Loading...}> 54 | 55 | 56 | ); 57 | } 58 | ``` 59 | 60 | ### 代码拆分的好处 61 | 62 | * **提高性能**：通过最初只加载必要的代码，您可以减少应用程序的初始加载时间。 63 | * **更好的用户体验**：更快的加载时间带来更流畅、响应更快的用户体验。 64 | * **有效的资源使用**：代码拆分确保仅在需要时加载代码，从而更有效地使用资源。 65 | 66 | ### 工具和库 67 | 68 | * **Webpack**：Webpack 是一个流行的模块打包器，它开箱即用地支持代码拆分。您可以将其配置为自动将代码拆分成块。 69 | * **React Loadable**：虽然 `React.lazy` 和 `Suspense` 是在 React 中实现代码拆分的推荐方法，但 `React Loadable` 是一个较旧的库，也提供了类似的功能。 70 | 71 | ## 延伸阅读 72 | 73 | * [React documentation on React.lazy](https://react.dev/reference/react/lazy) 74 | * [Webpack documentation on code splitting](https://webpack.js.org/guides/code-splitting/) 75 | * [MDN Web Docs on dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) 76 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Node、React Element 和 React Component 之间有什么区别？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React Node 是 React 中的任何可渲染单元，例如元素、字符串、数字或 `null`。React Element 是一个描述要渲染内容的不可变对象，使用 JSX 或 `React.createElement` 创建。React Component 是一个返回 React Element 的函数或类，支持创建可重用的 UI 片段。 8 | 9 | *** 10 | 11 | ## React node 12 | 13 | 一个 **React Node** 是 React 渲染系统中最基本的单元。它可以是一个 React 元素、一个字符串、一个数字、一个布尔值或 `null`。 基本上，任何可以在 React 中渲染的东西都是一个 React Node。 14 | 15 | ```jsx 16 | const stringNode = 'Hello, world!'; 17 | const numberNode = 123; 18 | const booleanNode = true; 19 | const nullNode = null; 20 | const elementNode =
    Hello, world!
    ; 21 | ``` 22 | 23 | ## React element 24 | 25 | 一个 **React Element** 是一个不可变的纯对象，表示您希望在屏幕上看到的内容。它包括类型（例如 HTML 标签的字符串或 React 组件）、props 和 children。React 元素是使用 JSX 语法或 `React.createElement` 创建的。 26 | 27 | ```jsx 28 | const element =
    Hello, world!
    ; 29 | 30 | // 使用 React.createElement 31 | const element = React.createElement( 32 | 'div', 33 | { className: 'greeting' }, 34 | 'Hello, world!', 35 | ); 36 | ``` 37 | 38 | ## React component 39 | 40 | 一个 **React Component** 是一个可重用的 UI 片段，它可以接受输入（props）并返回描述 UI 的 React 元素。 有两种类型的组件：函数组件和类组件。 41 | 42 | * **函数组件**：这些更简单，只是将 props 作为参数并返回 React 元素的函数。 43 | 44 | ```jsx 45 | function Welcome(props) { 46 | return

    Hello, {props.name}

    ; 47 | } 48 | ``` 49 | 50 | * **类组件**：这些是扩展 `React.Component` 的 ES6 类，并且必须具有返回 React 元素的 `render` 方法。 51 | ```jsx 52 | class Welcome extends React.Component { 53 | render() { 54 | return

    Hello, {this.props.name}

    ; 55 | } 56 | } 57 | ``` 58 | 59 | ## 延伸阅读 60 | 61 | * [React documentation: Render and commit](https://react.dev/learn/render-and-commit) 62 | * [React documentation: Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component) 63 | * [React documentation: Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx) 64 | * [React documentation: State: A Component's Memory](https://react.dev/learn/state-a-components-memory) 65 | -------------------------------------------------------------------------------- /questions/what-are-higher-order-components-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中什么是高阶组件？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的高阶组件 (HOC) 是接受一个组件并返回一个新组件的函数，该新组件具有额外的 props 或行为。它们用于重用组件逻辑。例如，如果您有一个组件 `MyComponent`，您可以像这样创建一个 HOC： 8 | 9 | ```javascript 10 | const withExtraProps = (WrappedComponent) => { 11 | return (props) => ; 12 | }; 13 | 14 | const EnhancedComponent = withExtraProps(MyComponent); 15 | ``` 16 | 17 | *** 18 | 19 | ## React 中什么是高阶组件？ 20 | 21 | ### 定义 22 | 23 | 高阶组件 (HOC) 是 React 中接受一个组件作为参数并返回一个新组件的函数。新组件通常会包装原始组件并添加额外的 props、state 或行为。HOC 是一种重用组件逻辑的模式。 24 | 25 | ### 目的 26 | 27 | HOC 用于： 28 | 29 | * 在组件之间共享通用功能 30 | * 抽象和重用组件逻辑 31 | * 使用额外的 props 或 state 增强组件 32 | 33 | ### 示例 34 | 35 | 这是一个简单的 HOC 示例，它向包装的组件添加一个 `extraProp`： 36 | 37 | ```javascript 38 | import React from 'react'; 39 | 40 | // 定义 HOC 41 | const withExtraProps = (WrappedComponent) => { 42 | return (props) => { 43 | return ; 44 | }; 45 | }; 46 | 47 | // 定义要包装的组件 48 | const MyComponent = (props) => { 49 | return
    {props.extraProp}
    ; 50 | }; 51 | 52 | // 使用 HOC 包装组件 53 | const EnhancedComponent = withExtraProps(MyComponent); 54 | 55 | // 使用增强组件 56 | const App = () => { 57 | return ; 58 | }; 59 | 60 | export default App; 61 | ``` 62 | 63 | 在此示例中，`withExtraProps` 是一个 HOC，它向 `MyComponent` 添加一个 `extraProp`。`EnhancedComponent` 现在可以访问 `extraProp`。 64 | 65 | ### 常见用例 66 | 67 | * **身份验证**：在渲染之前包装组件以检查用户是否已通过身份验证。 68 | * **日志记录**：向组件添加日志记录功能。 69 | * **主题**：将与主题相关的 props 注入到组件中。 70 | * **数据获取**：获取数据并将其作为 props 传递给组件。 71 | 72 | ### 最佳实践 73 | 74 | * **不要改变原始组件**：始终返回一个新组件。 75 | * **谨慎使用 HOC**：过度使用 HOC 会使代码更难理解。 76 | * **正确命名 HOC**：使用一个描述性名称来指示 HOC 的作用。 77 | 78 | ### 替代方案 79 | 80 | * **Render props**: 一种模式，组件使用函数作为 prop 来确定要渲染的内容。 81 | * **Hooks**: 自定义 hooks 可用于在函数组件之间共享逻辑。 82 | 83 | ## 延伸阅读 84 | 85 | * [理解 React 中的高阶组件](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e) 86 | * [HOCs vs Render Props vs Hooks](https://gist.github.com/bradwestfall/4fa683c8f4fcd781a38a8d623bec20e7) 87 | -------------------------------------------------------------------------------- /questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 解释 React 中的展示组件与容器组件模式 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 在 React 中，展示组件与容器组件模式是一种设计方法，其中展示组件侧重于外观，而容器组件侧重于工作方式。展示组件负责渲染 HTML 和 CSS，而容器组件处理逻辑和状态管理。这种分离有助于维护干净和有组织的 codebase。 8 | 9 | *** 10 | 11 | ## React 中的展示组件与容器组件模式 12 | 13 | ### 展示组件 14 | 15 | 展示组件主要关注 UI。它们仅通过 props 接收数据和回调，并且很少有自己的状态（除了 UI 状态，如 `hover` 或 `active`）。它们通常是无状态函数组件，但也可以是类组件。 16 | 17 | #### 特点 18 | 19 | * 关注外观 20 | * 通过 props 接收数据和回调 21 | * 很少有自己的状态 22 | * 通常写成函数组件 23 | * 不直接使用 Redux 或其他状态管理库 24 | 25 | #### 例子 26 | 27 | ```jsx 28 | const Button = ({ onClick, label }) => ( 29 | 30 | ); 31 | ``` 32 | 33 | ### 容器组件 34 | 35 | 容器组件关注于工作方式。它们管理状态并处理业务逻辑。它们通常获取数据、处理用户交互，并将数据作为 props 传递给展示组件。 36 | 37 | #### 特点 38 | 39 | * 关注工作方式 40 | * 管理状态并处理业务逻辑 41 | * 获取数据并处理用户交互 42 | * 将数据和回调传递给展示组件 43 | * 经常使用 Redux 或其他状态管理库 44 | 45 | #### 例子 46 | 47 | ```jsx 48 | import React, { Component } from 'react'; 49 | import { connect } from 'react-redux'; 50 | import { fetchData } from './actions'; 51 | import Button from './Button'; 52 | 53 | class ButtonContainer extends Component { 54 | componentDidMount() { 55 | this.props.fetchData(); 56 | } 57 | 58 | handleClick = () => { 59 | // Handle button click 60 | }; 61 | 62 | render() { 63 | return 58 | 59 | ); 60 | }; 61 | 62 | export default ParentComponent; 63 | ``` 64 | 65 | 在此示例中： 66 | 67 | 1. `MyInput` 是一个用 `forwardRef()` 包装的函数式组件。 68 | 2. `ref` 参数被转发到 `MyInput` 内部的 `input` 元素。 69 | 3. 在 `ParentComponent` 中，使用 `useRef()` 创建一个 ref (`inputRef`)。 70 | 4. `inputRef` 被传递给 `MyInput`，允许父组件直接访问 input 元素。 71 | 5. 当单击按钮时，`focusInput` 函数使用 ref 来聚焦 input 元素。 72 | 73 | ### 重要注意事项 74 | 75 | * **仅限函数式组件**：`forwardRef()` 与函数式组件一起使用。类组件可以直接使用 ref，而无需 `forwardRef()`。 76 | * **Ref 转发**：确保 ref 被转发到 DOM 元素或类组件实例，而不是另一个函数式组件。 77 | 78 | ## 延伸阅读 79 | 80 | * [React documentation on `forwardRef()`](https://react.dev/reference/react/forwardRef) 81 | * [Using the `useRef` Hook](https://react.dev/reference/react/useRef) 82 | * [Refs and the DOM](https://react.dev/learn/manipulating-the-dom-with-refs) 83 | -------------------------------------------------------------------------------- /questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 如何优化 React Context 的性能以减少重新渲染？ 3 | --- 4 | 5 | ## 总结 6 | 7 | 要优化 React Context 的性能并减少重新渲染，可以使用诸如记忆上下文值、拆分上下文和使用选择器等技术。使用 `useMemo` 记忆上下文值可确保上下文值仅在其依赖项更改时才更改。拆分上下文允许您将状态更改隔离到应用程序的特定部分。使用像 `use-context-selector` 这样的库与选择器可以帮助您仅重新渲染实际需要更新的上下文值的组件。 8 | 9 | ```javascript 10 | const value = useMemo(() => ({ state, dispatch }), [state, dispatch]); 11 | ``` 12 | 13 | *** 14 | 15 | ## 如何优化 React Context 的性能以减少重新渲染 16 | 17 | ### 记忆上下文值 18 | 19 | 减少不必要的重新渲染的最有效方法之一是记忆上下文值。通过使用 `useMemo`，您可以确保上下文值仅在其依赖项更改时才更改。 20 | 21 | ```javascript 22 | import React, { createContext, useMemo, useState } from 'react'; 23 | 24 | const MyContext = createContext(); 25 | 26 | const MyProvider = ({ children }) => { 27 | const [state, setState] = useState(initialState); 28 | 29 | const value = useMemo(() => ({ state, setState }), [state]); 30 | 31 | return {children}; 32 | }; 33 | ``` 34 | 35 | ### 拆分上下文 36 | 37 | 另一种技术是将您的上下文拆分为多个较小的上下文。通过这种方式，您可以将状态更改隔离到应用程序的特定部分，从而减少需要重新渲染的组件数量。 38 | 39 | ```javascript 40 | const UserContext = createContext(); 41 | const ThemeContext = createContext(); 42 | 43 | const UserProvider = ({ children }) => { 44 | const [user, setUser] = useState(null); 45 | 46 | return ( 47 | 48 | {children} 49 | 50 | ); 51 | }; 52 | 53 | const ThemeProvider = ({ children }) => { 54 | const [theme, setTheme] = useState('light'); 55 | 56 | return ( 57 | 58 | {children} 59 | 60 | ); 61 | }; 62 | ``` 63 | 64 | ### 使用选择器 65 | 66 | 使用选择器可以帮助您仅重新渲染实际需要更新的上下文值的组件。像 `use-context-selector` 这样的库对此目的非常有用。 67 | 68 | ```javascript 69 | import { createContext, useContextSelector } from 'use-context-selector'; 70 | 71 | const MyContext = createContext(); 72 | 73 | const MyComponent = () => { 74 | const state = useContextSelector(MyContext, (v) => v.state); 75 | 76 | return
    {state}
    ; 77 | }; 78 | ``` 79 | 80 | ## 延伸阅读 81 | 82 | * [React context 文档](https://react.dev/learn/passing-data-deeply-with-context) 83 | * [useMemo Hook 文档](https://react.dev/reference/react/useMemo) 84 | * [use-context-selector 库](https://github.com/dai-shi/use-context-selector) 85 | -------------------------------------------------------------------------------- /questions/what-are-react-portals-used-for/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Portals 有什么用？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React Portals 用于将子项渲染到存在于父组件层级结构之外的 DOM 节点中。这对于模态框、工具提示和下拉菜单等需要突破父组件的 overflow 或 z-index 限制的场景非常有用。您可以使用 `ReactDOM.createPortal(child, container)` 创建一个 portal。 8 | 9 | *** 10 | 11 | ## React Portals 有什么用？ 12 | 13 | ### 简介 14 | 15 | React Portals 提供了一种将子项渲染到存在于父组件 DOM 结构之外的 DOM 节点中的方法。这对于某些需要突破正常父子 DOM 结构的 UI 模式特别有用。 16 | 17 | ### 用例 18 | 19 | #### 模态框 20 | 21 | 模态框通常需要在父组件之外渲染，以避免 z-index 和 overflow 问题。通过使用 portal，您可以确保模态框在 DOM 的顶层渲染，从而更容易管理其可见性和定位。 22 | 23 | ```jsx 24 | import React from 'react'; 25 | import ReactDOM from 'react-dom'; 26 | 27 | const Modal = ({ isOpen, children }) => { 28 | if (!isOpen) return null; 29 | 30 | return ReactDOM.createPortal( 31 |
    {children}
    , 32 | document.getElementById('modal-root'), 33 | ); 34 | }; 35 | ``` 36 | 37 | #### 工具提示 38 | 39 | 工具提示需要在父组件之外渲染，以避免被 overflow 设置剪切。使用 portal 允许工具提示正确地定位，而不会受到父组件样式的约束。 40 | 41 | ```jsx 42 | import React from 'react'; 43 | import ReactDOM from 'react-dom'; 44 | 45 | const Tooltip = ({ text, targetRef }) => { 46 | const tooltipStyle = { 47 | position: 'absolute', 48 | top: targetRef.current.offsetTop, 49 | left: targetRef.current.offsetLeft, 50 | }; 51 | 52 | return ReactDOM.createPortal( 53 |
    54 | {text} 55 |
    , 56 | document.body, 57 | ); 58 | }; 59 | ``` 60 | 61 | #### 下拉菜单 62 | 63 | 下拉菜单通常需要在父组件之外渲染，以避免被 overflow 设置剪切。使用 portal 允许下拉菜单正确地定位，而不会受到父组件样式的约束。 64 | 65 | ```jsx 66 | import React from 'react'; 67 | import ReactDOM from 'react-dom'; 68 | 69 | const Dropdown = ({ isOpen, children }) => { 70 | if (!isOpen) return null; 71 | 72 | return ReactDOM.createPortal( 73 |
    {children}
    , 74 | document.body, 75 | ); 76 | }; 77 | ``` 78 | 79 | ### 如何创建 portal 80 | 81 | 要创建一个 portal，您可以使用 `ReactDOM.createPortal` 方法。此方法接受两个参数：要渲染的子元素和要将其渲染到的 DOM 节点。 82 | 83 | ```jsx 84 | ReactDOM.createPortal(child, container); 85 | ``` 86 | 87 | ### 优点 88 | 89 | * **突破父级约束**：Portals 允许您在父组件的 DOM 层次结构之外渲染组件，这对于避免 z-index 和 overflow 问题很有用。 90 | * **改进的可访问性**：通过在 DOM 的顶层渲染模态框和工具提示等组件，您可以确保它们更容易被屏幕阅读器和其他辅助技术访问。 91 | * **简化样式**：通过在父组件之外渲染组件，您可以避免复杂的 CSS 规则，并确保组件的样式正确。 92 | 93 | ## 延伸阅读 94 | 95 | * [React createPortal documentation](https://react.dev/reference/react-dom/createPortal) 96 | * [Building a modal in React with React Portals](https://blog.logrocket.com/build-modal-with-react-portals/) 97 | -------------------------------------------------------------------------------- /questions/what-is-the-flux-pattern-and-what-are-its-benefits/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 什么是 Flux 模式以及它的好处？ 3 | --- 4 | 5 | ## 总结 6 | 7 | Flux 模式是一种用于管理应用程序状态（尤其是在 React 生态系统中）的架构设计。它强制执行单向数据流，从而更容易管理和调试应用程序状态。 8 | 9 | * **核心组件**： 10 | * **调度器**：管理操作并将它们分派到存储。 11 | * **存储**：保存应用程序的状态和逻辑。 12 | * **操作**：从应用程序发送到调度器的信息负载。 13 | * **视图**：当存储更新时重新渲染的 React 组件。 14 | * **好处**： 15 | * 由于单向数据流，状态管理可预测。 16 | * 改进的调试和测试。 17 | * 关注点清晰分离。 18 | 19 | 示例流程： 20 | 21 | 1. 用户与 **视图** 交互。 22 | 2. **操作** 被触发并由 **调度器** 分派。 23 | 3. **存储** 处理操作并更新其状态。 24 | 4. **视图** 根据更新后的状态重新渲染。 25 | 26 | *** 27 | 28 | ## 什么是 Flux 模式？ 29 | 30 | ### 概述 31 | 32 | Flux 是 Facebook 引入的一种设计模式，用于管理 React 应用程序中的数据流。它强制执行单向数据流，其中数据通过特定组件在一个方向上流动： 33 | 34 | 1. **调度器**：充当中央枢纽，将操作分派到存储。 35 | 2. **存储**：管理应用程序的状态并包含业务逻辑。 36 | 3. **操作**：表示发送到调度器的信息负载。 37 | 4. **视图**：由 React 组件组成，这些组件监听存储的变化并相应地重新渲染。 38 | 39 | 这种结构简化了状态管理，特别是对于复杂的应用程序，通过确保数据以可预测和可追踪的方式流动。 40 | 41 | ### 单向数据流 42 | 43 | 与数据可以双向流动的传统 MVC 模式不同，Flux 的单向流确保了一致性： 44 | 45 | 1. 用户交互触发 **操作**。 46 | 2. **操作** 被发送到 **调度器**，后者将它们转发到 **存储**。 47 | 3. **存储** 更新其状态并通知 **视图** 重新渲染。 48 | 49 | ### 代码示例 50 | 51 | ```javascript 52 | const Dispatcher = require('flux').Dispatcher; 53 | const dispatcher = new Dispatcher(); 54 | 55 | // Action 56 | const action = { 57 | type: 'INCREMENT', 58 | payload: { amount: 1 }, 59 | }; 60 | 61 | dispatcher.dispatch(action); 62 | 63 | // Store 64 | class CounterStore { 65 | constructor() { 66 | this.count = 0; 67 | dispatcher.register((action) => { 68 | if (action.type === 'INCREMENT') { 69 | this.count += action.payload.amount; 70 | console.log(`Count: ${this.count}`); 71 | } 72 | }); 73 | } 74 | } 75 | const store = new CounterStore(); 76 | 77 | // Dispatching an action 78 | dispatcher.dispatch({ type: 'INCREMENT', payload: { amount: 1 } }); 79 | ``` 80 | 81 | ## Flux 模式的优点 82 | 83 | ### 可预测的状态管理 84 | 85 | 单向数据流确保了应用程序的状态转换清晰且可预测，从而更容易理解和调试。 86 | 87 | ### 改进调试和测试 88 | 89 | * 每个动作代表一个离散事件，更容易追踪应用程序中的变化。 90 | * 存储包含纯逻辑，可以独立于视图进行单元测试。 91 | 92 | ### 可扩展性 93 | 94 | * 随着应用程序的增长，Flux 模式有助于保持清晰的结构。 95 | * 解耦组件允许模块化开发。 96 | 97 | ### 关注点清晰分离 98 | 99 | * 动作封装事件和有效载荷。 100 | * 存储处理状态和业务逻辑。 101 | * 视图侧重于渲染 UI。 102 | 103 | ### 与 React 的兼容性 104 | 105 | Flux 的单向数据流与 React 的声明式组件模型完美契合，实现无缝集成。 106 | 107 | ## 延伸阅读 108 | 109 | * [Flux 官方文档](https://facebookarchive.github.io/flux/) 110 | * [Redux Prior Art – Flux](https://redux.js.org/understanding/history-and-design/prior-art#flux) 111 | -------------------------------------------------------------------------------- /questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: What are the benefits of using hooks in React? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like `useState` and `useEffect` are commonly used to manage state and side effects in functional components. 8 | 9 | --- 10 | 11 | ## Benefits of using hooks in React 12 | 13 | ### Simplified state management 14 | 15 | Hooks like `useState` allow you to add state to functional components without converting them to class components. This makes the code more concise and easier to read. 16 | 17 | ```javascript 18 | const [count, setCount] = useState(0); 19 | ``` 20 | 21 | ### Improved code readability 22 | 23 | Hooks help in breaking down complex components into smaller, reusable pieces of logic. This makes the code more modular and easier to understand. 24 | 25 | ### Reusable logic 26 | 27 | Custom hooks allow you to extract and reuse stateful logic across multiple components. This promotes code reuse and reduces duplication. 28 | 29 | ```javascript 30 | function useCustomHook() { 31 | const [state, setState] = useState(initialState); 32 | // Custom logic here 33 | return [state, setState]; 34 | } 35 | ``` 36 | 37 | ### Reduced need for lifecycle methods 38 | 39 | Hooks like `useEffect` can replace lifecycle methods such as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`. This simplifies the component lifecycle management. 40 | 41 | ```javascript 42 | useEffect(() => { 43 | // Side effect logic here 44 | return () => { 45 | // Cleanup logic here 46 | }; 47 | }, [dependencies]); 48 | ``` 49 | 50 | ### Better separation of concerns 51 | 52 | Hooks allow you to separate concerns by grouping related logic together. This makes the codebase more maintainable and easier to debug. 53 | 54 | ### Enhanced testing 55 | 56 | Functional components with hooks are generally easier to test compared to class components. Hooks can be tested in isolation, making unit tests more straightforward. 57 | 58 | ## Further reading 59 | 60 | - [React Hooks documentation](https://react.dev/reference/react/hooks) 61 | - [Using the State Hook](https://react.dev/reference/react/useState) 62 | - [Using the Effect Hook](https://react.dev/reference/react/useEffect) 63 | - [Building Your Own Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) 64 | -------------------------------------------------------------------------------- /questions/what-is-react-suspense-and-what-does-it-enable/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 什么是 React Suspense 以及它能做什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React Suspense 是一项功能，允许您更优雅地处理 React 组件中的异步操作。它使您能够在等待加载某些内容（例如数据获取或代码拆分）时显示回退内容。您可以将其与 `React.lazy` 一起用于代码拆分，并与 `react-query` 等库一起用于数据获取。 8 | 9 | ```jsx 10 | const LazyComponent = React.lazy(() => import('./LazyComponent')); 11 | 12 | function MyComponent() { 13 | return ( 14 | Loading...}> 15 | 16 | 17 | ); 18 | } 19 | ``` 20 | 21 | *** 22 | 23 | ## 什么是 React Suspense 以及它能做什么？ 24 | 25 | ### React Suspense 简介 26 | 27 | React Suspense 是 React 团队引入的一项功能，旨在帮助以更具声明性的方式管理异步操作。它允许您在等待某些异步操作完成（例如数据获取或代码拆分）时指定加载状态（回退）。 28 | 29 | ### 使用 React.lazy 进行代码拆分 30 | 31 | React Suspense 的主要用例之一是代码拆分。代码拆分允许您按需加载应用程序的各个部分，这可以显着提高应用程序的初始加载时间。 32 | 33 | ```jsx 34 | import React, { Suspense } from 'react'; 35 | 36 | const LazyComponent = React.lazy(() => import('./LazyComponent')); 37 | 38 | function MyComponent() { 39 | return ( 40 | Loading...}> 41 | 42 | 43 | ); 44 | } 45 | ``` 46 | 47 | 在此示例中，`React.lazy` 用于动态导入 `LazyComponent`。`Suspense` 组件包装了延迟加载的组件，并提供了一个回退 UI (`
    Loading...
    `)，用于在加载组件时显示。 48 | 49 | ### 使用 Suspense 获取数据 50 | 51 | React Suspense 也可以用于数据获取，尽管此功能仍处于实验阶段，需要额外的库，如 `react-query` 或 `Relay`。 52 | 53 | ```jsx 54 | import React, { Suspense } from 'react'; 55 | import { useQuery } from 'react-query'; 56 | 57 | function fetchData() { 58 | return fetch('https://api.example.com/data').then((response) => 59 | response.json(), 60 | ); 61 | } 62 | 63 | function DataComponent() { 64 | const { data } = useQuery('data', fetchData); 65 | return
    {data}
    ; 66 | } 67 | 68 | function MyComponent() { 69 | return ( 70 | Loading data...}> 71 | 72 | 73 | ); 74 | } 75 | ``` 76 | 77 | 在此示例中，`react-query` 用于获取数据，而 `Suspense` 在加载数据时提供回退 UI。 78 | 79 | ### React Suspense 的好处 80 | 81 | * **改善用户体验**：通过显示回退内容，您可以在等待异步操作完成时让用户保持参与。 82 | * **简化代码**：Suspense 允许您以声明方式处理加载状态，从而减少了对复杂状态管理的需求。 83 | * **更好的性能**：使用 `React.lazy` 进行代码拆分可以显着减少应用程序的初始加载时间。 84 | 85 | ## 延伸阅读 86 | 87 | * [React Suspense documentation](https://react.dev/reference/react/Suspense) 88 | * [React.lazy documentation](https://react.dev/reference/react/lazy) 89 | * [React Query documentation](https://react-query.tanstack.com/) 90 | * [Relay documentation](https://relay.dev/docs/next/guides/relay-resolvers/suspense/) 91 | -------------------------------------------------------------------------------- /questions/why-does-react-recommend-against-mutating-state/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Why does React recommend against mutating state? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React recommends against mutating state because it can lead to unexpected behavior and bugs. React relies on state immutability to efficiently determine when to re-render components. When state is mutated directly, React may not detect the changes, leading to stale or incorrect UI updates. Instead, always create a new state object using methods like `setState` or the `useState` hook. 8 | 9 | --- 10 | 11 | ## Why does React recommend against mutating state? 12 | 13 | ### React's rendering mechanism 14 | 15 | React uses a virtual DOM to optimize rendering. When state changes, React compares the new virtual DOM with the previous one to determine the minimal set of changes needed to update the actual DOM. This process is called reconciliation. 16 | 17 | ### Immutability and state comparison 18 | 19 | React relies on immutability to efficiently detect changes. When state is immutable, React can quickly determine if a component needs to re-render by comparing references. If the references are different, React knows that the state has changed. 20 | 21 | ### Problems with mutating state 22 | 23 | 1. **Stale UI updates**: Directly mutating state can lead to React not detecting changes, resulting in the UI not updating as expected. 24 | 2. **Debugging difficulties**: Mutating state directly can make it harder to track state changes and debug issues. 25 | 3. **Unexpected behavior**: Mutating state can lead to unpredictable behavior, especially when multiple components depend on the same state. 26 | 27 | ### How to update state correctly 28 | 29 | Instead of mutating state directly, always create a new state object. For example, when using the `useState` hook: 30 | 31 | ```javascript 32 | const [state, setState] = useState(initialState); 33 | 34 | // Incorrect: Directly mutating state 35 | state.value = newValue; 36 | 37 | // Correct: Creating a new state object 38 | setState({ ...state, value: newValue }); 39 | ``` 40 | 41 | When using class components and `setState`: 42 | 43 | ```javascript 44 | this.setState((prevState) => ({ 45 | ...prevState, 46 | value: newValue, 47 | })); 48 | ``` 49 | 50 | ## Further reading 51 | 52 | - [React documentation on state](https://react.dev/learn/state-a-components-memory) 53 | - [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) 54 | - [Why not to mutate state in React](https://daveceddia.com/why-not-modify-react-state-directly/) 55 | -------------------------------------------------------------------------------- /questions/what-does-the-dependency-array-of-useeffect-affect/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: useEffect 的依赖项数组会影响什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | useEffect 的依赖项数组决定了 effect 应该何时重新运行。如果数组为空，则 effect 仅在初始渲染后运行一次。如果它包含变量，则 effect 在任何这些变量更改时运行。如果省略，则 effect 在每次渲染后运行。 8 | 9 | *** 10 | 11 | ## useEffect 的依赖项数组会影响什么？ 12 | 13 | ### useEffect 简介 14 | 15 | React 中的 `useEffect` 钩子用于在函数组件中执行副作用。这些副作用可以包括数据获取、订阅或手动更改 DOM。`useEffect` 钩子接受两个参数：一个包含副作用逻辑的函数和一个可选的依赖项数组。 16 | 17 | ### 依赖项数组 18 | 19 | 依赖项数组是 `useEffect` 钩子的第二个参数。它是一个 effect 所依赖的值的数组。React 使用此数组来确定何时重新运行 effect。 20 | 21 | ```javascript 22 | useEffect(() => { 23 | // 在这里编写副作用逻辑 24 | }, [dependency1, dependency2]); 25 | ``` 26 | 27 | ### 依赖项数组如何影响 `useEffect` 28 | 29 | 1. **空依赖项数组 (`[]`)**: 30 | 31 | * effect 仅在初始渲染后运行一次。 32 | * 这类似于类组件中 `componentDidMount` 的行为。 33 | 34 | ```javascript 35 | useEffect(() => { 36 | // 此代码仅在初始渲染后运行一次 37 | }, []); 38 | ``` 39 | 40 | 2. **带有变量的依赖项数组**: 41 | 42 | * effect 在初始渲染后运行，并在任何指定的依赖项更改时运行。 43 | * React 对依赖项进行浅层比较，以确定它们是否已更改。 44 | 45 | ```javascript 46 | useEffect(() => { 47 | // 此代码在初始渲染后运行，并在 dependency1 或 dependency2 更改时运行 48 | }, [dependency1, dependency2]); 49 | ``` 50 | 51 | 3. **没有依赖项数组**: 52 | 53 | * effect 在每次渲染后运行。 54 | * 如果 effect 代价高昂，这可能会导致性能问题。 55 | 56 | ```javascript 57 | useEffect(() => { 58 | // 此代码在每次渲染后运行 59 | }); 60 | ``` 61 | 62 | ### 常见陷阱 63 | 64 | 1. **过时的闭包**: 65 | 66 | * 如果你在 effect 内部使用状态或 props，而没有将它们包含在依赖项数组中，你可能会得到过时的值。 67 | * 始终将 effect 所依赖的所有状态和 props 包含在依赖项数组中。 68 | 69 | ```javascript 70 | const [count, setCount] = useState(0); 71 | 72 | useEffect(() => { 73 | const handle = setInterval(() => { 74 | console.log(count); // 如果 `count` 不在依赖项数组中，这可能会记录过时的值 75 | }, 1000); 76 | 77 | return () => clearInterval(handle); 78 | }, [count]); // 确保 `count` 包含在依赖项数组中 79 | ``` 80 | 81 | 2. **函数作为依赖项**: 82 | 83 | * 函数在每次渲染时都会重新创建，因此将它们包含在依赖项数组中可能会导致 effect 运行的频率超过必要次数。 84 | * 如果需要将函数包含在依赖项数组中，请使用 `useCallback` 来记忆化函数。 85 | 86 | ```javascript 87 | const handleClick = useCallback(() => { 88 | // 处理点击事件 89 | }, []); 90 | 91 | useEffect(() => { 92 | // 此 effect 不会不必要地重新运行，因为 `handleClick` 已被记忆化 93 | }, [handleClick]); 94 | ``` 95 | 96 | ## 延伸阅读 97 | 98 | * [React Docs: Using the Effect Hook](https://react.dev/reference/react/useEffect) 99 | * [React Docs: Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks) 100 | * [Overreacted: A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) 101 | -------------------------------------------------------------------------------- /questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的 `useId` Hook 是什么？应该在什么时候使用？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 `useId` Hook 用于为组件内的元素生成唯一的 ID。这对于可访问性目的特别有用，例如将表单输入与其标签链接起来。它确保 ID 在整个应用程序中是唯一的，即使组件被多次渲染。 8 | 9 | ```javascript 10 | import { useId } from 'react'; 11 | 12 | function MyComponent() { 13 | const id = useId(); 14 | return ( 15 |
    16 | 17 | 18 |
    19 | ); 20 | } 21 | ``` 22 | 23 | *** 24 | 25 | ## React 中的 `useId` Hook 是什么？应该在什么时候使用？ 26 | 27 | ### `useId` 简介 28 | 29 | `useId` Hook 是 React 18 中引入的内置 React Hook。它旨在生成可在组件内使用的唯一 ID。这对于确保 ID 在整个应用程序中是唯一的特别有用，即使组件被多次渲染。 30 | 31 | ### 什么时候使用 `useId` 32 | 33 | #### 可访问性 34 | 35 | `useId` 的主要用例之一是改善可访问性。例如，在创建表单元素时，使用标签上的 `htmlFor` 属性和输入上的 `id` 属性将标签链接到其对应的输入非常重要。`useId` Hook 确保这些 ID 是唯一的，从而防止任何潜在的冲突。 36 | 37 | ```javascript 38 | import { useId } from 'react'; 39 | 40 | function MyComponent() { 41 | const id = useId(); 42 | return ( 43 |
    44 | 45 | 46 |
    47 | ); 48 | } 49 | ``` 50 | 51 | #### 动态组件 52 | 53 | 当您有动态渲染或多次渲染的组件时，使用 `useId` 可确保组件的每个实例都具有唯一的 ID。这可以防止多个元素最终具有相同的 ID，这可能会导致可访问性和 JavaScript 行为出现问题。 54 | 55 | ```javascript 56 | import { useId } from 'react'; 57 | 58 | function DynamicComponent() { 59 | const id = useId(); 60 | return ( 61 |
    62 | 63 | 64 |
    65 | ); 66 | } 67 | 68 | function App() { 69 | return ( 70 |
    71 | 72 | 73 |
    74 | ); 75 | } 76 | ``` 77 | 78 | ### `useId` 的工作原理 79 | 80 | `useId` Hook 生成可用作 ID 的唯一字符串。此字符串在整个应用程序中是唯一的，即使组件被多次渲染，也能确保不会发生冲突。该 Hook 不接受任何参数并返回一个字符串。 81 | 82 | ```javascript 83 | import { useId } from 'react'; 84 | 85 | function ExampleComponent() { 86 | const id = useId(); 87 | console.log(id); // Outputs a unique ID string 88 | return
    Unique ID Component
    ; 89 | } 90 | ``` 91 | 92 | ### 最佳实践 93 | 94 | * **用于可访问性**：将标签链接到输入时，始终使用 `useId` 以确保可访问性。 95 | * **避免硬编码 ID**：不要硬编码 ID，而是使用 `useId` 动态生成它们。 96 | * **一致使用**：在整个应用程序中一致地使用 `useId` 以避免 ID 冲突。 97 | 98 | ## 延伸阅读 99 | 100 | * [React documentation on `useId`](https://react.dev/reference/react/useId) 101 | * [MDN Web Docs on accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) 102 | * [React 18 release notes](https://react.dev/blog/2022/03/29/react-v18) 103 | -------------------------------------------------------------------------------- /questions/how-do-you-test-react-applications/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 如何测试 React 应用程序？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 要测试 React 应用程序，您可以使用 Jest 和 React Testing Library 等工具。Jest 是一个与 React 配合良好的 JavaScript 测试框架，而 React Testing Library 提供了以类似于用户与组件交互的方式测试 React 组件的实用程序。您可以使用 Cypress 等工具为单个组件编写单元测试、为组件交互编写集成测试以及编写端到端测试。 8 | 9 | *** 10 | 11 | ## 如何测试 React 应用程序？ 12 | 13 | ### 单元测试 14 | 15 | 单元测试涉及单独测试各个组件。Jest 是一个用于单元测试 React 应用程序的常用选择。它提供了一个测试运行器、断言库和模拟功能。 16 | 17 | #### 示例 18 | 19 | ```javascript 20 | import React from 'react'; 21 | import { render, screen } from '@testing-library/react'; 22 | import '@testing-library/jest-dom/extend-expect'; 23 | import MyComponent from './MyComponent'; 24 | 25 | test('renders the component with the correct text', () => { 26 | render(); 27 | expect(screen.getByText('Hello, World!')).toBeInTheDocument(); 28 | }); 29 | ``` 30 | 31 | ### 集成测试 32 | 33 | 集成测试涉及测试多个组件之间的交互。React Testing Library 对此很有用，因为它允许您渲染组件并像用户一样与它们交互。 34 | 35 | #### 示例 36 | 37 | ```javascript 38 | import React from 'react'; 39 | import { render, fireEvent, screen } from '@testing-library/react'; 40 | import '@testing-library/jest-dom/extend-expect'; 41 | import ParentComponent from './ParentComponent'; 42 | 43 | test('updates child component when parent state changes', () => { 44 | render(); 45 | fireEvent.click(screen.getByText('Update Child')); 46 | expect(screen.getByText('Child Updated')).toBeInTheDocument(); 47 | }); 48 | ``` 49 | 50 | ### 端到端测试 51 | 52 | 端到端 (E2E) 测试涉及从用户的角度测试整个应用程序流程。Cypress 是一个用于 React 应用程序中 E2E 测试的常用工具。 53 | 54 | #### 示例 55 | 56 | ```javascript 57 | describe('My Application', () => { 58 | it('should allow a user to log in', () => { 59 | cy.visit('/login'); 60 | cy.get('input[name="username"]').type('user'); 61 | cy.get('input[name="password"]').type('password'); 62 | cy.get('button[type="submit"]').click(); 63 | cy.url().should('include', '/dashboard'); 64 | }); 65 | }); 66 | ``` 67 | 68 | ### 快照测试 69 | 70 | 快照测试涉及捕获组件的渲染输出并将其与已保存的快照进行比较。Jest 提供了对快照测试的内置支持。 71 | 72 | #### 示例 73 | 74 | ```javascript 75 | import React from 'react'; 76 | import renderer from 'react-test-renderer'; 77 | import MyComponent from './MyComponent'; 78 | 79 | test('matches the snapshot', () => { 80 | const tree = renderer.create().toJSON(); 81 | expect(tree).toMatchSnapshot(); 82 | }); 83 | ``` 84 | 85 | ## 延伸阅读 86 | 87 | * [Jest 文档](https://jestjs.io/docs/getting-started) 88 | * [React Testing Library 文档](https://testing-library.com/docs/react-testing-library/intro) 89 | * [Cypress 文档](https://docs.cypress.io/guides/overview/why-cypress) 90 | * [使用 Jest 进行快照测试](https://jestjs.io/docs/snapshot-testing) 91 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 受控组件和非受控 React 组件有什么区别？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的受控组件是指表单数据由组件的状态处理的组件。状态是唯一的真理来源，对表单输入的任何更改都通过事件处理程序进行管理。另一方面，非受控组件在其内部存储自己的状态，并依赖于 refs 来访问表单值。受控组件提供更多控制，更容易测试，而非受控组件对于基本用例来说可能更易于实现。 8 | 9 | *** 10 | 11 | ## 受控组件和非受控 React 组件有什么区别？ 12 | 13 | ### 受控组件 14 | 15 | 受控组件是指表单数据由组件的状态处理的组件。状态是唯一的真理来源，对表单输入的任何更改都通过事件处理程序进行管理。 16 | 17 | #### 示例 18 | 19 | ```jsx 20 | class ControlledComponent extends React.Component { 21 | constructor(props) { 22 | super(props); 23 | this.state = { value: '' }; 24 | } 25 | 26 | handleChange = (event) => { 27 | this.setState({ value: event.target.value }); 28 | }; 29 | 30 | handleSubmit = (event) => { 31 | alert('A name was submitted: ' + this.state.value); 32 | event.preventDefault(); 33 | }; 34 | 35 | render() { 36 | return ( 37 |
    38 | 46 | 47 |
    48 | ); 49 | } 50 | } 51 | ``` 52 | 53 | ### 非受控组件 54 | 55 | 非受控组件在其内部存储自己的状态，并依赖于 refs 来访问表单值。这种方法更类似于传统的 HTML 表单元素。 56 | 57 | #### 示例 58 | 59 | ```jsx 60 | class UncontrolledComponent extends React.Component { 61 | constructor(props) { 62 | super(props); 63 | this.inputRef = React.createRef(); 64 | } 65 | 66 | handleSubmit = (event) => { 67 | alert('A name was submitted: ' + this.inputRef.current.value); 68 | event.preventDefault(); 69 | }; 70 | 71 | render() { 72 | return ( 73 |
    74 | 78 | 79 |
    80 | ); 81 | } 82 | } 83 | ``` 84 | 85 | ### 主要区别 86 | 87 | #### 状态管理 88 | 89 | * 受控组件：状态由 React 组件管理。 90 | * 非受控组件：状态由 DOM 管理。 91 | 92 | #### 数据流 93 | 94 | * 受控组件：数据从组件的状态流向输入元素。 95 | * 非受控组件：数据通过 refs 从输入元素流向组件。 96 | 97 | #### 用例 98 | 99 | * 受控组件：当您需要强制验证、有条件地禁用/启用输入或执行其他复杂交互时，首选受控组件。 100 | * 非受控组件：适用于简单表单或需要与非 React 代码集成时。 101 | 102 | ## 延伸阅读 103 | 104 | * [React documentation on controlled and uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) 105 | * [React refs and the DOM](https://react.dev/learn/manipulating-the-dom-with-refs) 106 | -------------------------------------------------------------------------------- /questions/what-is-jsx-and-how-does-it-work/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: What is JSX and how does it work? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components by allowing you to write what looks like HTML directly in your JavaScript code. Under the hood, JSX is transformed into JavaScript function calls, typically using a tool like Babel. For example, `
    Hello, world!
    ` in JSX is transformed into `React.createElement('div', null, 'Hello, world!')`. 8 | 9 | --- 10 | 11 | ## What is JSX and how does it work? 12 | 13 | ### What is JSX? 14 | 15 | JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX is primarily used with React to describe what the UI should look like. 16 | 17 | ### How does JSX work? 18 | 19 | JSX is not valid JavaScript by itself. It needs to be transformed into regular JavaScript before it can be executed by the browser. This transformation is usually done by a tool like Babel. 20 | 21 | ### JSX syntax 22 | 23 | JSX allows you to write HTML-like tags directly in your JavaScript code. For example: 24 | 25 | ```jsx 26 | const element =

    Hello, world!

    ; 27 | ``` 28 | 29 | ### Transformation process 30 | 31 | When you write JSX, it is transformed into JavaScript function calls. For example, the JSX code: 32 | 33 | ```jsx 34 | const element =

    Hello, world!

    ; 35 | ``` 36 | 37 | is transformed into: 38 | 39 | ```javascript 40 | const element = React.createElement('h1', null, 'Hello, world!'); 41 | ``` 42 | 43 | ### Embedding expressions 44 | 45 | You can embed JavaScript expressions inside JSX using curly braces `{}`. For example: 46 | 47 | ```jsx 48 | const name = 'John'; 49 | const element =

    Hello, {name}!

    ; 50 | ``` 51 | 52 | ### Attributes in JSX 53 | 54 | You can use quotes to specify string literals as attributes and curly braces to embed JavaScript expressions. For example: 55 | 56 | ```jsx 57 | const element = User Avatar; 58 | ``` 59 | 60 | ### JSX is an expression 61 | 62 | After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means you can use JSX inside if statements, for loops, and assign it to variables. 63 | 64 | ### JSX prevents injection attacks 65 | 66 | By default, React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that's not explicitly written in your application. 67 | 68 | ## Further reading 69 | 70 | - [React JSX documentation](https://react.dev/learn/writing-markup-with-jsx) 71 | - [Babel](https://babeljs.io/) 72 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: What is the difference between React Node, React Element, and a React Component? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | A React Node is any renderable unit in React, such as an element, string, number, or `null`. A React Element is an immutable object describing what to render, created using JSX or `React.createElement`. A React Component is a function or class that returns React Elements, enabling the creation of reusable UI pieces. 8 | 9 | --- 10 | 11 | ## React node 12 | 13 | A **React Node** is the most basic unit in the React rendering system. It can be a React element, a string, a number, a boolean, or `null`. Essentially, anything that can be rendered in React is a React Node. 14 | 15 | ```jsx 16 | const stringNode = 'Hello, world!'; 17 | const numberNode = 123; 18 | const booleanNode = true; 19 | const nullNode = null; 20 | const elementNode =
    Hello, world!
    ; 21 | ``` 22 | 23 | ## React element 24 | 25 | A **React Element** is an immutable, plain object representing what you want to see on the screen. It includes the type (such as a string for HTML tags or a React component), props, and children. React elements are created using JSX syntax or `React.createElement`. 26 | 27 | ```jsx 28 | const element =
    Hello, world!
    ; 29 | 30 | // Using React.createElement 31 | const element = React.createElement( 32 | 'div', 33 | { className: 'greeting' }, 34 | 'Hello, world!', 35 | ); 36 | ``` 37 | 38 | ## React component 39 | 40 | A **React Component** is a reusable piece of the UI that can accept inputs (props) and returns React elements describing the UI. There are two types of components: function components and class components. 41 | 42 | - **Function components**: These are simpler and are just functions that take props as an argument and return a React element. 43 | 44 | ```jsx 45 | function Welcome(props) { 46 | return

    Hello, {props.name}

    ; 47 | } 48 | ``` 49 | 50 | - **Class components**: These are ES6 classes that extend `React.Component` and must have a `render` method returning a React element. 51 | ```jsx 52 | class Welcome extends React.Component { 53 | render() { 54 | return

    Hello, {this.props.name}

    ; 55 | } 56 | } 57 | ``` 58 | 59 | ## Further reading 60 | 61 | - [React documentation: Render and commit](https://react.dev/learn/render-and-commit) 62 | - [React documentation: Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component) 63 | - [React documentation: Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx) 64 | - [React documentation: State: A Component's Memory](https://react.dev/learn/state-a-components-memory) 65 | -------------------------------------------------------------------------------- /questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的 `useReducer` Hook 是什么？应该在什么时候使用它？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 `useReducer` Hook 用于在函数组件中管理复杂的 state 逻辑。它是 `useState` 的替代方案，当 state 具有多个子值或下一个 state 依赖于前一个 state 时，它特别有用。它接受一个 reducer 函数和一个初始 state 作为参数，并返回当前 state 和一个 dispatch 函数。 8 | 9 | ```javascript 10 | const [state, dispatch] = useReducer(reducer, initialState); 11 | ``` 12 | 13 | 当您有涉及多个子值的复杂 state 逻辑，或者下一个 state 依赖于前一个 state 时，请使用 `useReducer`。 14 | 15 | *** 16 | 17 | ## React 中的 `useReducer` Hook 是什么？应该在什么时候使用它？ 18 | 19 | ### `useReducer` 简介 20 | 21 | `useReducer` Hook 是一个 React Hook，用于在函数组件中管理 state。它是 `useState` Hook 的替代方案，特别适用于管理更复杂的 state 逻辑。`useReducer` Hook 类似于 JavaScript 数组中的 `reduce` 函数，您可以使用一个 reducer 函数来确定 state 应该如何响应操作而改变。 22 | 23 | ### 语法 24 | 25 | `useReducer` Hook 接受两个参数：一个 reducer 函数和一个初始 state。它返回一个包含当前 state 和一个 dispatch 函数的数组。 26 | 27 | ```javascript 28 | const [state, dispatch] = useReducer(reducer, initialState); 29 | ``` 30 | 31 | ### Reducer 函数 32 | 33 | reducer 函数是一个纯函数，它接受当前 state 和一个 action 作为参数，并返回新的 state。action 是一个对象，通常具有一个 `type` 属性和一个可选的 `payload`。 34 | 35 | ```javascript 36 | function reducer(state, action) { 37 | switch (action.type) { 38 | case 'increment': 39 | return { count: state.count + 1 }; 40 | case 'decrement': 41 | return { count: state.count - 1 }; 42 | default: 43 | throw new Error(); 44 | } 45 | } 46 | ``` 47 | 48 | ### 使用示例 49 | 50 | 这是一个使用 `useReducer` 管理计数器 state 的简单示例： 51 | 52 | ```javascript 53 | import React, { useReducer } from 'react'; 54 | 55 | const initialState = { count: 0 }; 56 | 57 | function reducer(state, action) { 58 | switch (action.type) { 59 | case 'increment': 60 | return { count: state.count + 1 }; 61 | case 'decrement': 62 | return { count: state.count - 1 }; 63 | default: 64 | throw new Error(); 65 | } 66 | } 67 | 68 | function Counter() { 69 | const [state, dispatch] = useReducer(reducer, initialState); 70 | 71 | return ( 72 |
    73 |

    Count: {state.count}

    74 | 75 | 76 |
    77 | ); 78 | } 79 | 80 | export default Counter; 81 | ``` 82 | 83 | ### 什么时候使用 `useReducer` 84 | 85 | * **复杂的 state 逻辑**：当您有涉及多个子值的复杂 state 逻辑，或者下一个 state 依赖于前一个 state 时，请使用 `useReducer`。 86 | * **状态管理**：当您需要更可预测的状态管理模式（类似于 Redux）时，它很有用。 87 | * **性能优化**：`useReducer` 可以通过避免不必要的重新渲染来帮助优化某些情况下的性能。 88 | 89 | ## 延伸阅读 90 | 91 | * [React documentation on `useReducer`](https://react.dev/reference/react/useReducer) 92 | * [Using the `useReducer` hook](https://react.dev/learn/scaling-up-with-reducer-and-context) 93 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | 132 | # langnostic 133 | .langnostic 134 | -------------------------------------------------------------------------------- /questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: What is the consequence of using array indices as the value for `key`s in React? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | Using array indices as the value for `key`s in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for `key`s to ensure React can efficiently manage and update the DOM. 8 | 9 | --- 10 | 11 | ## Consequence of using array indices as the value for `key`s in React 12 | 13 | ### Performance issues 14 | 15 | When array indices are used as `key`s, React may not efficiently update the DOM. If the order of items in the array changes, React will not be able to correctly identify which items have been added, removed, or moved. This can lead to unnecessary re-renders and decreased performance. 16 | 17 | ### Incorrect component updates 18 | 19 | Using array indices as `key`s can cause bugs in your application. For example, if the order of items changes, React may reuse the same component instances for different items, leading to incorrect state and props being passed to components. This can result in unexpected behavior and hard-to-debug issues. 20 | 21 | ### Example 22 | 23 | Consider the following example where array indices are used as `key`s: 24 | 25 | ```jsx 26 | const items = ['Item 1', 'Item 2', 'Item 3']; 27 | 28 | const List = () => ( 29 |
      30 | {items.map((item, index) => ( 31 |
    • {item}
      • 32 | ))} 33 |
    34 | ); 35 | ``` 36 | 37 | If the order of `items` changes, React may not correctly update the DOM, leading to performance issues and potential bugs. 38 | 39 | ### Better approach 40 | 41 | Instead of using array indices, use unique identifiers for `key`s. This ensures that React can efficiently manage and update the DOM. 42 | 43 | ```jsx 44 | const items = [ 45 | { id: 1, name: 'Item 1' }, 46 | { id: 2, name: 'Item 2' }, 47 | { id: 3, name: 'Item 3' }, 48 | ]; 49 | 50 | const List = () => ( 51 |
      52 | {items.map((item) => ( 53 |
    • {item.name}
      • 54 | ))} 55 |
    56 | ); 57 | ``` 58 | 59 | In this example, using `item.id` as the `key` ensures that React can correctly identify and update items when the order changes. 60 | 61 | ## Further reading 62 | 63 | - [React documentation on keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) 64 | - [Why using array index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) 65 | - [React performance optimization with keys](https://kentcdodds.com/blog/understanding-reacts-key-prop) 66 | -------------------------------------------------------------------------------- /questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中的 `useRef` 钩子是什么？应该在什么时候使用它？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 中的 `useRef` 钩子用于创建一个在渲染之间保持不变的可变对象。它可用于直接访问和操作 DOM 元素，存储在更新时不导致重新渲染的可变值，以及保留对值的引用而不触发重新渲染。例如，您可以使用 `useRef` 来聚焦输入元素： 8 | 9 | ```javascript 10 | import React, { useRef, useEffect } from 'react'; 11 | 12 | function TextInputWithFocusButton() { 13 | const inputEl = useRef(null); 14 | 15 | useEffect(() => { 16 | inputEl.current.focus(); 17 | }, []); 18 | 19 | return ; 20 | } 21 | ``` 22 | 23 | *** 24 | 25 | ## React 中的 `useRef` 钩子是什么？应该在什么时候使用它？ 26 | 27 | ### `useRef` 简介 28 | 29 | React 中的 `useRef` 钩子是一个函数，它返回一个可变的 `ref` 对象，其 `.current` 属性被初始化为传递的参数 (`initialValue`)。返回的对象将在组件的整个生命周期内保持不变。 30 | 31 | ### `useRef` 的关键用例 32 | 33 | #### 访问和操作 DOM 元素 34 | 35 | `useRef` 的主要用例之一是直接访问和操作 DOM 元素。当您需要以 React 的声明式方法无法轻松实现的方式与 DOM 交互时，这特别有用。 36 | 37 | 例子： 38 | 39 | ```javascript 40 | import React, { useRef, useEffect } from 'react'; 41 | 42 | function TextInputWithFocusButton() { 43 | const inputEl = useRef(null); 44 | 45 | useEffect(() => { 46 | inputEl.current.focus(); 47 | }, []); 48 | 49 | return ; 50 | } 51 | ``` 52 | 53 | 在此示例中，`useRef` 钩子用于创建对输入元素的引用，而 `useEffect` 钩子用于在组件挂载时聚焦输入元素。 54 | 55 | #### 存储可变值 56 | 57 | `useRef` 也可以用于存储在更新时不会导致重新渲染的可变值。这对于跟踪随时间变化但不需要触发重新渲染的值很有用。 58 | 59 | 例子： 60 | 61 | ```javascript 62 | import React, { useRef } from 'react'; 63 | 64 | function Timer() { 65 | const count = useRef(0); 66 | 67 | const increment = () => { 68 | count.current += 1; 69 | console.log(count.current); 70 | }; 71 | 72 | return ; 73 | } 74 | ``` 75 | 76 | 在此示例中，`count` 变量存储在 `useRef` 对象中，并且它的值递增，而不会导致组件重新渲染。 77 | 78 | #### 保留对值的引用 79 | 80 | `useRef` 可用于保留对值的引用，而不会触发重新渲染。这对于存储需要在渲染之间保持不变但不需要在更改时导致重新渲染的值很有用。 81 | 82 | 例子： 83 | 84 | ```javascript 85 | import React, { useRef, useState, useEffect } from 'react'; 86 | 87 | function Example() { 88 | const [count, setCount] = useState(0); 89 | const prevCountRef = useRef(); 90 | 91 | useEffect(() => { 92 | prevCountRef.current = count; 93 | }, [count]); 94 | 95 | return ( 96 |
    97 |

    Now: {count}

    98 |

    Before: {prevCountRef.current}

    99 | 100 |
    101 | ); 102 | } 103 | ``` 104 | 105 | 在这个例子中，`prevCountRef` 用于保持对 `count` 前一个值的引用，而不会导致重新渲染。 106 | 107 | ## 延伸阅读 108 | 109 | * [React documentation on `useRef`](https://react.dev/reference/react/useRef) 110 | * [Using the `useRef` hook](https://react.dev/learn/manipulating-the-dom-with-refs) 111 | -------------------------------------------------------------------------------- /questions/what-is-the-difference-between-state-and-props-in-react/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 中 state 和 props 的区别是什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | 在 React 中，`state` 是在组件内部管理并可以随时间变化的数据存储，而 `props` 是从父组件传递给子组件的只读属性。State 用于组件内变化的数据，而 props 用于将数据和事件处理程序传递给子组件。 8 | 9 | *** 10 | 11 | ## React 中 state 和 props 的区别是什么？ 12 | 13 | ### State 14 | 15 | State 是 React 组件中的一个内置对象，用于保存关于组件的数据或信息。它在组件内部进行管理，并且可以随时间变化，通常是响应用户操作或网络响应。当 state 发生变化时，组件会重新渲染以反映新的 state。 16 | 17 | * State 是组件局部的，无法在组件外部访问或修改 18 | * State 可以在类组件的构造函数中初始化，或者在函数组件中使用 `useState` hook 19 | * State 的变化是异步的，应该使用类组件中的 `setState` 方法或函数组件中 `useState` 返回的更新函数 20 | 21 | 类组件中 state 的示例： 22 | 23 | ```jsx 24 | class MyComponent extends React.Component { 25 | constructor(props) { 26 | super(props); 27 | this.state = { 28 | count: 0, 29 | }; 30 | } 31 | 32 | increment = () => { 33 | this.setState({ count: this.state.count + 1 }); 34 | }; 35 | 36 | render() { 37 | return ( 38 |
    39 |

    Count: {this.state.count}

    40 | 41 |
    42 | ); 43 | } 44 | } 45 | ``` 46 | 47 | 函数组件中 state 的示例： 48 | 49 | ```jsx 50 | import React, { useState } from 'react'; 51 | 52 | function MyComponent() { 53 | const [count, setCount] = useState(0); 54 | 55 | return ( 56 |
    57 |

    Count: {count}

    58 | 59 |
    60 | ); 61 | } 62 | ``` 63 | 64 | ### Props 65 | 66 | Props（属性的简称）是从父组件传递给子组件的只读属性。它们用于将数据和事件处理程序传递到组件树的下方。Props 是不可变的，这意味着它们不能被子组件更改。 67 | 68 | * Props 作为参数传递给子组件函数，或者作为类组件中 `this` 对象的属性 69 | * Props 允许通过向组件传递不同的数据来复用组件 70 | * Props 也可以用来传递函数，使子组件能够与父组件通信 71 | 72 | 类组件中 props 的示例： 73 | 74 | ```jsx 75 | class ParentComponent extends React.Component { 76 | render() { 77 | return ; 78 | } 79 | } 80 | 81 | class ChildComponent extends React.Component { 82 | render() { 83 | return

    {this.props.message}

    ; 84 | } 85 | } 86 | ``` 87 | 88 | 函数组件中 props 的示例： 89 | 90 | ```jsx 91 | function ParentComponent() { 92 | return ; 93 | } 94 | 95 | function ChildComponent(props) { 96 | return

    {props.message}

    ; 97 | } 98 | ``` 99 | 100 | ### 关键区别 101 | 102 | * State 在组件内部管理，而 props 从父组件传递 103 | * State 可以随时间变化，而 props 是不可变的 104 | * State 用于组件内部变化的数据，而 props 用于向子组件传递数据和事件处理程序 105 | 106 | ## 延伸阅读 107 | 108 | * [React documentation on state](https://react.dev/learn/state-a-components-memory) 109 | * [React documentation on components and props](https://react.dev/learn/passing-props-to-a-component) 110 | * [React Hooks documentation](https://react.dev/reference/react/hooks) 111 | -------------------------------------------------------------------------------- /questions/what-are-some-react-anti-patterns/zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 的一些反模式是什么？ 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React 反模式是指可能导致代码效率低下、难以维护或出现错误的实践。一些常见的反模式包括： 8 | 9 | * 直接改变状态，而不是使用 `setState` 10 | * 使用 `componentWillMount` 进行数据获取 11 | * 过度使用 `componentWillReceiveProps` 12 | * 在列表中不使用键 13 | * 在 render 中过度使用内联函数 14 | * 状态嵌套过深 15 | 16 | *** 17 | 18 | ## 常见的 React 反模式 19 | 20 | ### 直接改变状态 21 | 22 | 直接改变状态可能导致意外的行为和错误。 始终使用 `setState` 来更新状态。 23 | 24 | ```javascript 25 | // 反模式 26 | this.state.count = 1; 27 | 28 | // 正确方法 29 | this.setState({ count: 1 }); 30 | ``` 31 | 32 | ### 使用 `componentWillMount` 进行数据获取 33 | 34 | `componentWillMount` 已被弃用，不应用于数据获取。 请改用 `componentDidMount`。 35 | 36 | ```javascript 37 | // 反模式 38 | componentWillMount() { 39 | fetchData(); 40 | } 41 | 42 | // 正确方法 43 | componentDidMount() { 44 | fetchData(); 45 | } 46 | ``` 47 | 48 | ### 过度使用 `componentWillReceiveProps` 49 | 50 | `componentWillReceiveProps` 已被弃用。 请改用 `getDerivedStateFromProps` 或 `componentDidUpdate`。 51 | 52 | ```javascript 53 | // 反模式 54 | componentWillReceiveProps(nextProps) { 55 | if (nextProps.value !== this.props.value) { 56 | this.setState({ value: nextProps.value }); 57 | } 58 | } 59 | 60 | // 正确方法 61 | static getDerivedStateFromProps(nextProps, prevState) { 62 | if (nextProps.value !== prevState.value) { 63 | return { value: nextProps.value }; 64 | } 65 | return null; 66 | } 67 | ``` 68 | 69 | ### 在列表中不使用键 70 | 71 | 键可帮助 React 识别哪些项目已更改、已添加或已删除。 不使用键可能导致渲染效率低下。 72 | 73 | ```javascript 74 | // 反模式 75 | const listItems = items.map((item) =>
  • {item}
    • ); 76 | 77 | // 正确方法 78 | const listItems = items.map((item) =>
  • {item}
    • ); 79 | ``` 80 | 81 | ### 在 render 中过度使用内联函数 82 | 83 | 在 `render` 方法中定义函数可能导致性能问题，因为每次渲染都会创建一个新函数。 84 | 85 | ```javascript 86 | // 反模式 87 | render() { 88 | return ; 89 | } 90 | 91 | // 正确方法 92 | render() { 93 | return ; 94 | } 95 | ``` 96 | 97 | ### 深度嵌套状态 98 | 99 | 深度嵌套状态会使状态管理变得复杂且容易出错。 尽可能扁平化状态结构。 100 | 101 | ```javascript 102 | // 反模式 103 | this.state = { 104 | user: { 105 | profile: { 106 | name: 'John', 107 | age: 30, 108 | }, 109 | }, 110 | }; 111 | 112 | // 正确方法 113 | this.state = { 114 | userName: 'John', 115 | userAge: 30, 116 | }; 117 | ``` 118 | 119 | ## 延伸阅读 120 | 121 | * [React documentation on state](https://react.dev/learn/state-a-components-memory) 122 | * [React documentation on lists and keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) 123 | * [React documentation on hooks](https://react.dev/reference/react/hooks) 124 | * [React documentation on memo optimizing performance](https://react.dev/reference/react/memo) 125 | -------------------------------------------------------------------------------- /questions/what-is-virtual-dom-in-react/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: What is virtual DOM in React? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | The virtual DOM in React is a lightweight copy of the actual DOM. It allows React to efficiently update the UI by comparing the virtual DOM with the real DOM and only making necessary changes. This process is called reconciliation. By using the virtual DOM, React minimizes direct manipulation of the real DOM, which can be slow and inefficient. 8 | 9 | --- 10 | 11 | ## What is virtual DOM in React? 12 | 13 | ### Introduction 14 | 15 | The virtual DOM is a concept implemented by libraries like React to improve the performance of web applications. It is a programming concept where a virtual representation of the UI is kept in memory and synced with the real DOM by a library such as ReactDOM. 16 | 17 | ### How it works 18 | 19 | 1. **Initial rendering**: When a React component is rendered for the first time, a virtual DOM tree is created. This tree is a lightweight copy of the actual DOM. 20 | 2. **Updating state**: When the state of a component changes, a new virtual DOM tree is created. React then compares this new tree with the previous one. 21 | 3. **Diffing algorithm**: React uses a diffing algorithm to find the differences between the new virtual DOM tree and the previous one. This process is called reconciliation. 22 | 4. **Updating the real DOM**: After identifying the differences, React updates only the parts of the real DOM that have changed, rather than re-rendering the entire UI. 23 | 24 | ### Benefits 25 | 26 | - **Performance**: By minimizing direct manipulation of the real DOM, React can update the UI more efficiently. 27 | - **Abstraction**: Developers can write code without worrying about the performance implications of direct DOM manipulation. 28 | - **Predictability**: The virtual DOM provides a predictable way to update the UI, making it easier to reason about the state of the application. 29 | 30 | ### Example 31 | 32 | Here is a simple example to illustrate how the virtual DOM works in React: 33 | 34 | ```jsx 35 | import React, { useState } from 'react'; 36 | 37 | function Counter() { 38 | const [count, setCount] = useState(0); 39 | 40 | return ( 41 |
    42 |

    You clicked {count} times

    43 | 44 |
    45 | ); 46 | } 47 | 48 | export default Counter; 49 | ``` 50 | 51 | In this example, when the button is clicked, the state `count` is updated. React creates a new virtual DOM tree, compares it with the previous one, and updates only the text inside the `

    ` tag in the real DOM. 52 | 53 | ## Further reading 54 | 55 | - [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) 56 | - [Understanding the virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) 57 | -------------------------------------------------------------------------------- /questions/what-are-react-fragments-used-for/en-US.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: What are React Fragments used for? 3 | --- 4 | 5 | ## TL;DR 6 | 7 | React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax `<>...` or the `React.Fragment` syntax. 8 | 9 | ```jsx 10 | return ( 11 | <> 12 | 13 | 14 | 15 | ); 16 | ``` 17 | 18 | --- 19 | 20 | ## What are React Fragments used for? 21 | 22 | ### Grouping multiple elements 23 | 24 | React Fragments allow you to group multiple elements without adding extra nodes to the DOM. This is particularly useful when you want to return multiple elements from a component's render method but don't want to introduce unnecessary wrapper elements. 25 | 26 | ### Avoiding unnecessary DOM nodes 27 | 28 | Using React Fragments helps in avoiding unnecessary DOM nodes, which can be beneficial for performance and maintaining a cleaner DOM structure. This is especially important in complex applications where additional nodes can lead to increased memory usage and slower rendering times. 29 | 30 | ### Syntax 31 | 32 | There are two ways to use React Fragments: 33 | 34 | 1. **Shorthand syntax**: This is the most concise way to use fragments. It uses empty tags `<>...`. 35 | 36 | ```jsx 37 | return ( 38 | <> 39 | 40 | 41 | 42 | ); 43 | ``` 44 | 45 | 2. **Full syntax**: This uses `React.Fragment` and can be useful if you need to add keys to the fragment. 46 | 47 | ```jsx 48 | return ( 49 | 50 | 51 | 52 | 53 | ); 54 | ``` 55 | 56 | ### Adding keys to fragments 57 | 58 | If you need to add keys to the elements within a fragment, you must use the full `React.Fragment` syntax. This is useful when rendering a list of elements. 59 | 60 | ```jsx 61 | return ( 62 | <> 63 | {items.map((item) => ( 64 | 65 | 66 | 67 | ))} 68 | 69 | ); 70 | ``` 71 | 72 | ### Use cases 73 | 74 | - **Returning multiple elements from a component**: When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements. 75 | - **Rendering lists**: When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM. 76 | - **Conditional rendering**: When conditionally rendering multiple elements, fragments can help keep the DOM structure clean. 77 | 78 | ## Further reading 79 | 80 | - [React Fragments - Official Documentation](https://react.dev/reference/react/Fragment) 81 | --------------------------------------------------------------------------------