React | 初学react（JSX创建虚拟DOM、创建组件的两种方法）

作者：System 时间：2024年08月16日分类：所有,react native 字数：622

这篇文章距离上次修改已过244天，其中的内容可能已经有所变动。




import React from 'react';
import ReactDOM from 'react-dom';
 
// 方法一：使用函数组件创建组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
// 方法二：使用类组件创建组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
 
// 使用JSX创建虚拟DOM
const element = <Welcome name="Sara" />;
 
// 将虚拟DOM渲染到HTML容器中
ReactDOM.render(element, document.getElementById('root'));

这段代码展示了如何在React中使用JSX创建虚拟DOM元素，并使用两种不同的方法定义组件：函数组件和类组件。函数组件是通过一个函数来接收props并返回一个React元素，而类组件则是通过扩展React.Component类来实现的。最后，我们使用ReactDOM.render()方法将虚拟DOM渲染到页面上的某个容器元素中。

React | 初学react（JSX创建虚拟DOM、创建组件的两种方法）

评论已关闭

推荐阅读