diff --git a/questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.mdx b/questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.mdx index 71c8279..1cd5718 100644 --- a/questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.mdx +++ b/questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.mdx @@ -73,6 +73,6 @@ One-way data flow can lead to better performance because it reduces the complexi ## Further reading -- [React documentation on components and props](https://reactjs.org/docs/components-and-props.html) -- [React documentation on state and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) -- [React documentation on lifting state up](https://reactjs.org/docs/lifting-state-up.html) +- [React documentation on components and props](https://react.dev/learn/passing-props-to-a-component) +- [React documentation on state](https://react.dev/learn/state-a-components-memory) +- [React documentation on lifting state up](https://react.dev/learn/sharing-state-between-components) diff --git a/questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx b/questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx index 90884e1..662c4e1 100644 --- a/questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx +++ b/questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx @@ -73,6 +73,6 @@ export default ChildComponent; ## 延伸阅读 -* [React 组件和 props 文档](https://reactjs.org/docs/components-and-props.html) -* [React 状态和生命周期文档](https://reactjs.org/docs/state-and-lifecycle.html) -* [React 提升状态文档](https://reactjs.org/docs/lifting-state-up.html) +* [React 组件和 props 文档](https://react.dev/learn/passing-props-to-a-component) +* [React 状态文档](https://react.dev/learn/state-a-components-memory) +* [React 提升状态文档](https://react.dev/learn/sharing-state-between-components) diff --git a/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.mdx b/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.mdx index 26e6d38..d56a702 100644 --- a/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.mdx +++ b/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.mdx @@ -65,5 +65,5 @@ export default Home; ## Further reading - [Next.js Documentation](https://nextjs.org/docs) -- [React Server Components](https://reactjs.org/docs/react-server.html) -- [Server-side rendering in React](https://reactjs.org/docs/react-dom-server.html) +- [React Server Components](https://react.dev/reference/rsc/server-components) +- [Server-side rendering in React](https://react.dev/reference/react-dom/server) diff --git a/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx b/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx index 41a1279..87f4404 100644 --- a/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx +++ b/questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx @@ -64,4 +64,4 @@ export default Home; ## 延伸阅读 -* [React 中的服务器端渲染](https://reactjs.org/docs/react-dom-server.html) +* [React 中的服务器端渲染](https://react.dev/reference/react-dom/server) diff --git a/questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.mdx b/questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.mdx index 220b333..50fd650 100644 --- a/questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.mdx +++ b/questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.mdx @@ -77,5 +77,5 @@ In this example, the `getStaticProps` function fetches data at build time, and t ## Further reading - [Next.js documentation on static generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) -- [React official documentation](https://reactjs.org/docs/getting-started.html) +- [React official documentation](https://react.dev/learn) - [Static site generators comparison](https://www.staticgen.com/) diff --git a/questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx b/questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx index 6e963b4..2fdfacd 100644 --- a/questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx +++ b/questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx @@ -77,5 +77,5 @@ export default HomePage; ## 延伸阅读 * [Next.js 关于静态生成的文档](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) -* [React 官方文档](https://reactjs.org/docs/getting-started.html) +* [React 官方文档](https://react.dev/learn) * [静态网站生成器比较](https://www.staticgen.com/) diff --git a/questions/explain-the-composition-pattern-in-react/en-US.mdx b/questions/explain-the-composition-pattern-in-react/en-US.mdx index 6cb3aed..33e0ff8 100644 --- a/questions/explain-the-composition-pattern-in-react/en-US.mdx +++ b/questions/explain-the-composition-pattern-in-react/en-US.mdx @@ -83,5 +83,4 @@ function App() { ## Further reading - [Composition in React](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/) -- [React patterns: Composition](https://reactpatterns.com/#composition) - [Medium article on React composition](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) diff --git a/questions/explain-the-composition-pattern-in-react/zh-CN.mdx b/questions/explain-the-composition-pattern-in-react/zh-CN.mdx index 8dc8b46..055fde3 100644 --- a/questions/explain-the-composition-pattern-in-react/zh-CN.mdx +++ b/questions/explain-the-composition-pattern-in-react/zh-CN.mdx @@ -82,6 +82,5 @@ function App() { ## 延伸阅读 -* [React 关于组合而非继承的文档](https://reactjs.org/docs/composition-vs-inheritance.html) * [React 模式：组合](https://reactpatterns.com/#composition) * [关于 React 组合的 Medium 文章](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) diff --git a/questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.mdx b/questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.mdx index 57a5adf..c2153f6 100644 --- a/questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.mdx +++ b/questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.mdx @@ -79,6 +79,6 @@ export default connect(null, mapDispatchToProps)(ButtonContainer); ## Further reading -- [React documentation on components and props](https://reactjs.org/docs/components-and-props.html) +- [React documentation on components and props](https://react.dev/learn/passing-props-to-a-component) - [Dan Abramov's article on presentational and container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) - [Redux documentation on presentational and container components](https://redux.js.org/basics/usage-with-react#presentational-and-container-components) diff --git a/questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx b/questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx index ee6eef2..2f36fb1 100644 --- a/questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx +++ b/questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx @@ -79,6 +79,6 @@ export default connect(null, mapDispatchToProps)(ButtonContainer); ## 延伸阅读 -* [React 组件和 props 文档](https://reactjs.org/docs/components-and-props.html) +* [React 组件和 props 文档](https://react.dev/learn/passing-props-to-a-component) * [Dan Abramov 关于展示组件和容器组件的文章](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) * [Redux 关于展示组件和容器组件的文档](https://redux.js.org/basics/usage-with-react#presentational-and-container-components) diff --git a/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx b/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx index 2ad324e..8c189fe 100644 --- a/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx +++ b/questions/explain-what-happens-when-setstate-is-called-in-react/en-US.mdx @@ -53,6 +53,6 @@ this.setState({ count: this.state.count + 1 }, () => { ## Further reading -- [React documentation on setState](https://reactjs.org/docs/react-component.html#setstate) +- [React documentation on setState](https://react.dev/reference/react/useState#setstate) - [Understanding setState in React](https://medium.com/@baphemot/understanding-react-setstate-a4640451865b) - [React's setState explained](https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/) diff --git a/questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx b/questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx index e2d59bc..e233985 100644 --- a/questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx +++ b/questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx @@ -53,6 +53,6 @@ this.setState({ count: this.state.count + 1 }, () => { ## 延伸阅读 -* [React setState 文档](https://reactjs.org/docs/react-component.html#setstate) +* [React setState 文档](https://react.dev/reference/react/useState#setstate) * [理解 React 中的 setState](https://medium.com/@baphemot/understanding-react-setstate-a4640451865b) * [React 的 setState 解释](https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/) diff --git a/questions/explain-what-react-hydration-is/en-US.mdx b/questions/explain-what-react-hydration-is/en-US.mdx index 8160e85..dea64d7 100644 --- a/questions/explain-what-react-hydration-is/en-US.mdx +++ b/questions/explain-what-react-hydration-is/en-US.mdx @@ -66,6 +66,6 @@ In this example, the server sends the static HTML with a button to the client. R ## Further reading -- [React documentation on hydration](https://reactjs.org/docs/react-dom.html#hydrate) -- [Server-side rendering in React](https://reactjs.org/docs/react-dom-server.html) +- [React documentation on hydration](https://react.dev/reference/react-dom/client/hydrateRoot) +- [Server-side rendering in React](https://react.dev/reference/react-dom/server) - [Next.js documentation on hydration](https://nextjs.org/docs/basic-features/pages#hydration) diff --git a/questions/explain-what-react-hydration-is/zh-CN.mdx b/questions/explain-what-react-hydration-is/zh-CN.mdx index 9ea13ff..0273468 100644 --- a/questions/explain-what-react-hydration-is/zh-CN.mdx +++ b/questions/explain-what-react-hydration-is/zh-CN.mdx @@ -66,6 +66,6 @@ React 水合是在客户端附加事件监听器并使服务器渲染的 HTML ## 延伸阅读 -* [React 水合文档](https://reactjs.org/docs/react-dom.html#hydrate) -* [React 中的服务器端渲染](https://reactjs.org/docs/react-dom-server.html) +* [React 水合文档](https://react.dev/reference/react-dom/client/hydrateRoot) +* [React 中的服务器端渲染](https://react.dev/reference/react-dom/server) * [Next.js 水合文档](https://nextjs.org/docs/basic-features/pages#hydration) diff --git a/questions/how-do-you-debug-react-applications/en-US.mdx b/questions/how-do-you-debug-react-applications/en-US.mdx index d27d682..d271d6d 100644 --- a/questions/how-do-you-debug-react-applications/en-US.mdx +++ b/questions/how-do-you-debug-react-applications/en-US.mdx @@ -139,7 +139,7 @@ function MyComponent() { ## Further reading -- [React Developer Tools](https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html) -- [Error boundaries in React](https://reactjs.org/docs/error-boundaries.html) +- [React Developer Tools](https://react.dev/learn/react-developer-tools) +- [Error boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) - [Using the Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools) - [Debugging JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging) diff --git a/questions/how-do-you-debug-react-applications/zh-CN.mdx b/questions/how-do-you-debug-react-applications/zh-CN.mdx index acf7961..a103f38 100644 --- a/questions/how-do-you-debug-react-applications/zh-CN.mdx +++ b/questions/how-do-you-debug-react-applications/zh-CN.mdx @@ -139,7 +139,7 @@ function MyComponent() { ## 延伸阅读 -* [React 开发者工具](https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html) -* [React 中的错误边界](https://reactjs.org/docs/error-boundaries.html) +* [React 开发者工具](https://react.dev/learn/react-developer-tools) +* [React 中的错误边界](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) * [使用 Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools) * [调试 JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging) diff --git a/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.mdx b/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.mdx index 72f22df..3d4ed81 100644 --- a/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.mdx +++ b/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.mdx @@ -158,7 +158,7 @@ function App() { ## Further reading -- [React documentation on state](https://reactjs.org/docs/state-and-lifecycle.html) -- [React documentation on context](https://reactjs.org/docs/context.html) +- [React documentation on state](https://react.dev/learn/state-a-components-memory) +- [React documentation on context](https://react.dev/learn/passing-data-deeply-with-context) - [Redux documentation](https://redux.js.org/) - [MobX documentation](https://mobx.js.org/README.html) diff --git a/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.mdx b/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.mdx index 2fffd6f..a91d8f2 100644 --- a/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.mdx +++ b/questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/zh-CN.mdx @@ -158,7 +158,7 @@ function App() { ## 延伸阅读 -* [React 状态文档](https://reactjs.org/docs/state-and-lifecycle.html) -* [React 上下文文档](https://reactjs.org/docs/context.html) +* [React 状态文档](https://react.dev/learn/state-a-components-memory) +* [React 上下文文档](https://react.dev/learn/passing-data-deeply-with-context) * [Redux 文档](https://redux.js.org/) * [MobX 文档](https://mobx.js.org/README.html) diff --git a/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.mdx b/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.mdx index be99233..ce2ca12 100644 --- a/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.mdx +++ b/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.mdx @@ -156,7 +156,7 @@ function DataFetchingComponent() { ## Further reading -- [React documentation on hooks](https://reactjs.org/docs/hooks-intro.html) -- [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html) +- [React documentation on hooks](https://react.dev/reference/react/hooks) +- [React useEffect Hook](https://react.dev/reference/react/useEffect) - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) - [Handling errors in async functions](https://javascript.info/async-await#error-handling) diff --git a/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.mdx b/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.mdx index bf74b57..7e7d642 100644 --- a/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.mdx +++ b/questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/zh-CN.mdx @@ -156,7 +156,7 @@ function DataFetchingComponent() { ## 延伸阅读 -* [React 钩子文档](https://reactjs.org/docs/hooks-intro.html) -* [使用 Effect 钩子](https://reactjs.org/docs/hooks-effect.html) +* [React 钩子文档](https://react.dev/reference/react/hooks) +* [React useEffect Hook 文档](https://react.dev/reference/react/useEffect) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [处理异步函数中的错误](https://javascript.info/async-await#error-handling) diff --git a/questions/how-do-you-reset-a-components-state-in-react/en-US.mdx b/questions/how-do-you-reset-a-components-state-in-react/en-US.mdx index 0f63d9c..e11704f 100644 --- a/questions/how-do-you-reset-a-components-state-in-react/en-US.mdx +++ b/questions/how-do-you-reset-a-components-state-in-react/en-US.mdx @@ -114,6 +114,6 @@ export default MyComponent; ## Further reading -- [React useState Hook](https://reactjs.org/docs/hooks-state.html) -- [React Component State](https://reactjs.org/docs/state-and-lifecycle.html) -- [React Functional Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) +- [React useState Hook](https://react.dev/reference/react/useState) +- [React Component State](https://react.dev/learn/state-a-components-memory) +- [React Functional Components](https://react.dev/reference/react/Component) diff --git a/questions/how-do-you-reset-a-components-state-in-react/zh-CN.mdx b/questions/how-do-you-reset-a-components-state-in-react/zh-CN.mdx index b8aaab8..5dc3b3c 100644 --- a/questions/how-do-you-reset-a-components-state-in-react/zh-CN.mdx +++ b/questions/how-do-you-reset-a-components-state-in-react/zh-CN.mdx @@ -114,6 +114,6 @@ export default MyComponent; ## 延伸阅读 -* [React useState Hook](https://reactjs.org/docs/hooks-state.html) -* [React Component State](https://reactjs.org/docs/state-and-lifecycle.html) -* [React Functional Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) +* [React useState Hook](https://react.dev/reference/react/useState) +* [React Component State](https://react.dev/learn/state-a-components-memory) +* [React Functional Components](https://react.dev/reference/react/Component) diff --git a/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.mdx b/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.mdx index 533d485..76b65f2 100644 --- a/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.mdx +++ b/questions/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides/zh-CN.mdx @@ -75,6 +75,6 @@ class MyComponent extends React.Component { ## 延伸阅读 -* [React 关于协调的文档](https://reactjs.org/docs/reconciliation.html) +* [React 关于协调的文档](https://react.dev/learn/preserving-and-resetting-state) * [理解虚拟 DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) -* [React 性能优化](https://reactjs.org/docs/optimizing-performance.html) +* [React memo 性能优化](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) diff --git a/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.mdx b/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.mdx index c2befbc..996cd18 100644 --- a/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.mdx +++ b/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/en-US.mdx @@ -79,6 +79,6 @@ const MyComponent = () => { ## Further reading -- [React Context API documentation](https://reactjs.org/docs/context.html) -- [useMemo Hook documentation](https://reactjs.org/docs/hooks-reference.html#usememo) +- [React documentation on context](https://react.dev/learn/passing-data-deeply-with-context) +- [useMemo Hook documentation](https://react.dev/reference/react/useMemo) - [use-context-selector library](https://github.com/dai-shi/use-context-selector) diff --git a/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.mdx b/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.mdx index 7aa63c6..4a5141f 100644 --- a/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.mdx +++ b/questions/how-would-one-optimize-the-performance-of-react-contexts-to-reduce-rerenders/zh-CN.mdx @@ -79,6 +79,6 @@ const MyComponent = () => { ## 延伸阅读 -* [React Context API 文档](https://reactjs.org/docs/context.html) -* [useMemo Hook 文档](https://reactjs.org/docs/hooks-reference.html#usememo) +* [React 上下文文档](https://react.dev/learn/passing-data-deeply-with-context) +* [useMemo Hook 文档](https://react.dev/reference/react/useMemo) * [use-context-selector 库](https://github.com/dai-shi/use-context-selector) diff --git a/questions/what-are-error-boundaries-in-react-for/en-US.mdx b/questions/what-are-error-boundaries-in-react-for/en-US.mdx index 07b939f..0134a38 100644 --- a/questions/what-are-error-boundaries-in-react-for/en-US.mdx +++ b/questions/what-are-error-boundaries-in-react-for/en-US.mdx @@ -82,6 +82,4 @@ Error boundaries have some limitations: ## Further reading -- [React documentation on error boundaries](https://reactjs.org/docs/error-boundaries.html) -- [Handling errors in React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) -- [Error boundaries in React 16](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) +- [React documentation on error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) diff --git a/questions/what-are-error-boundaries-in-react-for/zh-CN.mdx b/questions/what-are-error-boundaries-in-react-for/zh-CN.mdx index 69bacb0..c9d7523 100644 --- a/questions/what-are-error-boundaries-in-react-for/zh-CN.mdx +++ b/questions/what-are-error-boundaries-in-react-for/zh-CN.mdx @@ -82,6 +82,4 @@ export default ErrorBoundary; ## 延伸阅读 -* [React 错误边界文档](https://reactjs.org/docs/error-boundaries.html) -* [在 React 中处理错误](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) -* [React 16 中的错误边界](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) +* [React 错误边界文档](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) diff --git a/questions/what-are-higher-order-components-in-react/en-US.mdx b/questions/what-are-higher-order-components-in-react/en-US.mdx index e6ae274..fd92fee 100644 --- a/questions/what-are-higher-order-components-in-react/en-US.mdx +++ b/questions/what-are-higher-order-components-in-react/en-US.mdx @@ -82,6 +82,5 @@ In this example, `withExtraProps` is an HOC that adds an `extraProp` to `MyCompo ## Further reading -- [React documentation on higher order components](https://reactjs.org/docs/higher-order-components.html) - [Understanding higher order components in React](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e) - [HOCs vs Render Props vs Hooks](https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/) diff --git a/questions/what-are-higher-order-components-in-react/zh-CN.mdx b/questions/what-are-higher-order-components-in-react/zh-CN.mdx index da41975..4698d27 100644 --- a/questions/what-are-higher-order-components-in-react/zh-CN.mdx +++ b/questions/what-are-higher-order-components-in-react/zh-CN.mdx @@ -82,6 +82,5 @@ export default App; ## 延伸阅读 -* [React 关于高阶组件的文档](https://reactjs.org/docs/higher-order-components.html) * [理解 React 中的高阶组件](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e) * [HOCs vs Render Props vs Hooks](https://blog.logrocket.com/hooks-vs-render-props-vs-hocs/) diff --git a/questions/what-are-react-fragments-used-for/en-US.mdx b/questions/what-are-react-fragments-used-for/en-US.mdx index 353bead..522c94f 100644 --- a/questions/what-are-react-fragments-used-for/en-US.mdx +++ b/questions/what-are-react-fragments-used-for/en-US.mdx @@ -77,6 +77,6 @@ return ( ## Further reading -- [React Fragments - Official Documentation](https://reactjs.org/docs/fragments.html) +- [React Fragments - Official Documentation](https://react.dev/reference/react/Fragment) - [React Fragments - A Complete Guide](https://www.freecodecamp.org/news/react-fragments-complete-guide/) - [When to use React Fragments](https://blog.logrocket.com/when-to-use-react-fragments/) diff --git a/questions/what-are-react-fragments-used-for/zh-CN.mdx b/questions/what-are-react-fragments-used-for/zh-CN.mdx index e7563d3..b2ddb69 100644 --- a/questions/what-are-react-fragments-used-for/zh-CN.mdx +++ b/questions/what-are-react-fragments-used-for/zh-CN.mdx @@ -75,6 +75,6 @@ return ( ## 延伸阅读 -* [React Fragments - 官方文档](https://reactjs.org/docs/fragments.html) +* [React Fragments - 官方文档](https://react.dev/reference/react/Fragment) * [React Fragments - 完整指南](https://www.freecodecamp.org/news/react-fragments-complete-guide/) * [何时使用 React Fragments](https://blog.logrocket.com/when-to-use-react-fragments/) diff --git a/questions/what-are-react-portals-used-for/en-US.mdx b/questions/what-are-react-portals-used-for/en-US.mdx index 4555a36..6311630 100644 --- a/questions/what-are-react-portals-used-for/en-US.mdx +++ b/questions/what-are-react-portals-used-for/en-US.mdx @@ -92,6 +92,6 @@ ReactDOM.createPortal(child, container); ## Further reading -- [React Portals documentation](https://reactjs.org/docs/portals.html) +- [React createPortal documentation](https://react.dev/reference/react-dom/createPortal) - [Building a modal with React Portals](https://blog.logrocket.com/building-a-modal-with-react-portals/) - [Using React Portals for better accessibility](https://www.smashingmagazine.com/2020/03/react-portals-accessibility/) diff --git a/questions/what-are-react-portals-used-for/zh-CN.mdx b/questions/what-are-react-portals-used-for/zh-CN.mdx index 16db454..ae8d833 100644 --- a/questions/what-are-react-portals-used-for/zh-CN.mdx +++ b/questions/what-are-react-portals-used-for/zh-CN.mdx @@ -92,6 +92,6 @@ ReactDOM.createPortal(child, container); ## 延伸阅读 -* [React Portals 文档](https://reactjs.org/docs/portals.html) +* [React createPortal 文档](https://react.dev/reference/react-dom/createPortal) * [使用 React Portals 构建模态框](https://blog.logrocket.com/building-a-modal-with-react-portals/) * [使用 React Portals 提高可访问性](https://www.smashingmagazine.com/2020/03/react-portals-accessibility/) diff --git a/questions/what-are-render-props-in-react-and-what-are-they-for/en-US.mdx b/questions/what-are-render-props-in-react-and-what-are-they-for/en-US.mdx index 9a4d85a..cb8c850 100644 --- a/questions/what-are-render-props-in-react-and-what-are-they-for/en-US.mdx +++ b/questions/what-are-render-props-in-react-and-what-are-they-for/en-US.mdx @@ -92,6 +92,4 @@ In this example, `MouseTracker` is a component that tracks the mouse position an ## Further reading -- [React documentation on render props](https://reactjs.org/docs/render-props.html) -- [Render props vs. higher-order components](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) - [Advanced React patterns](https://kentcdodds.com/blog/compound-components-with-react-hooks) diff --git a/questions/what-are-render-props-in-react-and-what-are-they-for/zh-CN.mdx b/questions/what-are-render-props-in-react-and-what-are-they-for/zh-CN.mdx index 9231ded..ed5d243 100644 --- a/questions/what-are-render-props-in-react-and-what-are-they-for/zh-CN.mdx +++ b/questions/what-are-render-props-in-react-and-what-are-they-for/zh-CN.mdx @@ -92,6 +92,4 @@ class MouseTracker extends React.Component { ## 延伸阅读 -* [React render props 文档](https://reactjs.org/docs/render-props.html) -* [Render props vs. 高阶组件](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) * [高级 React 模式](https://kentcdodds.com/blog/compound-components-with-react-hooks) diff --git a/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.mdx b/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.mdx index e283c46..6e0da1c 100644 --- a/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.mdx +++ b/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/en-US.mdx @@ -131,6 +131,6 @@ const MyComponent = () => { ## Further reading -- [React documentation on hooks](https://reactjs.org/docs/hooks-intro.html) -- [React documentation on `useEffect`](https://reactjs.org/docs/hooks-effect.html) +- [React documentation on hooks](https://react.dev/reference/react/hooks) +- [React documentation on `useEffect`](https://react.dev/reference/react/useEffect) - [Handling async requests in React](https://www.robinwieruch.de/react-hooks-fetch-data) diff --git a/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.mdx b/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.mdx index fd768cb..2c79ea7 100644 --- a/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.mdx +++ b/questions/what-are-some-common-pitfalls-when-doing-data-fetching-in-react/zh-CN.mdx @@ -131,6 +131,6 @@ const MyComponent = () => { ## 延伸阅读 -* [React hooks 文档](https://reactjs.org/docs/hooks-intro.html) -* [React `useEffect` 文档](https://reactjs.org/docs/hooks-effect.html) +* [React hooks 文档](https://react.dev/reference/react/hooks) +* [React `useEffect` 文档](https://react.dev/reference/react/useEffect) * [在 React 中处理异步请求](https://www.robinwieruch.de/react-hooks-fetch-data) diff --git a/questions/what-are-some-pitfalls-about-using-context-in-react/en-US.mdx b/questions/what-are-some-pitfalls-about-using-context-in-react/en-US.mdx index 0e90a6c..7b1ec8a 100644 --- a/questions/what-are-some-pitfalls-about-using-context-in-react/en-US.mdx +++ b/questions/what-are-some-pitfalls-about-using-context-in-react/en-US.mdx @@ -56,8 +56,8 @@ For more complex state management needs, consider using other state management s ## Further reading -- [React Context API](https://reactjs.org/docs/context.html) -- [React Performance Optimization](https://reactjs.org/docs/optimizing-performance.html) +- [React Context](https://react.dev/learn/passing-data-deeply-with-context) +- [React memo Performance Optimization](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) - [Redux](https://redux.js.org/) - [Zustand](https://github.com/pmndrs/zustand) - [Recoil](https://recoiljs.org/) diff --git a/questions/what-are-some-pitfalls-about-using-context-in-react/zh-CN.mdx b/questions/what-are-some-pitfalls-about-using-context-in-react/zh-CN.mdx index 10d7cff..aabacfd 100644 --- a/questions/what-are-some-pitfalls-about-using-context-in-react/zh-CN.mdx +++ b/questions/what-are-some-pitfalls-about-using-context-in-react/zh-CN.mdx @@ -56,8 +56,8 @@ Context 提供了一种在组件树中传递数据的方法，而无需在每个 ## 延伸阅读 -* [React Context API](https://reactjs.org/docs/context.html) -* [React 性能优化](https://reactjs.org/docs/optimizing-performance.html) +* [React Context](https://react.dev/learn/passing-data-deeply-with-context) +* [React memo 性能优化](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) * [Redux](https://redux.js.org/) * [Zustand](https://github.com/pmndrs/zustand) * [Recoil](https://recoiljs.org/) diff --git a/questions/what-are-some-react-anti-patterns/en-US.mdx b/questions/what-are-some-react-anti-patterns/en-US.mdx index f8e21d0..c486736 100644 --- a/questions/what-are-some-react-anti-patterns/en-US.mdx +++ b/questions/what-are-some-react-anti-patterns/en-US.mdx @@ -118,7 +118,7 @@ this.state = { ## Further reading -- [React documentation on state and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) -- [React documentation on lists and keys](https://reactjs.org/docs/lists-and-keys.html) -- [React documentation on hooks](https://reactjs.org/docs/hooks-intro.html) -- [React documentation on optimizing performance](https://reactjs.org/docs/optimizing-performance.html) +- [React documentation on state](https://react.dev/learn/state-a-components-memory) +- [React documentation on lists and keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) +- [React documentation on hooks](https://react.dev/reference/react/hooks) +- [React documentation on memo optimizing performance](https://react.dev/reference/react/memo) diff --git a/questions/what-are-some-react-anti-patterns/zh-CN.mdx b/questions/what-are-some-react-anti-patterns/zh-CN.mdx index 3f56935..0c880fa 100644 --- a/questions/what-are-some-react-anti-patterns/zh-CN.mdx +++ b/questions/what-are-some-react-anti-patterns/zh-CN.mdx @@ -118,7 +118,7 @@ this.state = { ## 延伸阅读 -* [React 关于状态和生命周期的文档](https://reactjs.org/docs/state-and-lifecycle.html) -* [React 关于列表和键的文档](https://reactjs.org/docs/lists-and-keys.html) -* [React 关于 Hooks 的文档](https://reactjs.org/docs/hooks-intro.html) -* [React 关于优化性能的文档](https://reactjs.org/docs/optimizing-performance.html) +* [React 关于状态和生命周期的文档](https://react.dev/learn/state-a-components-memory) +* [React 关于列表和键的文档](https://react.dev/learn/rendering-lists#why-does-react-need-keys) +* [React 关于 Hooks 的文档](https://react.dev/reference/react/hooks) +* [React 关于 memo 优化性能的文档](https://react.dev/reference/react/memo) diff --git a/questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx b/questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx index b874690..5472c64 100644 --- a/questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx +++ b/questions/what-are-the-benefits-of-using-hooks-in-react/en-US.mdx @@ -57,7 +57,7 @@ Functional components with hooks are generally easier to test compared to class ## Further reading -- [React Hooks documentation](https://reactjs.org/docs/hooks-intro.html) -- [Using the State Hook](https://reactjs.org/docs/hooks-state.html) -- [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html) -- [Building Your Own Hooks](https://reactjs.org/docs/hooks-custom.html) +- [React Hooks documentation](https://react.dev/reference/react/hooks) +- [Using the State Hook](https://react.dev/reference/react/useState) +- [Using the Effect Hook](https://react.dev/reference/react/useEffect) +- [Building Your Own Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) diff --git a/questions/what-are-the-benefits-of-using-hooks-in-react/zh-CN.mdx b/questions/what-are-the-benefits-of-using-hooks-in-react/zh-CN.mdx index 71c3560..6c68a51 100644 --- a/questions/what-are-the-benefits-of-using-hooks-in-react/zh-CN.mdx +++ b/questions/what-are-the-benefits-of-using-hooks-in-react/zh-CN.mdx @@ -57,7 +57,7 @@ Hooks 允许您通过将相关逻辑分组在一起来分离关注点。这使 ## 延伸阅读 -* [React Hooks 文档](https://reactjs.org/docs/hooks-intro.html) -* [使用 State Hook](https://reactjs.org/docs/hooks-state.html) -* [使用 Effect Hook](https://reactjs.org/docs/hooks-effect.html) -* [构建你自己的 Hooks](https://reactjs.org/docs/hooks-custom.html) +* [React Hooks 文档](https://react.dev/reference/react/hooks) +* [使用 State Hook](https://react.dev/reference/react/useState) +* [使用 Effect Hook](https://react.dev/reference/react/useEffect) +* [构建你自己的 Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) diff --git a/questions/what-are-the-rules-of-react-hooks/en-US.mdx b/questions/what-are-the-rules-of-react-hooks/en-US.mdx index 65b0104..36db1ac 100644 --- a/questions/what-are-the-rules-of-react-hooks/en-US.mdx +++ b/questions/what-are-the-rules-of-react-hooks/en-US.mdx @@ -77,6 +77,6 @@ Add the plugin to your ESLint configuration: ## Further reading -- [React hooks documentation](https://reactjs.org/docs/hooks-intro.html) -- [Rules of hooks](https://reactjs.org/docs/hooks-rules.html) +- [React hooks documentation](https://react.dev/reference/react/hooks) +- [Rules of hooks](https://react.dev/reference/rules/rules-of-hooks) - [Using the `eslint-plugin-react-hooks` linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) diff --git a/questions/what-are-the-rules-of-react-hooks/zh-CN.mdx b/questions/what-are-the-rules-of-react-hooks/zh-CN.mdx index 93b295f..0c963c4 100644 --- a/questions/what-are-the-rules-of-react-hooks/zh-CN.mdx +++ b/questions/what-are-the-rules-of-react-hooks/zh-CN.mdx @@ -77,6 +77,6 @@ npm install eslint-plugin-react-hooks --save-dev ## 延伸阅读 -* [React Hooks 文档](https://reactjs.org/docs/hooks-intro.html) -* [Hooks 的规则](https://reactjs.org/docs/hooks-rules.html) +* [React Hooks 文档](https://react.dev/reference/react/hooks) +* [Hooks 的规则](https://react.dev/reference/rules/rules-of-hooks) * [使用 `eslint-plugin-react-hooks` linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) diff --git a/questions/what-does-re-rendering-mean-in-react/en-US.mdx b/questions/what-does-re-rendering-mean-in-react/en-US.mdx index 11f836d..9d559cd 100644 --- a/questions/what-does-re-rendering-mean-in-react/en-US.mdx +++ b/questions/what-does-re-rendering-mean-in-react/en-US.mdx @@ -65,7 +65,6 @@ Re-rendering can be expensive, especially for complex components or large applic ## Further reading -- [React documentation on rendering](https://reactjs.org/docs/rendering-elements.html) -- [React documentation on state and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) -- [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) -- [Optimizing performance in React](https://reactjs.org/docs/optimizing-performance.html) +- [React documentation on rendering](https://react.dev/learn/render-and-commit) +- [React documentation on state](https://react.dev/learn/state-a-components-memory) +- [React.memo](https://react.dev/reference/react/memo) diff --git a/questions/what-does-re-rendering-mean-in-react/zh-CN.mdx b/questions/what-does-re-rendering-mean-in-react/zh-CN.mdx index ade404a..3067f10 100644 --- a/questions/what-does-re-rendering-mean-in-react/zh-CN.mdx +++ b/questions/what-does-re-rendering-mean-in-react/zh-CN.mdx @@ -65,7 +65,6 @@ function Counter() { ## 延伸阅读 -* [React 渲染文档](https://reactjs.org/docs/rendering-elements.html) -* [React 状态和生命周期文档](https://reactjs.org/docs/state-and-lifecycle.html) -* [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) -* [优化 React 中的性能](https://reactjs.org/docs/optimizing-performance.html) +* [React 渲染文档](https://react.dev/learn/render-and-commit) +* [React 状态文档](https://react.dev/learn/state-a-components-memory) +* [React.memo](https://react.dev/reference/react/memo) diff --git a/questions/what-does-the-dependency-array-of-useeffect-affect/en-US.mdx b/questions/what-does-the-dependency-array-of-useeffect-affect/en-US.mdx index 2740daf..09641dc 100644 --- a/questions/what-does-the-dependency-array-of-useeffect-affect/en-US.mdx +++ b/questions/what-does-the-dependency-array-of-useeffect-affect/en-US.mdx @@ -95,6 +95,6 @@ useEffect(() => { ## Further reading -- [React Docs: Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html) -- [React Docs: Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) +- [React Docs: Using the Effect Hook](https://react.dev/reference/react/useEffect) +- [React Docs: Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks) - [Overreacted: A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) diff --git a/questions/what-does-the-dependency-array-of-useeffect-affect/zh-CN.mdx b/questions/what-does-the-dependency-array-of-useeffect-affect/zh-CN.mdx index a140a67..1d665cb 100644 --- a/questions/what-does-the-dependency-array-of-useeffect-affect/zh-CN.mdx +++ b/questions/what-does-the-dependency-array-of-useeffect-affect/zh-CN.mdx @@ -95,6 +95,6 @@ useEffect(() => { ## 延伸阅读 -* [React 文档：使用 Effect Hook](https://reactjs.org/docs/hooks-effect.html) -* [React 文档：Hook 的规则](https://reactjs.org/docs/hooks-rules.html) +* [React 文档：使用 Effect Hook](https://react.dev/reference/react/useEffect) +* [React 文档：Hook 的规则](https://react.dev/reference/rules/rules-of-hooks) * [Overreacted：useEffect 的完整指南](https://overreacted.io/a-complete-guide-to-useeffect/) diff --git a/questions/what-is-code-splitting-in-a-react-application/en-US.mdx b/questions/what-is-code-splitting-in-a-react-application/en-US.mdx index 24a396c..987e3b9 100644 --- a/questions/what-is-code-splitting-in-a-react-application/en-US.mdx +++ b/questions/what-is-code-splitting-in-a-react-application/en-US.mdx @@ -70,6 +70,6 @@ function App() { ## Further reading -- [React documentation on code splitting](https://reactjs.org/docs/code-splitting.html) +- [React documentation on React.lazy](https://react.dev/reference/react/lazy) - [Webpack documentation on code splitting](https://webpack.js.org/guides/code-splitting/) - [MDN Web Docs on dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) diff --git a/questions/what-is-code-splitting-in-a-react-application/zh-CN.mdx b/questions/what-is-code-splitting-in-a-react-application/zh-CN.mdx index 546bb8d..0ea353c 100644 --- a/questions/what-is-code-splitting-in-a-react-application/zh-CN.mdx +++ b/questions/what-is-code-splitting-in-a-react-application/zh-CN.mdx @@ -70,6 +70,6 @@ function App() { ## 延伸阅读 -* [React 关于代码分割的文档](https://reactjs.org/docs/code-splitting.html) +* [React.lazy 文档](https://react.dev/reference/react/lazy) * [Webpack 关于代码分割的文档](https://webpack.js.org/guides/code-splitting/) * [MDN Web Docs 关于动态导入的文档](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) diff --git a/questions/what-is-forwardref-in-react-used-for/en-US.mdx b/questions/what-is-forwardref-in-react-used-for/en-US.mdx index f52bac9..f247645 100644 --- a/questions/what-is-forwardref-in-react-used-for/en-US.mdx +++ b/questions/what-is-forwardref-in-react-used-for/en-US.mdx @@ -77,6 +77,6 @@ In this example: ## Further reading -- [React documentation on `forwardRef()`](https://reactjs.org/docs/forwarding-refs.html) -- [Using the `useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) -- [Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) +- [React documentation on `forwardRef()`](https://react.dev/reference/react/forwardRef) +- [Using the `useRef` Hook](https://react.dev/reference/react/useRef) +- [Refs and the DOM](https://react.dev/learn/manipulating-the-dom-with-refs) diff --git a/questions/what-is-forwardref-in-react-used-for/zh-CN.mdx b/questions/what-is-forwardref-in-react-used-for/zh-CN.mdx index da9c1f0..927ec1e 100644 --- a/questions/what-is-forwardref-in-react-used-for/zh-CN.mdx +++ b/questions/what-is-forwardref-in-react-used-for/zh-CN.mdx @@ -77,6 +77,6 @@ export default ParentComponent; ## 延伸阅读 -* [`forwardRef()` 的 React 文档](https://reactjs.org/docs/forwarding-refs.html) -* [使用 `useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) -* [Refs 和 DOM](https://reactjs.org/docs/refs-and-the-dom.html) +* [`forwardRef()` 的 React 文档](https://react.dev/reference/react/forwardRef) +* [使用 `useRef` Hook](https://react.dev/reference/react/useRef) +* [Refs 和 DOM](https://react.dev/learn/manipulating-the-dom-with-refs) diff --git a/questions/what-is-jsx-and-how-does-it-work/en-US.mdx b/questions/what-is-jsx-and-how-does-it-work/en-US.mdx index 3e39453..a0fb29f 100644 --- a/questions/what-is-jsx-and-how-does-it-work/en-US.mdx +++ b/questions/what-is-jsx-and-how-does-it-work/en-US.mdx @@ -67,6 +67,6 @@ By default, React DOM escapes any values embedded in JSX before rendering them. ## Further reading -- [React JSX documentation](https://reactjs.org/docs/introducing-jsx.html) +- [React JSX documentation](https://react.dev/learn/writing-markup-with-jsx) - [Babel](https://babeljs.io/) - [MDN Web Docs on JSX](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/JSX) diff --git a/questions/what-is-jsx-and-how-does-it-work/zh-CN.mdx b/questions/what-is-jsx-and-how-does-it-work/zh-CN.mdx index 6028acf..76ab7b8 100644 --- a/questions/what-is-jsx-and-how-does-it-work/zh-CN.mdx +++ b/questions/what-is-jsx-and-how-does-it-work/zh-CN.mdx @@ -67,6 +67,6 @@ const element = User Avatar; ## 延伸阅读 -* [React JSX 文档](https://reactjs.org/docs/introducing-jsx.html) +* [React JSX 文档](https://react.dev/learn/writing-markup-with-jsx) * [Babel](https://babeljs.io/) * [MDN Web Docs 关于 JSX](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/JSX) diff --git a/questions/what-is-react-describe-the-benefits-of-react/en-US.mdx b/questions/what-is-react-describe-the-benefits-of-react/en-US.mdx index c22a12e..5741ab2 100644 --- a/questions/what-is-react-describe-the-benefits-of-react/en-US.mdx +++ b/questions/what-is-react-describe-the-benefits-of-react/en-US.mdx @@ -51,7 +51,7 @@ React's versatility extends beyond web development. With React Native, you can u ## Further reading -- **React Official Website:** [https://reactjs.org/](https://reactjs.org/) -- **React Documentation:** [https://reactjs.org/docs/getting-started.html](https://reactjs.org/docs/getting-started.html) -- **React Blog:** [https://reactjs.org/blog/](https://reactjs.org/blog/) +- **React Official Website:** [https://react.dev/](https://react.dev/) +- **React Documentation:** [https://react.dev/learn](https://react.dev/learn) +- **React Blog:** [https://react.dev/blog](https://react.dev/blog) - **React Native:** [https://reactnative.dev/](https://reactnative.dev/) diff --git a/questions/what-is-react-describe-the-benefits-of-react/zh-CN.mdx b/questions/what-is-react-describe-the-benefits-of-react/zh-CN.mdx index a1871aa..3e5c46d 100644 --- a/questions/what-is-react-describe-the-benefits-of-react/zh-CN.mdx +++ b/questions/what-is-react-describe-the-benefits-of-react/zh-CN.mdx @@ -51,7 +51,7 @@ React 的多功能性超出了 Web 开发的范围。 使用 React Native，您 ## 延伸阅读 -* **React 官方网站：** [https://reactjs.org/](https://reactjs.org/) -* **React 文档：** [https://reactjs.org/docs/getting-started.html](https://reactjs.org/docs/getting-started.html) -* **React 博客：** [https://reactjs.org/blog/](https://reactjs.org/blog/) +* **React 官方网站：** [https://react.dev/](https://react.dev/) +* **React 文档：** [https://react.dev/learn](https://react.dev/learn) +* **React 博客：** [https://react.dev/blog](https://react.dev/blog) * **React Native：** [https://reactnative.dev/](https://reactnative.dev/) diff --git a/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.mdx b/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.mdx index fafbd21..3eb33d4 100644 --- a/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.mdx +++ b/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/en-US.mdx @@ -63,5 +63,4 @@ With the previous stack-based algorithm, rendering this component could cause th ## Further reading - [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture) -- [Introducing React Fiber](https://reactjs.org/blog/2017/09/26/react-v16.0.html) -- [React Docs: Concurrent Mode](https://reactjs.org/docs/concurrent-mode-intro.html) +- [React Blog: Concurrent Features](https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features) diff --git a/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.mdx b/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.mdx index 19f37c6..48fe5b4 100644 --- a/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.mdx +++ b/questions/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach/zh-CN.mdx @@ -63,5 +63,4 @@ class MyComponent extends React.Component { ## 延伸阅读 * [React Fiber 架构](https://github.com/acdlite/react-fiber-architecture) -* [React Fiber 简介](https://reactjs.org/blog/2017/09/26/react-v16.0.html) -* [React 文档：并发模式](https://reactjs.org/docs/concurrent-mode-intro.html) +* [React 官方博客：并发特性](https://react.dev/blog/2022/03/29/react-v18#gradually-adopting-concurrent-features) diff --git a/questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.mdx b/questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.mdx index fcc1fa5..40a7c99 100644 --- a/questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.mdx +++ b/questions/what-is-react-strict-mode-and-what-are-its-benefits/en-US.mdx @@ -48,6 +48,6 @@ By enabling React strict mode, you can ensure that your components are more resi ## Further reading -- [React Strict Mode Documentation](https://reactjs.org/docs/strict-mode.html) -- [React Lifecycle Methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle) -- [Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) +- [React Strict Mode Documentation](https://react.dev/reference/react/StrictMode) +- [React Lifecycle Methods](https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component) +- [Refs and the DOM](https://react.dev/learn/manipulating-the-dom-with-refs) diff --git a/questions/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.mdx b/questions/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.mdx index b045b39..53af731 100644 --- a/questions/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.mdx +++ b/questions/what-is-react-strict-mode-and-what-are-its-benefits/zh-CN.mdx @@ -48,6 +48,6 @@ React 严格模式通过有意地双重调用某些生命周期方法和函数 ## 延伸阅读 -* [React 严格模式文档](https://reactjs.org/docs/strict-mode.html) -* [React 生命周期方法](https://reactjs.org/docs/react-component.html#the-component-lifecycle) -* [Refs 和 DOM](https://reactjs.org/docs/refs-and-the-dom.html) +* [React 严格模式文档](https://react.dev/reference/react/StrictMode) +* [React 生命周期方法](https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component) +* [Refs 和 DOM](https://react.dev/learn/manipulating-the-dom-with-refs) diff --git a/questions/what-is-react-suspense-and-what-does-it-enable/en-US.mdx b/questions/what-is-react-suspense-and-what-does-it-enable/en-US.mdx index 5a81dad..f6be5cf 100644 --- a/questions/what-is-react-suspense-and-what-does-it-enable/en-US.mdx +++ b/questions/what-is-react-suspense-and-what-does-it-enable/en-US.mdx @@ -84,7 +84,7 @@ In this example, `react-query` is used to fetch data, and `Suspense` provides a ## Further reading -- [React Suspense documentation](https://reactjs.org/docs/concurrent-mode-suspense.html) -- [React.lazy documentation](https://reactjs.org/docs/code-splitting.html#reactlazy) +- [React Suspense documentation](https://react.dev/reference/react/Suspense) +- [React.lazy documentation](https://react.dev/reference/react/lazy) - [React Query documentation](https://react-query.tanstack.com/) - [Relay documentation](https://relay.dev/docs/en/experimental/api-reference#suspense) diff --git a/questions/what-is-react-suspense-and-what-does-it-enable/zh-CN.mdx b/questions/what-is-react-suspense-and-what-does-it-enable/zh-CN.mdx index d0b5eb5..3a62eaa 100644 --- a/questions/what-is-react-suspense-and-what-does-it-enable/zh-CN.mdx +++ b/questions/what-is-react-suspense-and-what-does-it-enable/zh-CN.mdx @@ -84,7 +84,7 @@ function MyComponent() { ## 延伸阅读 -* [React Suspense 文档](https://reactjs.org/docs/concurrent-mode-suspense.html) -* [React.lazy 文档](https://reactjs.org/docs/code-splitting.html#reactlazy) +* [React Suspense 文档](https://react.dev/reference/react/Suspense) +* [React.lazy 文档](https://react.dev/reference/react/lazy) * [React Query 文档](https://react-query.tanstack.com/) * [Relay 文档](https://relay.dev/docs/en/experimental/api-reference#suspense) diff --git a/questions/what-is-reconciliation-in-react/en-US.mdx b/questions/what-is-reconciliation-in-react/en-US.mdx index b81eb1a..e7f7d29 100644 --- a/questions/what-is-reconciliation-in-react/en-US.mdx +++ b/questions/what-is-reconciliation-in-react/en-US.mdx @@ -60,6 +60,5 @@ In this example, when the `increment` method is called, the state changes, and R ## Further reading -- [React documentation on reconciliation](https://reactjs.org/docs/reconciliation.html) -- [Understanding the virtual DOM](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom) -- [React's diffing algorithm](https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm) +- [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) +- [Understanding the virtual DOM](https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/) diff --git a/questions/what-is-reconciliation-in-react/zh-CN.mdx b/questions/what-is-reconciliation-in-react/zh-CN.mdx index e2305e2..4f7dc1f 100644 --- a/questions/what-is-reconciliation-in-react/zh-CN.mdx +++ b/questions/what-is-reconciliation-in-react/zh-CN.mdx @@ -60,6 +60,5 @@ class MyComponent extends React.Component { ## 延伸阅读 -* [React 关于协调的文档](https://reactjs.org/docs/reconciliation.html) -* [了解虚拟 DOM](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom) -* [React 的差异算法](https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm) +* [React 关于协调的文档](https://react.dev/learn/preserving-and-resetting-state) +* [了解虚拟 DOM](https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/) diff --git a/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx b/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx index 79ca8ee..d7d0ff5 100644 --- a/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx +++ b/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/en-US.mdx @@ -60,6 +60,6 @@ In this example, using `item.id` as the `key` ensures that React can correctly i ## Further reading -- [React documentation on keys](https://reactjs.org/docs/lists-and-keys.html#keys) +- [React documentation on keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) - [Why using array index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) - [React performance optimization with keys](https://kentcdodds.com/blog/understanding-reacts-key-prop) diff --git a/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.mdx b/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.mdx index eece07b..24211f7 100644 --- a/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.mdx +++ b/questions/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react/zh-CN.mdx @@ -60,6 +60,6 @@ const List = () => ( ## 延伸阅读 -* [React 关于 keys 的文档](https://reactjs.org/docs/lists-and-keys.html#keys) +* [React 关于 keys 的文档](https://react.dev/learn/rendering-lists#why-does-react-need-keys) * [为什么使用数组索引作为 key 是一种反模式](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) * [使用 keys 优化 React 性能](https://kentcdodds.com/blog/understanding-reacts-key-prop) diff --git a/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.mdx b/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.mdx index 38af724..df2fd68 100644 --- a/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.mdx +++ b/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/en-US.mdx @@ -101,6 +101,5 @@ class UncontrolledComponent extends React.Component { ## Further reading -- [React documentation on controlled components](https://reactjs.org/docs/forms.html#controlled-components) -- [React documentation on uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) -- [React refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) +- [React documentation on controlled and uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) +- [React refs and the DOM](https://react.dev/learn/manipulating-the-dom-with-refs) diff --git a/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.mdx b/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.mdx index 859c7d4..07d361f 100644 --- a/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.mdx +++ b/questions/what-is-the-difference-between-controlled-and-uncontrolled-react-components/zh-CN.mdx @@ -101,6 +101,5 @@ class UncontrolledComponent extends React.Component { ## 延伸阅读 -* [React 关于受控组件的文档](https://reactjs.org/docs/forms.html#controlled-components) -* [React 关于非受控组件的文档](https://reactjs.org/docs/uncontrolled-components.html) -* [React refs 和 DOM](https://reactjs.org/docs/refs-and-the-dom.html) +* [React 关于受控与非受控组件的文档](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) +* [React refs 和 DOM](https://react.dev/learn/manipulating-the-dom-with-refs) diff --git a/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.mdx b/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.mdx index da4b966..fb152b8 100644 --- a/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.mdx +++ b/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/en-US.mdx @@ -58,7 +58,7 @@ A **React Component** is a reusable piece of the UI that can accept inputs (prop ## Further reading -- [React documentation: Rendering elements](https://reactjs.org/docs/rendering-elements.html) -- [React documentation: Components and props](https://reactjs.org/docs/components-and-props.html) -- [React documentation: JSX in depth](https://reactjs.org/docs/jsx-in-depth.html) -- [React documentation: State and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) +- [React documentation: Render and commit](https://react.dev/learn/render-and-commit) +- [React documentation: Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component) +- [React documentation: Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx) +- [React documentation: State: A Component's Memory](https://react.dev/learn/state-a-components-memory) diff --git a/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.mdx b/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.mdx index 79e1490..f8d3e82 100644 --- a/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.mdx +++ b/questions/what-is-the-difference-between-react-node-react-element-and-a-react-component/zh-CN.mdx @@ -58,7 +58,7 @@ const element = React.createElement( ## 延伸阅读 -* [React 文档：渲染元素](https://reactjs.org/docs/rendering-elements.html) -* [React 文档：组件和 props](https://reactjs.org/docs/components-and-props.html) -* [React 文档：深入了解 JSX](https://reactjs.org/docs/jsx-in-depth.html) -* [React 文档：状态和生命周期](https://reactjs.org/docs/state-and-lifecycle.html) +* [React 文档：渲染与提交](https://react.dev/learn/render-and-commit) +* [React 文档：将 Props 传递给组件](https://react.dev/learn/passing-props-to-a-component) +* [React 文档：使用 JSX 书写标签语言](https://react.dev/learn/writing-markup-with-jsx) +* [React 文档：State：组件的记忆](https://react.dev/learn/state-a-components-memory) diff --git a/questions/what-is-the-difference-between-state-and-props-in-react/en-US.mdx b/questions/what-is-the-difference-between-state-and-props-in-react/en-US.mdx index b5a8777..602faa2 100644 --- a/questions/what-is-the-difference-between-state-and-props-in-react/en-US.mdx +++ b/questions/what-is-the-difference-between-state-and-props-in-react/en-US.mdx @@ -105,6 +105,6 @@ function ChildComponent(props) { ## Further reading -- [React documentation on state and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) -- [React documentation on components and props](https://reactjs.org/docs/components-and-props.html) -- [React Hooks documentation](https://reactjs.org/docs/hooks-intro.html) +- [React documentation on state](https://react.dev/learn/state-a-components-memory) +- [React documentation on components and props](https://react.dev/learn/passing-props-to-a-component) +- [React Hooks documentation](https://react.dev/reference/react/hooks) diff --git a/questions/what-is-the-difference-between-state-and-props-in-react/zh-CN.mdx b/questions/what-is-the-difference-between-state-and-props-in-react/zh-CN.mdx index 7aabd80..54ef6d8 100644 --- a/questions/what-is-the-difference-between-state-and-props-in-react/zh-CN.mdx +++ b/questions/what-is-the-difference-between-state-and-props-in-react/zh-CN.mdx @@ -105,6 +105,6 @@ function ChildComponent(props) { ## 延伸阅读 -* [React 关于 state 和生命周期的文档](https://reactjs.org/docs/state-and-lifecycle.html) -* [React 关于组件和 props 的文档](https://reactjs.org/docs/components-and-props.html) -* [React Hooks 文档](https://reactjs.org/docs/hooks-intro.html) +* [React 关于 state 的文档](https://react.dev/learn/state-a-components-memory) +* [React 关于组件和 props 的文档](https://react.dev/learn/passing-props-to-a-component) +* [React Hooks 文档](https://react.dev/reference/react/hooks) diff --git a/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.mdx index 39f219b..62e2bf8 100644 --- a/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/en-US.mdx @@ -69,6 +69,6 @@ In this example, using the callback function format ensures that the `counter` s ## Further reading -- [React Docs: State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) -- [React Docs: setState()](https://reactjs.org/docs/react-component.html#setstate) -- [React Docs: Handling Events](https://reactjs.org/docs/handling-events.html) +- [React Docs: State: A Component's Memory](https://react.dev/learn/state-a-components-memory) +- [React Docs: setState()](https://react.dev/reference/react/useState#setstate) +- [React Docs: Responding to Events](https://react.dev/learn/responding-to-events) diff --git a/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.mdx b/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.mdx index 54f3f01..5924ab0 100644 --- a/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.mdx +++ b/questions/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used/zh-CN.mdx @@ -69,6 +69,6 @@ class Counter extends React.Component { ## 延伸阅读 -* [React 文档：状态和生命周期](https://reactjs.org/docs/state-and-lifecycle.html) -* [React 文档：setState()](https://reactjs.org/docs/react-component.html#setstate) -* [React 文档：处理事件](https://reactjs.org/docs/handling-events.html) +* [React 文档：State：组件的记忆](https://react.dev/learn/state-a-components-memory) +* [React 文档：setState()](https://react.dev/reference/react/useState#setstate) +* [React 文档：响应事件](https://react.dev/learn/responding-to-events) diff --git a/questions/what-is-the-purpose-of-the-key-prop-in-react/en-US.mdx b/questions/what-is-the-purpose-of-the-key-prop-in-react/en-US.mdx index 18bf32a..6b18153 100644 --- a/questions/what-is-the-purpose-of-the-key-prop-in-react/en-US.mdx +++ b/questions/what-is-the-purpose-of-the-key-prop-in-react/en-US.mdx @@ -71,6 +71,6 @@ function ListItem({ value }) { ## Further reading -- [React documentation on keys](https://reactjs.org/docs/lists-and-keys.html#keys) +- [React documentation on keys](https://react.dev/learn/rendering-lists#why-does-react-need-keys) - [Why keys are important in React](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) -- [React's reconciliation algorithm](https://reactjs.org/docs/reconciliation.html) +- [Preserving and Resetting State in React](https://react.dev/learn/preserving-and-resetting-state) diff --git a/questions/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.mdx b/questions/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.mdx index 28aad07..cd6f47c 100644 --- a/questions/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.mdx +++ b/questions/what-is-the-purpose-of-the-key-prop-in-react/zh-CN.mdx @@ -71,6 +71,6 @@ function ListItem({ value }) { ## 延伸阅读 -* [React 关于键的文档](https://reactjs.org/docs/lists-and-keys.html#keys) +* [React 关于键的文档](https://react.dev/learn/rendering-lists#why-does-react-need-keys) * [为什么键在 React 中很重要](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) -* [React 的协调算法](https://reactjs.org/docs/reconciliation.html) +* [React 中如何保留与重置 state](https://react.dev/learn/preserving-and-resetting-state) diff --git a/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.mdx index b9095aa..a57823f 100644 --- a/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/en-US.mdx @@ -62,6 +62,6 @@ In complex applications, re-creating functions on every render can be costly in ## Further reading -- [React documentation on `useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) -- [React memoization techniques](https://reactjs.org/docs/optimizing-performance.html#use-memo) +- [React documentation on `useCallback`](https://react.dev/reference/react/useCallback) +- [React memoization techniques](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) - [Understanding React's `useCallback` and `useMemo`](https://kentcdodds.com/blog/usememo-and-usecallback) diff --git a/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.mdx b/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.mdx index 738c396..65b73ab 100644 --- a/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.mdx +++ b/questions/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used/zh-CN.mdx @@ -62,6 +62,6 @@ const ChildComponent = React.memo(({ onClick }) => { ## 延伸阅读 -* [React 关于 `useCallback` 的文档](https://reactjs.org/docs/hooks-reference.html#usecallback) -* [React 记忆化技术](https://reactjs.org/docs/optimizing-performance.html#use-memo) +* [React 关于 `useCallback` 的文档](https://react.dev/reference/react/useCallback) +* [React 记忆化技术](https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) * [理解 React 的 `useCallback` 和 `useMemo`](https://kentcdodds.com/blog/usememo-and-usecallback) diff --git a/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.mdx index f35577f..9e426c5 100644 --- a/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/en-US.mdx @@ -97,6 +97,6 @@ function ExampleComponent() { ## Further reading -- [React documentation on `useId`](https://reactjs.org/docs/hooks-reference.html#useid) +- [React documentation on `useId`](https://react.dev/reference/react/useId) - [MDN Web Docs on accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) -- [React 18 release notes](https://reactjs.org/blog/2022/03/29/react-v18.html) +- [React 18 release notes](https://react.dev/blog/2022/03/29/react-v18) diff --git a/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.mdx b/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.mdx index 5a4a2d0..1a35770 100644 --- a/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.mdx +++ b/questions/what-is-the-useid-hook-in-react-and-when-should-it-be-used/zh-CN.mdx @@ -97,6 +97,6 @@ function ExampleComponent() { ## 延伸阅读 -* [React `useId` 文档](https://reactjs.org/docs/hooks-reference.html#useid) +* [React `useId` 文档](https://react.dev/reference/react/useId) * [MDN Web Docs 上的无障碍功能](https://developer.mozilla.org/en-US/docs/Web/Accessibility) -* [React 18 发布说明](https://reactjs.org/blog/2022/03/29/react-v18.html) +* [React 18 发布说明](https://react.dev/blog/2022/03/29/react-v18) diff --git a/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.mdx index a82abb4..68f4882 100644 --- a/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/en-US.mdx @@ -69,6 +69,5 @@ const MyComponent = ({ items }) => { ## Further reading -- [React documentation on `useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) +- [React documentation on `useMemo`](https://react.dev/reference/react/useMemo) - [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback) by Kent C. Dodds -- [Optimizing performance in React](https://reactjs.org/docs/optimizing-performance.html) diff --git a/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.mdx b/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.mdx index 9ffcb7e..63b8dfa 100644 --- a/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.mdx +++ b/questions/what-is-the-usememo-hook-in-react-and-when-should-it-be-used/zh-CN.mdx @@ -69,6 +69,5 @@ const MyComponent = ({ items }) => { ## 延伸阅读 -* [`useMemo` 的 React 文档](https://reactjs.org/docs/hooks-reference.html#usememo) +* [`useMemo` 的 React 文档](https://react.dev/reference/react/useMemo) * [何时使用 useMemo 和 useCallback](https://kentcdodds.com/blog/usememo-and-usecallback) 作者 Kent C. Dodds -* [优化 React 中的性能](https://reactjs.org/docs/optimizing-performance.html) diff --git a/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.mdx index 68b11c5..91a39fc 100644 --- a/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/en-US.mdx @@ -88,6 +88,6 @@ export default Counter; ## Further reading -- [React documentation on `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) -- [Using the `useReducer` hook](https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down) +- [React documentation on `useReducer`](https://react.dev/reference/react/useReducer) +- [Using the `useReducer` hook](https://react.dev/learn/scaling-up-with-reducer-and-context) - [A complete guide to `useReducer`](https://www.smashingmagazine.com/2020/06/redux-patterns-use-reducer-react/) diff --git a/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.mdx b/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.mdx index b7c0d15..d51e3bf 100644 --- a/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.mdx +++ b/questions/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used/zh-CN.mdx @@ -88,6 +88,6 @@ export default Counter; ## 延伸阅读 -* [React 关于 `useReducer` 的文档](https://reactjs.org/docs/hooks-reference.html#usereducer) -* [使用 `useReducer` hook](https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down) +* [React 关于 `useReducer` 的文档](https://react.dev/reference/react/useReducer) +* [使用 `useReducer` hook](https://react.dev/learn/scaling-up-with-reducer-and-context) * [`useReducer` 完整指南](https://www.smashingmagazine.com/2020/06/redux-patterns-use-reducer-react/) diff --git a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx index 4f5539f..0e26511 100644 --- a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx +++ b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/en-US.mdx @@ -106,6 +106,6 @@ In this example, `prevCountRef` is used to keep a reference to the previous valu ## Further reading -- [React documentation on `useRef`](https://reactjs.org/docs/hooks-reference.html#useref) -- [Using the `useRef` hook](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables) -- [Common use cases for `useRef`](https://dev.to/kirubelkinfe/mastering-useref-in-react-with-typescript-4-different-use-cases-for-useref-2a87) +- [React documentation on `useRef`](https://react.dev/reference/react/useRef) +- [Using the `useRef` hook](https://react.dev/learn/manipulating-the-dom-with-refs) +- [Common use cases for `useRef`](https://blog.logrocket.com/how-to-use-react-useref-hook/) diff --git a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.mdx b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.mdx index 66891e9..f21b796 100644 --- a/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.mdx +++ b/questions/what-is-the-useref-hook-in-react-and-when-should-it-be-used/zh-CN.mdx @@ -106,6 +106,6 @@ function Example() { ## 延伸阅读 -* [`useRef` 的 React 文档](https://reactjs.org/docs/hooks-reference.html#useref) -* [使用 `useRef` hook](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables) +* [`useRef` 的 React 文档](https://react.dev/reference/react/useRef) +* [使用 `useRef` hook](https://react.dev/learn/manipulating-the-dom-with-refs) * [`useRef` 的常见用例](https://blog.logrocket.com/how-to-use-react-useref-hook/) diff --git a/questions/what-is-virtual-dom-in-react/en-US.mdx b/questions/what-is-virtual-dom-in-react/en-US.mdx index 1640cfa..76834d6 100644 --- a/questions/what-is-virtual-dom-in-react/en-US.mdx +++ b/questions/what-is-virtual-dom-in-react/en-US.mdx @@ -52,6 +52,5 @@ In this example, when the button is clicked, the state `count` is updated. React ## Further reading -- [React documentation on reconciliation](https://reactjs.org/docs/reconciliation.html) +- [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) - [Understanding the virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) -- [React's diffing algorithm](https://reactjs.org/docs/faq-internals.html#how-does-reacts-diffing-algorithm-work) diff --git a/questions/what-is-virtual-dom-in-react/zh-CN.mdx b/questions/what-is-virtual-dom-in-react/zh-CN.mdx index 8c28559..81c73d2 100644 --- a/questions/what-is-virtual-dom-in-react/zh-CN.mdx +++ b/questions/what-is-virtual-dom-in-react/zh-CN.mdx @@ -52,6 +52,5 @@ export default Counter; ## 延伸阅读 -* [React 关于协调的文档](https://reactjs.org/docs/reconciliation.html) +* [React 关于协调的文档](https://react.dev/learn/preserving-and-resetting-state) * [了解虚拟 DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) -* [React 的差异算法](https://reactjs.org/docs/faq-internals.html#how-does-reacts-diffing-algorithm-work) diff --git a/questions/why-does-react-recommend-against-mutating-state/en-US.mdx b/questions/why-does-react-recommend-against-mutating-state/en-US.mdx index 1065b7f..1cdfa6c 100644 --- a/questions/why-does-react-recommend-against-mutating-state/en-US.mdx +++ b/questions/why-does-react-recommend-against-mutating-state/en-US.mdx @@ -49,6 +49,6 @@ this.setState((prevState) => ({ ## Further reading -- [React documentation on state and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) -- [React documentation on reconciliation](https://reactjs.org/docs/reconciliation.html) +- [React documentation on state](https://react.dev/learn/state-a-components-memory) +- [React documentation on reconciliation](https://react.dev/learn/preserving-and-resetting-state) - [Why not to mutate state in React](https://daveceddia.com/why-not-modify-react-state-directly/) diff --git a/questions/why-does-react-recommend-against-mutating-state/zh-CN.mdx b/questions/why-does-react-recommend-against-mutating-state/zh-CN.mdx index c29e0ac..0d90379 100644 --- a/questions/why-does-react-recommend-against-mutating-state/zh-CN.mdx +++ b/questions/why-does-react-recommend-against-mutating-state/zh-CN.mdx @@ -49,6 +49,6 @@ this.setState((prevState) => ({ ## 延伸阅读 -* [React 关于状态和生命周期的文档](https://reactjs.org/docs/state-and-lifecycle.html) -* [React 关于协调的文档](https://reactjs.org/docs/reconciliation.html) +* [React 关于状态的文档](https://react.dev/learn/state-a-components-memory) +* [React 关于协调的文档](https://react.dev/learn/preserving-and-resetting-state) * [为什么不要在 React 中修改状态](https://daveceddia.com/why-not-modify-react-state-directly/)