React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。React 采用组件化的开发方式，使得开发者可以构建可复用的 UI 组件，从而提高开发效率和代码的可维护性。
React 的基本概念
- 组件：React 的核心概念是组件。组件可以是类组件或函数组件。函数组件是推荐的使用方式。
- JSX：
JSX是一种语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。它使得编写组件变得更加直观。 - 状态和属性：状态（state）是组件内部的数据，属性（props）是从父组件传递给子组件的数据。
- 生命周期：组件的生命周期分为几个阶段，包括挂载（mounting）、更新（updating）和卸载（unmounting）。React 提供了生命周期方法来处理这些阶段。
基本示例
以下是一个简单的 React 组件示例：
import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};return (<div><h1>Counter: {count}</h1><button onClick={increment}>Increment</button></div>);
}export default Counter;
组件的 Props
使用 props 向子组件传递数据：
function Greeting({ name }) {return <h1>Hello, {name}!</h1>;
}// 使用
<Greeting name="Alice" />
组件的状态
使用 useState 钩子管理组件的状态：
import React, { useState } from 'react';function Toggle() {const [isToggled, setIsToggled] = useState(false);return (<div><p>The button is {isToggled ? 'ON' : 'OFF'}</p><button onClick={() => setIsToggled(!isToggled)}>Toggle</button></div>);
}
生命周期方法
在类组件中，您可以使用生命周期方法：
class MyComponent extends React.Component {componentDidMount() {console.log('Component mounted');}componentDidUpdate(prevProps, prevState) {console.log('Component updated');}componentWillUnmount() {console.log('Component will unmount');}render() {return <div>Hello, World!</div>;}
}
在函数组件中，使用 useEffect 钩子来处理副作用：
import React, { useEffect } from 'react';function MyComponent() {useEffect(() => {console.log('Component mounted or updated');return () => {console.log('Component will unmount');};}, []); // 空数组表示只在组件挂载和卸载时运行return <div>Hello, World!</div>;
}
条件渲染
在 React 中，可以根据条件渲染不同的组件：
function ConditionalRendering({ isLoggedIn }) {return (<div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}</div>);
}
列表渲染
使用 map 方法渲染列表：
const items = ['Apple', 'Banana', 'Cherry'];function ItemList() {return (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>);
}
React Router
使用 React Router 进行路由管理：
npm install react-router-dom
基本的路由示例：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';function App() {return (<Router><Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /></Switch></Router>);
}
结论
React 是一个强大的前端框架，适合构建复杂的用户界面。通过组件化的方式，开发者可以轻松地管理应用的状态和渲染逻辑。除了基本的组件开发，React 还支持丰富的生态系统，包括状态管理（如 Redux、MobX）、路由（如 React Router）等，帮助开发者构建高效、可维护的应用。
