当前位置：首页 > React

react如何抽离逻辑

2026-03-11 06:07:15React

抽离逻辑的常见方法

在React中抽离逻辑可以通过多种方式实现，以下是一些常见的方法：

自定义Hook 自定义Hook是React 16.8引入的特性，允许将组件逻辑提取到可重用的函数中。自定义Hook的名称必须以use开头，这样可以方便地共享状态逻辑。

react如何抽离逻辑

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

function Component() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>{count}</button>;
}

高阶组件（HOC） 高阶组件是一种模式，通过接受一个组件并返回一个新组件的方式来复用组件逻辑。这种方式在早期React版本中较为常见。

function withCounter(WrappedComponent) {
  return function(props) {
    const [count, setCount] = useState(0);
    const increment = () => setCount(count + 1);
    return <WrappedComponent count={count} increment={increment} {...props} />;
  };
}

const Button = ({ count, increment }) => (
  <button onClick={increment}>{count}</button>
);
const EnhancedButton = withCounter(Button);

Render Props Render Props是一种通过prop传递渲染逻辑的技术。组件通过一个函数prop来共享其内部状态或逻辑。

react如何抽离逻辑

class Counter extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  render() {
    return this.props.children(this.state.count, this.increment);
  }
}

function App() {
  return (
    <Counter>
      {(count, increment) => <button onClick={increment}>{count}</button>}
    </Counter>
  );
}

状态管理库 对于复杂的应用逻辑，可以使用状态管理库如Redux、MobX或Zustand来集中管理状态和逻辑。这些库允许将业务逻辑从组件中抽离出来，便于维护和测试。

import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

function Component() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

工具函数 将纯函数逻辑提取到独立的工具函数中，可以在多个组件中复用。这种方式适用于不涉及状态的逻辑。

function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

function Component() {
  const formattedDate = formatDate('2023-01-01');
  return <div>{formattedDate}</div>;
}