react实现功能
React 实现功能的方法
React 是一个用于构建用户界面的 JavaScript 库，广泛应用于现代 Web 开发中。以下是几种常见的功能实现方法：
状态管理
使用 useState 钩子来管理组件的局部状态。例如，实现一个计数器功能：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}组件通信
父组件通过 props 向子组件传递数据和方法：
function Parent() {
const [message, setMessage] = useState('Hello from Parent');
return <Child message={message} updateMessage={setMessage} />;
}
function Child({ message, updateMessage }) {
return (
<div>
<p>{message}</p>
<button onClick={() => updateMessage('Updated message')}>Update</button>
</div>
);
}生命周期管理
使用 useEffect 钩子处理副作用和生命周期事件：
useEffect(() => {
console.log('Component mounted or updated');
return () => {
console.log('Component will unmount');
};
}, [dependencies]);表单处理
受控组件方式处理表单输入：
function Form() {
const [inputValue, setInputValue] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log(inputValue);
};
return (
<form onSubmit={handleSubmit}>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}路由管理
使用 React Router 实现页面导航：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}数据获取
使用 fetch 或 axios 获取远程数据：
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);性能优化
使用 React.memo 和 useMemo 避免不必要的渲染：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 仅当 props 改变时才会重新渲染 */
});
const computedValue = useMemo(() => expensiveCalculation(input), [input]);上下文管理
使用 Context API 共享全局状态：
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>;
}自定义钩子
封装可复用的逻辑：
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}错误边界
捕获组件树中的 JavaScript 错误：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
