react如何
React 基础概念
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它采用组件化的开发模式，允许开发者通过组合可复用的组件来构建复杂的用户界面。
安装 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>;
}类组件通过继承 React.Component 实现：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}状态管理
使用 useState Hook 可以在函数组件中管理状态：
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 和 componentWillUnmount：
class Example extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>Lifecycle example</div>;
}
}事件处理
React 事件处理采用驼峰命名法，例如 onClick：
function handleClick() {
console.log('Button clicked');
}
<button onClick={handleClick}>Click me</button>条件渲染
根据条件渲染不同内容：
function Greeting({ isLoggedIn }) {
return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}列表渲染
使用 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>
);
}组件通信
父组件通过 props 向子组件传递数据：
function Parent() {
return <Child message="Hello from parent" />;
}
function Child({ message }) {
return <p>{message}</p>;
}Context API
使用 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 className={theme}>Themed button</button>;
}Hooks 进阶
useEffect 处理副作用：
function Example() {
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
}性能优化
使用 React.memo 避免不必要的渲染：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* render using props */
});路由管理
使用 react-router-dom 实现路由：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Route exact path="/" component={Home} />
</Router>
);
}
