react如何拓展
React 拓展方法
使用高阶组件（HOC）
高阶组件是一种复用组件逻辑的方式，通过接收一个组件并返回一个新组件实现功能拓展。例如，为组件添加日志功能：
function withLogging(WrappedComponent) {
return function(props) {
console.log('Rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const EnhancedComponent = withLogging(MyComponent);自定义Hooks
通过封装逻辑到自定义Hook中实现复用。例如，封装数据获取逻辑：
function useFetchData(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
}
// 使用
const data = useFetchData('https://api.example.com/data');组合组件模式
利用children属性或插槽（Slots）实现灵活布局。例如：
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="content">{children}</div>
</div>
);
}
// 使用
<Card title="标题">内容区域</Card>渲染属性（Render Props）
通过组件属性传递渲染函数共享逻辑。例如：
class MouseTracker extends React.Component {
state = { x: 0, y: 0 };
handleMouseMove = (e) => this.setState({ x: e.clientX, y: e.clientY });
render() {
return (
<div onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
);
}
}
// 使用
<MouseTracker render={({ x, y }) => <p>鼠标位置: {x}, {y}</p>} />使用Context API
跨层级组件共享状态，避免逐层传递props：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
// 子组件消费
function Toolbar() {
const theme = useContext(ThemeContext);
return <button className={theme}>按钮</button>;
}集成第三方库
通过React的灵活性整合如Redux、D3.js等库。例如Redux集成：
import { Provider } from 'react-redux';
import store from './store';
function App() {
return (
<Provider store={store}>
<MyComponent />
</Provider>
);
}性能优化手段
使用React.memo、useMemo或useCallback减少不必要的渲染：
const MemoizedComponent = React.memo(MyComponent);
function ExpensiveCalculation() {
const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return <div>{result}</div>;
}
