React ⚛️ 是一个用于构建用户界面的强大 JavaScript 库。它由 Facebook 于 2013 年开发，以其基于组件的架构和声明性方法彻底改变了 UI 开发。无论您是创建简单的 Web 应用程序还是复杂的系统，React 都可以让您高效且愉快地构建可重用的动态 UI。
本文深入探讨了 React 的基础知识及其核心概念：组件，并用大量代码示例来说明这些想法。
React 的核心是一个 JavaScript 库，旨在构建动态和交互式用户界面。它专注于应用程序的视图层，遵循模型-视图-控制器（MVC）架构。 React 可以轻松创建随着应用程序数据变化而高效更新的界面。
React 应用程序是使用 组件 构建的，它们是 React 应用程序的构建块。组件是 UI 的一个独立部分，封装了其逻辑、结构和样式。
函数组件是简单的 JavaScript 函数，它们接受 props 作为输入并返回 React 元素。它们是现代 React 应用程序中最常见的组件类型。
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Alice" />;
类组件是扩展了 React.Component 类的 ES6 类。在引入 hooks 之前它们被广泛使用。
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Alice" />;
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// Usage
<Welcome name="Alice" />;
| Feature | Props | State |
|---|---|---|
| Definition | Data passed to a component from its parent. | Data managed within the component. |
| Mutability | Immutable (cannot be changed by the receiving component). | Mutable (can be updated within the component). |
| Usage | Used for passing data to child components. | Used for dynamic data that changes over time. |
State是React中的一个特殊对象，用于存储组件需要渲染的数据。功能组件使用 useState 钩子进行状态管理。
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Alice" />;
Props 是从父组件传递到子组件的参数，允许数据沿着组件层次结构流动。
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// Usage
<Welcome name="Alice" />;
React 鼓励嵌套组件从更小的、可重用的构建块构建复杂的 UI。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
类组件包括在安装、更新和卸载阶段执行操作的生命周期方法。对于功能组件，像 useEffect 这样的 React hooks 取代了这些生命周期方法。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
// Usage
function Greeting({ name }) {
return <h1>Welcome, {name}!</h1>;
}
function App() {
return <Greeting name="John" />;
}
// Renders: Welcome, John!
React 使处理事件变得简单。事件处理程序作为属性传递给元素并在事件发生时执行。
function Header() {
return <header><h1>My Website</h1></header>;
}
function Main() {
return <main><p>This is the main content.</p></main>;
}
function Footer() {
return <footer><p>© 2024 My Website</p></footer>;
}
function App() {
return (
<div>
<Header />
<Main />
<Footer />
</div>
);
}
// Usage
<App />;
import React, { Component } from 'react';
class Timer extends Component {
componentDidMount() {
console.log('Timer mounted');
}
componentWillUnmount() {
console.log('Timer unmounted');
}
render() {
return <p>Timer running...</p>;
}
}
// Usage
<Timer />;
React 允许您根据应用程序逻辑有条件地渲染组件或元素。
import React, { useEffect } from 'react';
function Timer() {
useEffect(() => {
console.log('Timer mounted');
return () => console.log('Timer unmounted');
}, []);
return <p>Timer running...</p>;
}
// Usage
<Timer />;
在 React 中渲染列表时，为每个元素分配唯一的键以帮助 React 识别更改非常重要。
function Button() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}
// Usage
<Button />;
React 鼓励创建可在应用程序中重复使用的组件，以减少冗余。
import React, { useState } from 'react';
function InputExample() {
const [text, setText] = useState('');
function handleChange(event) {
setText(event.target.value);
}
return (
<div>
<input type="text" value={text} onChange={handleChange} />
<p>You typed: {text}</p>
</div>
);
}
// Usage
<InputExample />;
React 是构建现代 Web 应用程序的强大工具。其基于组件的架构，加上 props、state 和 hooks 等功能，使得创建动态、高效和可重用的 UI 成为可能。通过掌握 React 的核心概念并有效地使用其工具，开发人员可以提供卓越的用户体验，同时保持干净且可维护的代码库。准备好开始了吗？构建您的第一个 React 应用程序并查看组件的神奇作用！ ？
以上是什么是 React ⚛️ 和组件的概念的详细内容。更多信息请关注PHP中文网其他相关文章！
