跳到主要内容

React基础

什么是React?

React是一个由Facebook开发的开源JavaScript库,用于构建用户界面,特别是单页面应用(SPA)。React的核心思想是通过组件化的方式构建UI,使得代码更易于维护和复用。React使用虚拟DOM(Virtual DOM)来提高性能,确保在数据变化时高效地更新界面。

React的核心概念

1. 组件(Component)

React应用由组件构成。组件是独立的、可复用的代码块,用于描述UI的一部分。组件可以是函数组件或类组件。

函数组件示例

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

类组件示例

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

函数组件是React 16.8引入Hooks后的推荐写法,因为它更简洁且功能强大。

2. JSX

JSX是JavaScript的语法扩展,允许你在JavaScript代码中编写类似HTML的代码。React使用JSX来描述UI。

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

JSX不是HTML,它最终会被编译为JavaScript代码。例如,<h1>Hello, world!</h1>会被编译为React.createElement('h1', null, 'Hello, world!')

3. 状态(State)和属性(Props)

  • Props:用于从父组件向子组件传递数据。Props是只读的,不能在子组件中修改。
  • State:用于管理组件内部的状态。State是可变的,可以通过setState方法更新。

示例:使用State和Props

jsx
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}

componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (
<div>
<h1>Hello, {this.props.name}!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

4. 事件处理

React中的事件处理与DOM事件处理类似,但有一些语法差异。React事件使用驼峰命名法,例如onClick而不是onclick

示例:事件处理

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

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

5. 生命周期方法

React组件有一系列生命周期方法,允许你在组件的不同阶段执行代码。常见的生命周期方法包括componentDidMountcomponentDidUpdatecomponentWillUnmount

备注

在函数组件中,你可以使用useEffect Hook来模拟生命周期方法。

实际应用场景

1. 构建一个简单的待办事项列表

jsx
function TodoApp() {
const [todos, setTodos] = React.useState([]);
const [input, setInput] = React.useState('');

const addTodo = () => {
setTodos([...todos, input]);
setInput('');
};

return (
<div>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button onClick={addTodo}>Add Todo</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}

2. 使用React Router构建多页面应用

React Router是一个流行的库,用于在React应用中实现路由功能。

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function Home() {
return <h1>Home Page</h1>;
}

function About() {
return <h1>About Page</h1>;
}

function App() {
return (
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}

总结

React是一个强大的JavaScript库,用于构建现代Web应用。通过组件化、JSX、状态管理和事件处理等核心概念,你可以轻松构建复杂的用户界面。本文介绍了React的基础知识,并通过实际案例展示了如何应用这些概念。

附加资源与练习

  • 官方文档React官方文档是学习React的最佳资源。
  • 练习:尝试构建一个简单的计数器应用,使用状态管理计数器的值,并通过按钮增加或减少计数。
  • 进阶学习:学习React Hooks,了解如何在函数组件中使用useStateuseEffect
注意

在学习React时,务必理解其核心概念,如组件、状态和生命周期方法。这些是构建复杂应用的基础。