子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 元素渲染 ​

React 元素 ​

React 元素是构成 React 应用的最小单位，用于描述屏幕上输出的内容。与浏览器的 DOM 元素不同，React 元素实际上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

React 根节点 ​

要将 React 元素渲染到 DOM 中，首先在 HTML 页面中添加一个 id="app" 的 <div>，这个 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 "根" DOM 节点。

React 通过 ReactDOM.render() 把数据渲染到页面上。例如：

javascript
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById("app"));

注意

React 18 中，ReactDOM.render 方法已经被弃用，建议使用 ReactDOM.createRoot 方法替代。

更新元素渲染时，需要注意的是 React 元素都是不可变的。当元素被创建之后，是无法改变其内容或属性的。

案例: 1.计时器 - 函数组件实现 ​

目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法（后续章节中还有其他方式介绍），例如：

javascript
const Clock = () => {
  const time = new Date().toLocaleTimeString();
  return <h2>Hello, world! 现在是 {time}</h2>;
};
const tick = () => ReactDOM.render(<Clock />, document.getElementById("app"));
setInterval(tick, 1000);

以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

案例: 2.计时器 - 函数组件 - 属性传参 ​

我们可以将要展示的部分封装起来，以下实例用一个函数来表示：

javascript
const Clock = (props) => <h2>Hello, world! 现在是 {props.time}</h2>;
const tick = () =>
  ReactDOM.render(
    <Clock time={new Date().toLocaleTimeString()} />,
    document.getElementById("app-props")
  );
setInterval(tick, 1000);

案例: 3.计时器 - 类组件实现 ​

除了函数外，我们还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props：

javascript
class Clock extends React.Component {
  render() {
    return <h2>Hello, world! 现在是 {this.props.time}</h2>;
  }
}
const tick = () =>
  ReactDOM.render(
    <Clock time={new Date().toLocaleTimeString()} />,
    document.getElementById("app-class")
  );
setInterval(tick, 1000);

代码与演示 ​

1. 全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-jsx</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <div id="app-props"></div>
    <div id="app-class"></div>
    <script type="text/babel">
      (function () {
        // 案例: 1.计时器 - 函数组件实现
        const Clock = () => {
          const time = new Date().toLocaleTimeString();
          return <h2>Hello, world! 现在是 {time}</h2>;
        };
        const tick = () =>
          ReactDOM.render(<Clock />, document.getElementById("app"));
        setInterval(tick, 1000);
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2.计时器 - 函数组件 - 属性传参
        const Clock = (props) => <h2>Hello, world! 现在是 {props.time}</h2>;
        const tick = () =>
          ReactDOM.render(
            <Clock time={new Date().toLocaleTimeString()} />,
            document.getElementById("app-props")
          );
        setInterval(tick, 1000);
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3.计时器 - 类组件实现
        class Clock extends React.Component {
          render() {
            return <h2>Hello, world! 现在是 {this.props.time}</h2>;
          }
        }
        const tick = () =>
          ReactDOM.render(
            <Clock time={new Date().toLocaleTimeString()} />,
            document.getElementById("app-class")
          );
        setInterval(tick, 1000);
      })();
    </script>
  </body>
</html>

2. 案例演示 ​



test-react-dom.html 资源加载中...