日间反应基础训练

概念亮点：

1. ReactDOM.render()
2. React.createElement()
3. React 中的道具
4. 访问 React 中的列表
6. React 中的解构

1.ReactDOM.render()

在 React 中，ReactDOM.render() 函数用于将 React 元素（或组件）渲染到 DOM 中。该函数需要两个参数：要渲染的 React 元素和要渲染它的 DOM 元素。

例如） 在这个例子中，ReactDOM.render() 渲染了一个简单的“Hello, React!”将消息发送到 ID 为 root 的 DOM 元素中。这是您在大多数 React 应用程序中看到的用于将应用程序安装到 DOM 的基本结构。

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(element, document.getElementById('root'));

2.React.createElement()

React.createElement() 函数是创建 React 元素的另一种方法。虽然 JSX（如上面的示例）是创建元素的最常见方法，但理解 React.createElement() 很重要，因为它是 JSX 背后的底层机制。

例如） 在此示例中，React.createElement() 创建一个内容为“Hello, React!”的 h1 元素。第一个参数是元素的类型（在本例中为 h1），第二个参数是 props（此处为 null，因为我们没有 props），第三个参数是孩子，即元素的内容。

import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));

3.React中的Props

Props（“属性”的缩写）是 React 中数据从一个组件传递到另一个组件的方式。它们是只读的，可以帮助您通过传递不同的值来自定义组件。

例如） 在此示例中，Greeting 组件接收 name 属性并使用它来显示个性化消息。 Props 是 React 中的一个关键概念，它允许组件动态且可重用。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

4. 在 React 中访问列表

在 React 中渲染列表时，通常会映射一个数组并为列表中的每个项目返回一个元素。包含一个关键 prop 来帮助 React 有效更新和管理列表非常重要。

例如） 在此示例中，ItemList 采用 items 数组作为 prop，并为数组中的每个项目创建一个 li 元素，具有唯一的 键。

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

5.

;是一个包装组件，您可以在开发模式下使用它来帮助识别 React 应用程序中的潜在问题。它不会呈现任何可见的 UI，但会激活额外的检查和警告。

例如）当您将应用程序（或其一部分）包装在 中时，React 将运行一些检查以确保您的代码遵循最佳实践，帮助您尽早发现问题开发过程。

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

6. React 中的解构

解构是一项 JavaScript 功能，可让您将数组中的值或对象中的属性解压到不同的变量中。在 React 中，它常用于功能组件中，以更干净地提取 props。

例如） 在这个例子中，我们没有访问 props.name，而是使用解构直接从 props 对象中提取名称，使代码更干净、更易于阅读。

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

以上是日间反应基础训练的详细内容。更多信息请关注PHP中文网其他相关文章！