组件渲染

分类	Hooks	Classes
JSX	<Fragment> / <></> v16.2	React.Children v0.13 key v0.13
\-	-	htmlFor v0.13
\-	-	classname v0.13
\-	-	dangerouslySetInnerHTML v0.13
渲染函数	-	createElement(type, props, ...children) v0.13
\-	-	createFactory(type) v0.13
\-	-	cloneElement(element, props, ...children) v0.13
\-	-	isValidElement() v0.13
SSR/服务端渲染	-	ReactDOM.renderToString() v0.13 renderToString(reactNode, options?) v18.0
\-	-	ReactDOM.renderToStaticMarkup() v0.13 renderToStaticMarkup(reactNode, options?) v18.0
\-Web Streams	-	renderToReadableStream(reactNode, options?) v18.0
\-Node.js Streams	-	renderToPipeableStream(reactNode, options?) v18.0
\-	-	renderToStaticNodeStream(reactNode, options?) v18.0
\-	-	ReactDOM.renderToNodeStream() v0.13 renderToNodeStream(reactNode, options?) v18.0
SSG/静态站点生成	prerender() v19.0	-
\-	prerenderToNodeStream() v19.0	-
HTML元数据	<meta> v19.0	-
\-	<title> v19.0	-
\-	<script> v19.0	-
预加载资源	preinit() v19.0	-
\-	preload() v19.0	-
\-	prefetchDNS() v19.0	-
\-	preconnect() v19.0	-
\-	preinitModule() v19.0	-
\-	preloadModule() v19.0	-
服务器组件	cache() v19.0	-

大纲

• 模板
  • 指令
    • 自定义指令
    • 指令参数及修饰符
    • 注册指令
  • 插槽
    • 内容和出口
• JSX
  • 条件渲染
  • 列表渲染
  • 显示隐藏
  • 文本渲染
  • HTML 渲染
  • 其他
    • 跳过编译
    • 隐藏未编译的插值
    • 只渲染一次
    • 缓存模板
• 渲染函数
• 服务端渲染
• 静态站点生成
• HTML元数据
• 预加载资源
• 服务器组件
• 自定义渲染
  • 原生渲染
  • 测试渲染
• 渲染原理

JSX

• https://zh-hans.react.dev/learn/writing-markup-with-jsx
• https://zh-hans.legacy.reactjs.org/docs/introducing-jsx.html
• https://zh-hans.legacy.reactjs.org/docs/jsx-in-depth.html

条件渲染

• && 与运算符
• ? : 三目运算符
• null

// https://zh-hans.react.dev/learn/conditional-rendering
// https://zh-hans.legacy.reactjs.org/docs/conditional-rendering.html

列表渲染

• key
• <Fragment> / <></>
• children

// https://zh-hans.react.dev/learn/rendering-lists
// https://zh-hans.react.dev/reference/react/Fragment
// https://zh-hans.legacy.reactjs.org/docs/lists-and-keys.html
// https://zh-hans.legacy.reactjs.org/docs/fragments.html

显示隐藏

• classname
• 表单属性
  • htmlFor
  • defaultValue

// https://zh-hans.react.dev/reference/react-dom/components/common#applying-css-styles
// https://zh-hans.react.dev/reference/react-dom/components/common#manipulating-a-dom-node-with-a-ref
// https://zh-hans.react.dev/learn/writing-markup-with-jsx#the-rules-of-jsx
// https://zh-hans.legacy.reactjs.org/docs/faq-styling.html

文本渲染

• {}

// https://zh-hans.react.dev/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world
// https://zh-hans.legacy.reactjs.org/docs/introducing-jsx.html
// https://zh-hans.legacy.reactjs.org/docs/faq-build.html

HTML渲染

• dangerouslySetInnerHTML={{__html: HTML }}

// https://zh-hans.react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html
// https://zh-hans.legacy.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

渲染函数

• createElement()
• createFactory()
• cloneElement()
• React.isValidElement()

// https://zh-hans.react.dev/reference/react/createElement#reference
  // https://zh-hans.react.dev/reference/react/createFactory
  // https://zh-hans.react.dev/reference/react/cloneElement
// https://zh-hans.react.dev/reference/react/isValidElement
// https://zh-hans.legacy.reactjs.org/docs/react-without-jsx.html

服务端渲染

• renderToString()
  • ReactDOM.renderToString()
• renderToStaticMarkup()
  • ReactDOM.renderToStaticMarkup()
• renderToPipeableStream()
• renderToStaticNodeStream()
• renderToReadableStream()

// https://zh-hans.react.dev/reference/react-dom/server
// https://zh-hans.legacy.reactjs.org/docs/react-dom-client.html
// https://zh-hans.legacy.reactjs.org/docs/react-dom-server.html

自定义渲染

• React Testing Library
• @testing-library/react
• @testing-library/react-native
• https://zh-hans.react.dev/reference/react/act
• https://zh-hans.legacy.reactjs.org/docs/codebase-overview.html#renderers
• https://zh-hans.react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer

渲染原理

初次渲染：

状态更新时重新渲染：

浏览器渲染（browser rendering）/ 绘制（painting）：

• https://zh-hans.react.dev/learn/render-and-commit
• https://zh-hans.legacy.reactjs.org/docs/codebase-overview.html#reconcilers