以下是关键 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 开发基础的基本概念。
以上是反应基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！
