函数组件与元素渲染
React 18 的挂载入口是 ReactDOM.createRoot(container).render(<App />)（旧的 ReactDOM.render 已废弃）。被渲染的内容叫“元素（element）”，它是不可变对象——一旦创建就不再变化，更新 = 重新创建新元素。
函数组件是接收 props、返回 JSX 的普通函数。 React 元素与组件的区别：<Greeting /> 是“描述”（还没执行），Greeting() 的返回值是“元素”。 props 是只读的：组件内绝不能修改自己的 props，要变的数据请走 state。
- createRoot(container).render(
) 是唯一的渲染入口 - 函数组件 = 接收 props 返回 JSX 的纯函数；props 只读不可改
- 元素不可变：更新的本质是“重新渲染生成新元素”
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>函数组件与渲染</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // 组件：纯函数，props 是只读入参 function Clock({ now }) { return <h2>现在时刻：{now.toLocaleTimeString('zh-CN')}</h2>; } // props 默认值两种写法 function Button({ text = '默认按钮', onClick }) { return <button onClick={onClick}>{text}</button>; } // 同一组件可复用任意多次，互不影响 function App() { return ( <div style={{ padding: 16 }}> <Clock now={new Date()} /> <Clock now={new Date(2024, 0, 1)} /> <hr /> <Button text="点我" onClick={() => alert('你点了默认按钮')} /> <Button onClick={() => alert('没传 text，用了默认值')} /> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); // 想更新？重新 render（实际项目里由 setState 自动触发） setInterval(() => root.render(<Clock now={new Date()} />), 1000); </script> </body> </html>
本节要点组件是返回 JSX 的纯函数，props 只读；React 18 统一用 createRoot 挂载。
