当前位置：首页 > React

react如何拓展

2026-01-13 10:31:28React

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>;
}

react如何拓展