react如何使用
React 的基本使用
React 是一个用于构建用户界面的 JavaScript 库，以下是一些核心概念和使用方法。
安装 React
通过 create-react-app 快速搭建 React 项目：
npx create-react-app my-app
cd my-app
npm start组件定义
React 组件可以通过函数或类定义。函数组件是推荐的方式：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}类组件的写法：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}状态管理
使用 useState Hook 在函数组件中管理状态：
import React, { 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>
);
}生命周期方法
在类组件中可以使用生命周期方法，如 componentDidMount：
class Example extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
render() {
return <div>Example Component</div>;
}
}事件处理
React 事件使用驼峰命名，例如 onClick：
function handleClick() {
console.log('Button clicked');
}
<button onClick={handleClick}>Click me</button>条件渲染
使用 JavaScript 的条件语句进行条件渲染：
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign in.</h1>;
}列表渲染
使用 map 方法渲染列表：
const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
<li key={number}>{number}</li>
);
<ul>{listItems}</ul>表单处理
受控组件的形式处理表单：
function NameForm() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<form>
<input type="text" value={value} onChange={handleChange} />
</form>
);
}使用 Context
跨组件共享数据：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button theme={theme}>I am styled by theme!</button>;
}使用 Hooks
常用 Hooks 包括 useState, useEffect, useContext 等：
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}路由管理
使用 react-router-dom 进行路由管理：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}样式处理
可以直接使用内联样式或 CSS 模块：
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray'
};
<div style={divStyle}>Styled Div</div>性能优化
使用 React.memo 或 useMemo 进行性能优化：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* render using props */
});
function MyComponent({ list }) {
const memoizedValue = useMemo(() => computeExpensiveValue(list), [list]);
return <div>{memoizedValue}</div>;
}以上是 React 的基本使用方法，涵盖了组件定义、状态管理、事件处理、条件渲染等核心功能。根据项目需求，可以进一步学习高级特性如 Redux、自定义 Hooks 等。
