介绍react-优快云博客

什么是React

React是一个用于构建用户界面的JavaScript库。

传统构建页面的方式

<script>
    document.getElementById('app').addEventListener('click', () => {
        console.log('')
    });

    const div = docuemnt.createElement('div')
    // ...
</script>

早期，用JavaScript搭配HTML操作DOM来构建页面。

React构建页面的方式

import React from 'react';  
  
// React组件是一个函数，它接收props作为参数，并返回React元素  
function MyComponent() {  
  // 事件处理函数  
  const handleClick = () => {  
    console.log('App was clicked!');  
  };  
  
  // 使用React.createElement创建React元素  
  // 注意：React.createElement的第一个参数是元素的类型（字符串或React组件），  
  // 第二个参数是props对象（可选），第三个参数是子元素（可以是字符串、数组或React元素）  
  const appDiv = React.createElement('div', {  
    id: 'app',  
    onClick: handleClick,  
  }, 'Click me!');  
  
  // 另一个React.createElement的例子来创建另一个div  
  const dynamicDiv = React.createElement('div', null, 'Hello from React div!');  
  
  // 返回所有React元素作为组件的JSX结构  
  // 在JSX中，你可以直接嵌套React元素，而不需要显式调用React.createElement  
  return React.createElement('div', null, appDiv, dynamicDiv);  
}  
  
// 导出组件以便在其他地方使用  
export default MyComponent;

React.createElement和docuemnt.createElement不同，React.createElement用于创建React元素（虚拟DOM元素），这些元素不是真正的DOM节点，而是JavaScript对象。React元素是React库用于计算最小DOM变更所需的数据结构。

import React from 'react';  
  
function MyComponent() {  
  const handleClick = () => {  
    console.log('App was clicked!');  
  };  
  
  return (