React 元素渲染

React 元素渲染

React 是一个用于构建用户界面的 JavaScript 库，它允许开发人员创建大型应用程序，这些应用程序可以随着时间的推移而高效地更新和渲染。React 的核心概念之一是元素渲染，它描述了如何将 JavaScript 对象转换为 DOM（文档对象模型）元素。

什么是 React 元素？

React 元素是 React 应用程序中最小的构建块。它是一个描述屏幕上应显示内容的普通 JavaScript 对象。React 元素不同于 DOM 元素，因为它们不会直接在浏览器中渲染。相反，它们被 React 使用来构建 DOM 并保持其更新。

const element = <h1>Hello, world!</h1>;

在上面的例子中，element 是一个 React 元素，它表示一个 h1 标签，其中包含文本“Hello, world!”。

渲染 React 元素

要将 React 元素渲染到 DOM 中，需要使用 ReactDOM.render() 方法。这个方法接受两个参数：要渲染的 React 元素和 DOM 中的目标节点。

import ReactDOM from 'react-dom';const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

在这个例子中，ReactDOM.render() 将 element 渲染到 ID 为 root 的 DOM 节点中。

更新已渲染的元素

React 元素是不可变的。一旦创建，就不能更改其子元素或属性。要更新 UI，需要创建一个新的 React 元素，并将其传递给 ReactDOM.render()。

import ReactDOM from 'react-dom';function tick() {const element = (<div><h1>Hello, world!</h1><h2>It is {new Date().toLocaleTimeString()}.</h2></div>);ReactDOM.render(element, document.getElementById('root'));
}setInterval(tick, 1000);

在这个例子中，tick 函数每秒创建一个新的 React 元素，并使用 ReactDOM.render() 更新 DOM。

React 组件

React 组件是返回 React 元素的函数或类。它们允许你将 UI 分割成独立可复用的部分，并独立管理每个部分的状态。

import ReactDOM from 'react-dom';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="Sarah" />;
ReactDOM.render(element, document.getElementById('root'));

在这个例子中，Welcome 是一个组件，它接受一个 name 属性并返回一个包含该名字的 h1 标签的 React 元素。

总结

React 元素渲染是 React 应用程序的核心。通过创建和更新 React 元素，开发人员可以构建动态和交互式的用户界面。React 的声明式和组件化的特性使得它成为构建大型应用程序的一个强大工具。