反应基础知识

以下是关键 React 术语的解释和示例：

1。组件

组件是 React 应用程序的构建块。它是一个 JavaScript 函数或类，返回 UI（用户界面）的一部分。

功能组件（现代 React 中常见）：

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

类组件（旧样式）：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2。 JSX（JavaScript XML）

JSX 允许您在 JavaScript 中编写类似 HTML 的语法。它是 React.createElement() 的语法糖。

示例：

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

JSX is compiled to:

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

3。道具（属性）

Props 是数据从一个组件传递到另一个组件的方式。它们是只读的并允许组件是动态的。

示例：

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

<Greeting name="Alice" />

4。状态

State 是一个 JavaScript 对象，它保存动态数据并影响组件的渲染输出。它可以使用 setState（类组件）或 useState hook（功能组件）进行更新。

功能组件中 useState 的示例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

5。挂钩

Hooks 是允许您在功能组件中使用状态和其他 React 功能的函数。

useState：管理功能组件中的状态。
useEffect：在功能组件中运行副作用。

使用示例效果：

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}

6。虚拟 DOM

虚拟 DOM 是真实 DOM 的轻量级副本。 React 使用它来跟踪更改并通过仅重新渲染发生更改的 DOM 部分而不是整个页面来有效地更新 UI。

7。事件处理

React 使用驼峰式命名法代替小写字母作为事件处理程序，并且将函数而不是字符串作为事件处理程序传递。

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

8。渲染

渲染是React将DOM元素输出到浏览器的过程。组件根据 props、状态和其他数据渲染 UI。

示例：

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

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

9。条件渲染

您可以根据条件渲染不同的组件或元素。

示例：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

10。列表和键

在React中，您可以使用map()方法渲染数据列表，并且每个列表项应该有一个唯一的键。

示例：

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' }
];

<ItemList items={items} />;

11。提升状态

有时，多个组件需要共享相同的状态。你将国家“提升”到他们最近的共同祖先，这样它就可以作为道具传承下来。

示例：

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

这些是构成 React 开发基础的基本概念。

React 基础知识第 2 部分

Pranav Bakare ・ 9 月 18 日

#javascript #反应

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