Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.<\/p>\n\n\n\n
Imagine that your components are cooks in the kitchen<\/mark><\/strong>, assembling <\/em><\/strong>tasty dishes from ingredients<\/em><\/strong>\uff08\u60f3\u8c61\u4e00\u4e0b\u4f60\u7684\u7ec4\u4ef6\u662f\u53a8\u623f\u91cc\u7684\u53a8\u5e08<\/mark><\/strong>\uff0c\u628a\u98df\u6750\u70f9\u5236\u6210\u7f8e\u5473\u7684\u83dc\u80b4\u3002\uff09. assemble <\/strong>\/\u0259\u02c8sembl\/ \u96c6\u5408\uff0c\u805a\u96c6\uff1b\u88c5\u914d\uff1b ingredient <\/strong>\/\u026an\u02c8\u0261ri\u02d0di\u0259nt\/ (\u6df7\u5408\u7269\u7684)\u7ec4\u6210\u90e8\u5206; \u914d\u6599\uff1bscenario <\/strong>\/s\u0259\u02c8n\u00e6rio\u028a\/ \u60c5\u8282\uff1b\u5267\u672c\uff1b\u65b9\u6848<\/mark><\/em>\uff1b<\/mark><\/p>\n\n\n\n There are two reasons for a component to render\uff08\u6709\u4e24\u79cd\u539f\u56e0\u4f1a\u5bfc\u81f4\u7ec4\u4ef6\u7684\u6e32\u67d3<\/mark><\/strong>\uff09:<\/p>\n\n\n\n When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it\u2019s done by calling Try commenting out the Once the component has been initially rendered, <\/strong>you can trigger further renders by updating its state with the After you trigger a render, React calls your components to figure out what to display on screen. \uff08\u5728\u4f60\u89e6\u53d1\u6e32\u67d3\u540e\uff0cReact \u4f1a\u8c03\u7528\u4f60\u7684\u7ec4\u4ef6\u6765\u786e\u5b9a\u8981\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u5185\u5bb9\u3002<\/mark>\uff09\u201cRendering\u201d is React calling your components.<\/strong><\/p>\n\n\n\n This process is recursive: if the updated component returns some other component, React will render that<\/em> component next, and if that component also returns something, it will render that<\/em> component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.\uff08\u8fd9\u4e2a\u8fc7\u7a0b\u662f\u9012\u5f52\u7684\uff1a\u5982\u679c\u66f4\u65b0\u540e\u7684\u7ec4\u4ef6\u4f1a\u8fd4\u56de\u67d0\u4e2a\u53e6\u5916\u7684\u7ec4\u4ef6\uff0c\u90a3\u4e48 React \u63a5\u4e0b\u6765\u5c31\u4f1a\u6e32\u67d3 \u90a3\u4e2a<\/em> \u7ec4\u4ef6\uff0c\u8fd8\u662f\u770b\u4e0b\u9762\u7684\u4f8b\u5b50\u7406\u89e3\u5427<\/strong><\/mark>\uff09<\/p>\n\n\n\n In the following example, React will call Rendering must always be a pure calculation<\/a>:<\/p>\n\n\n\n Otherwise\uff08\u5426\u5219\uff09, you can encounter\uff08\u9047\u5230\uff09 confusing bugs and unpredictable <\/em><\/strong>behavior as your codebase grows in complexity. When developing in \u201cStrict Mode\u201d, React calls each component\u2019s function twice, which can help surface mistakes caused by impure functions.<\/p>\n\n\n\n The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the Performance<\/a> section. Don\u2019t optimize prematurely\uff08\u4e0d\u8981\u8fc7\u65e9\u4f18\u5316\uff09!<\/strong><\/p>\n\n\n\n After rendering (calling) your components, React will modify the DOM\uff08\u5728\u6e32\u67d3\uff08\u8c03\u7528\uff09\u4f60\u7684\u7ec4\u4ef6\u4e4b\u540e\uff0cReact \u5c06\u4f1a\u4fee\u6539 DOM<\/mark>\uff09.<\/p>\n\n\n\n React only changes the DOM nodes<\/mark><\/em> if there\u2019s a difference between renders.\uff08React \u4ec5\u5728\u6e32\u67d3\u4e4b\u95f4\u5b58\u5728\u5dee\u5f02\u65f6\u624d\u4f1a\u66f4\u6539 DOM \u8282\u70b9<\/mark><\/strong>\uff09<\/strong> This works because during this last step, React only updates the content of After rendering is done and React updated the DOM, the browser will repaint the screen. \uff08\u5728\u6e32\u67d3\u5b8c\u6210\u5e76\u4e14 React \u66f4\u65b0 DOM \u4e4b\u540e\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1a\u91cd\u65b0\u7ed8\u5236\u5c4f\u5e55\u3002<\/mark>\uff09
In this scenario<\/em><\/strong>, React is the waiter who puts in requests<\/em><\/strong> from customers and brings them their orders\uff08React \u5c31\u662f\u4e00\u540d\u670d\u52a1\u5458\uff0c\u4ed6\u4f1a\u5e2e\u5ba2\u6237\u4eec\u4e0b\u5355\u5e76\u4e3a\u4ed6\u4eec\u9001\u6765\u6240\u70b9\u7684\u83dc\u54c1\u3002<\/strong>\uff09<\/mark>. This process of requesting and serving UI has three steps:<\/p>\n\n\n\n\n
Step 1: Trigger a render\u00a0\uff08\u89e6\u53d1\u4e00\u6b21\u6e32\u67d3\uff09<\/h2>\n\n\n\n
\n
Initial render <\/a><\/h3>\n\n\n\n
createRoot<\/code><\/a> with the target DOM node, and then calling its render<\/code> method with your component\uff08\u7136\u540e\u7528\u4f60\u7684\u7ec4\u4ef6\u8c03\u7528 render<\/code> \u51fd\u6570\u5b8c\u6210\u7684<\/mark>\uff09:<\/p>\n\n\n\nexport default function Image() {\n return (\n <img\n src=\"https:\/\/i.imgur.com\/ZF6s192.jpg\"\n alt=\"'Floralis Gen\u00e9rica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals\"\n \/>\n );\n}\n\nimport Image from '.\/Image.js';\nimport { createRoot } from 'react-dom\/client';\n\nconst root = createRoot(document.getElementById('root'))\n\/\/ render \u51fd\u6570\uff0c\u5982\u679c\u4f60\u6ce8\u91ca\u6389 root.render()\uff0c\u7136\u540e\u4f60\u5c06\u4f1a\u770b\u5230\u7ec4\u4ef6\u6d88\u5931\u3002\nroot.render(<Image \/>);<\/code><\/pre>\n\n\n\nroot.render()<\/code> call and see the component disappear!<\/p>\n\n\n\nRe-renders when state updates\u00a0<\/a>\uff08\u72b6\u6001\u66f4\u65b0\u65f6\u91cd\u65b0\u6e32\u67d3\uff09<\/h3>\n\n\n\n
set<\/code> function.<\/a> \uff08\u4e00\u65e6\u7ec4\u4ef6\u88ab\u521d\u6b21\u6e32\u67d3\uff0c\u4f60\u5c31\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 set<\/code> \u51fd\u6570<\/a> \u66f4\u65b0\u5176\u72b6\u6001\u6765\u89e6\u53d1\u4e4b\u540e\u7684\u6e32\u67d3\u3002\uff09<\/mark><\/strong>
Updating your component\u2019s state automatically queues a render\uff08\u66f4\u65b0\u7ec4\u4ef6\u7684\u72b6\u6001\u4f1a\u81ea\u52a8\u5c06\u4e00\u6b21\u6e32\u67d3\u9001\u5165\u961f\u5217\u3002==\u300b\u9001\u5165\u961f\u5217\uff0c\u5e76\u4e0d\u4ee3\u8868\u7acb\u9a6c\u6e32\u67d3\uff01\uff01<\/mark><\/strong>\uff09. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)<\/p>\n\n\n\nStep 2: React renders your components\u00a0<\/a>\uff08React \u6e32\u67d3\u4f60\u7684\u7ec4\u4ef6\uff09<\/h2>\n\n\n\n
\n
Gallery()<\/code> and Image()<\/code> several times:<\/p>\n\n\n\n\/\/ Gallery.js\nexport default function Gallery() {\n return (\n <section>\n <h1>\u9f13\u821e\u4eba\u5fc3\u7684\u96d5\u5851<\/h1>\n <Image \/>\n <Image \/>\n <Image \/>\n <\/section>\n );\n}\n\nfunction Image() {\n return (\n <img\n src=\"https:\/\/i.imgur.com\/ZF6s192.jpg\"\n alt=\"'Floralis Gen\u00e9rica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals\"\n \/>\n );\n}\n\n\/\/ index.js\nimport Gallery from '.\/Gallery.js';\nimport { createRoot } from 'react-dom\/client';\n\nconst root = createRoot(document.getElementById('root'))\nroot.render(<Gallery \/>);<\/code><\/pre>\n\n\n\n\n
<section><\/code>,\u00a0<h1><\/code>, and three\u00a0<img><\/code>\u00a0tags.\uff08\u521d\u6b21\u6e32\u67d3\u65f6\uff0cReact \u4f1a\u4e3a <section><\/code>,\u00a0<h1><\/code>, and three\u00a0<img><\/code>\u00a0tags \u521b\u5efa DOM \u8282\u70b9<\/strong><\/mark>\uff09<\/li>\n\n\n\nPitfall<\/h3>\n\n\n\n
\n
Optimizing performance\uff08\u6027\u80fd\u4f18\u5316\uff09<\/h3>\n\n\n\n
Step 3: React commits changes to the DOM\u00a0<\/a>\uff08React \u628a\u66f4\u6539\u63d0\u4ea4\u5230 DOM \u4e0a\uff09<\/h2>\n\n\n\n
\n
appendChild()<\/code><\/a>\u00a0DOM API to put all the DOM nodes it has created on screen.<\/li>\n\n\n\n
For example, here is a component that re-renders with different props passed from<\/em><\/strong> its parent every second\uff08\u6bcf\u79d2\uff09<\/em><\/strong>. Notice how you can add some text into the <input><\/code>, updating its value<\/code>, but the text doesn\u2019t disappear when the component re-renders\u3010\u6211\u7406\u89e3\u662f\u56e0\u4e3a\u5f80\u91cc\u9762\u8f93\u5165\u503c\u5e76\u6ca1\u6709\u89e6\u53d1\u91cd\u65b0\u6e32\u67d3~~<\/mark><\/strong>\u3011:<\/p>\n\n\n\nexport default function Clock({ time }) {\n return (\n <>\n <h1>{time}<\/h1>\n <input \/>\n <\/>\n );\n}<\/code><\/pre>\n\n\n\n<h1><\/code> with the new time<\/code>. It sees that the <input><\/code> appears in the JSX in the same place as last time, so React doesn\u2019t touch the <input><\/code>\u2014or its value<\/code>!<\/p>\n\n\n\nEpilogue: Browser paint\u00a0<\/a>\uff08\u5c3e\u58f0\uff1a\u6d4f\u89c8\u5668\u7ed8\u5236\u00a0\uff09<\/h2>\n\n\n\n
Although this process is known as \u201cbrowser rendering\u201d, we\u2019ll refer to it as \u201cpainting\u201d to avoid confusion throughout the docs.<\/p>\n\n\n\nRecap<\/a><\/h2>\n\n\n\n