react如何重写
重写 React 组件的关键方法
函数组件替代类组件
使用函数组件替代传统的类组件，结合 Hooks 实现状态和生命周期管理。
// 类组件（旧）
class Example extends React.Component {
state = { count: 0 };
render() {
return <div>{this.state.count}</div>;
}
}
// 函数组件（新）
function Example() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}使用 Hooks 重构逻辑
将生命周期方法转换为 useEffect，状态管理改用 useState 或 useReducer。
// 类组件生命周期
componentDidMount() { console.log('Mounted'); }
// 函数组件等效
useEffect(() => {
console.log('Mounted');
}, []);提取自定义 Hook
将重复逻辑封装为自定义 Hook，提升代码复用性。
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}拆分复杂组件
将大型组件拆分为多个小组件，通过 props 传递数据。
// 原始组件
function UserProfile() {
// 混杂逻辑
}
// 拆分后
function Avatar() { /* ... */ }
function UserInfo() { /* ... */ }使用 Context 替代 Prop Drilling
通过 createContext 和 useContext 避免多层传递 props。
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}性能优化
使用 React.memo 避免不必要的渲染，或通过 useMemo/useCallback 缓存计算结果。
const MemoizedComponent = React.memo(ExpensiveComponent);
function Parent() {
const memoizedCallback = useCallback(() => doSomething(), []);
}通过以上方法，可系统性地重构 React 代码，使其更符合现代实践。
