跳转至

基本语法#

约 1114 个字 45 行代码 预计阅读时间 24 分钟

概述#

React 是一个用于构建交互式用户界面（user interfaces 、UI)的 JavaScript 库。

浏览器加载HTML过程#

当用户访问一个网页时，服务器会向浏览器返回一个HTML文件，浏览器然后读取HTML并构建文档对象模型（DOM）。

HTML和DOM

DOM

DOM 是 HTML 元素的对象表示。它充当您的代码和用户界面之间的桥梁，并具有类似树状结构的父子关系。

您可以使用DOM方法和JavaScript来监听用户事件并通过选择、添加、更新和删除用户界面中的特定元素来操作DOM。

DOM操作不仅允许您针对特定元素，还可以更改它们的样式和内容。

js更新UI#

通过使用JavaScript和DOM方法向您的项目添加一个h1标签来开始构建我们的项目。

updating_ui_with_javascript.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
    // 选择 ID 为 "app "的 div 元素
    const app = document.getElementById('app');

    // 创建新的 H1 元素
    const header = document.createElement('h1');

    // 为 H1 元素创建一个新文本节点
    const text = 'Develop. Preview. Ship.';
    const headerContent = document.createTextNode(text);

    // 将文本添加到 H1 元素中
    header.appendChild(headerContent);

    // 将 H1 元素置于 div 内
    app.appendChild(header);
</script>
</body>
</html>

Danger

使用纯JavaScript更新DOM非常强大但冗长。您已经编写了所有这些代码来添加一个带有一些文本的<h1>元素。

命令式编程vs声明式编程#

上面使用DOM操作元素的代码是命令式编程的一个很好的例子。

命令式编程就像给厨师逐步指示如何制作披萨。

命令式编程

而在声明式编程中，开发人员可以声明他们想要显示的内容，而不必编写DOM方法会很有帮助。

声明式编程就像订购披萨而不必担心制作披萨的步骤。🍕

React 是一个流行的声明式库，您可以使用它来构建用户界面。作为开发者，你可以告诉React你想要用户界面发生什么变化，React会自动计算出如何更新DOM的步骤。

声明式编程

React概述#

React 是一个流行的声明式库，您可以使用它来构建用户界面。

用户界面由按钮、文本和图像等小单元内容构建而成。React帮助你把它们组合成可重用、可嵌套的组件。

JSX简介#

JSX（JavaScript XML，正式称为JavaScript语法扩展）是JavaScript语言语法的类似XML的扩展。最初由Facebook创建以用于React，JSX已被多个Web框架采用。作为一种语法糖 ，JSX通常被转译成类似于原始JSX的嵌套JavaScript函数调用。

JSX代码示例:

JSX
const App = () => {
    return (
        <div>
            <p>Header</p>
            <p>Content</p>
            <p>Footer</p>
        </div>
    );
}

在JSX中编写的代码需要使用诸如Babel之类的工具进行转换，以便能够被Web浏览器理解。这种处理通常是在软件构建 过程中进行的，在应用程序部署之前。

React入门案例#

纯Html#

hello_react.html
<html>
<body>
<div id="app"></div>
<!-- React 核心库-->
<script src="js/react.development.js"></script>
<!--专门针对DOM的方法，使您能够在DOM中使用React-->
<script src="js/react-dom.development.js"></script>
<!--babel库:用于将将你的JSX代码转换成普通的JavaScript。-->
<script src="js/babel.min.js"></script>
<!--您需要通知 Babel 要将哪些代码转换，方法是将脚本类型更改为 type=text/jsx。-->
<script type="text/jsx">
    const app = document.getElementById('app');
    const root = ReactDOM.createRoot(app);
    root.render(<h1>Develop. Preview. Ship.</h1>);
</script>
</body>
</html>

Create React App#

Create React App 是官方支持的创建单页 React 应用程序的方式。它提供了一个现代的构建设置，无需配置。

Bash
# 创建React项目
npx create-react-app hello-react

#不建议使用 create-react-app 创建 React 应用程序。在没有框架的情况下使用 React 时，首选方式是使用带Vite Bundler 的模板。
npm create vite@latest hello-react -- --template react
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 如果您想在应用程序中开始测量性能，请通过一个函数
// 来记录结果（例如：reportWebVitals(console.log)
// 或发送到分析端点。了解更多信息： https://bit.ly/CRA-vitals
reportWebVitals();

组件(component)#

用户界面可以分解为称为组件（ 应用程序中可复用的 UI 元素）的较小构建块。

组件允许您构建独立的、可重复使用的代码片段。如果您将组件视为乐高积木，您可以将这些单独的积木组合在一起，形成更大的结构。如果您需要更新UI的某个部分，您可以更新特定的组件或积木。

组件

这种模块化使得您的代码在不断增长时更易于维护，因为您可以添加、更新和删除组件而不影响我们应用程序的其他部分。

React组件是一段可以使用标签进行扩展的JavaScript函数。在函数的返回语句中，你可以编写JSX。

React组件应该大写以区分它们与普通的HTML和JavaScript。

您可以像使用常规HTML标签一样使用React组件，使用尖括号。

hello_components.html
<html>
<body>
<div id="app"></div>
<!-- React 核心库-->
<script src="js/react.development.js"></script>
<!--专门针对DOM的方法，使您能够在DOM中使用React-->
<script src="js/react-dom.development.js"></script>
<!--babel库:用于将将你的JSX代码转换成普通的JavaScript。-->
<script src="js/babel.min.js"></script>
<!--您需要通知 Babel 要将哪些代码转换，方法是将脚本类型更改为 type=text/jsx。-->
<script type="text/jsx">
    const app = document.getElementById('app');
    const root = ReactDOM.createRoot(app);

    /*Header组件*/
    function Paragraph() {
        return <p>Hello Components</p>;
    }

    /*HomePage组件*/
    function HomePage() {
        return (
            <div>
                {/*组件可以复用*/}
                <Paragraph/>
                <Paragraph/>
            </div>
        );
    }

    // 您可以像使用常规HTML标签一样使用React组件，使用尖括号
    root.render(<HomePage />);
</script>
</body>
</html>

组件导出和导入#

将组件封装在单独的文件中导出，更加有利于组件的复用。

使用export default导出组件：

JSX
function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>了不起的科学家们</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

使用import导入组件：

JSX
import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Props#

常规的HTML元素具有属性，您可以使用这些属性传递信息片段，从而改变这些元素的行为。

例如，更改元素的src属性会更改显示的图像。更改标签的href属性会更改链接的目的地。

同样地，您可以将信息片段作为属性传递给React组件。这些被称为props。

评论