当前位置：首页 > React

react如何抽离逻辑

2026-01-24 21:17:45React

抽离逻辑的方法

在React中，抽离逻辑可以通过多种方式实现，旨在提高代码的可维护性和复用性。以下是几种常见的方法：

自定义Hook

自定义Hook是React 16.8引入的功能，允许将组件逻辑提取到可复用的函数中。自定义Hook的命名通常以use开头。

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

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

高阶组件（HOC）

高阶组件是一种函数，接受一个组件并返回一个新组件，用于复用组件逻辑。

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

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

Render Props

Render Props是一种通过组件的props传递渲染逻辑的技术。

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 CounterButton() {
  return (
    <Counter>
      {(count, increment) => <button onClick={increment}>{count}</button>}
    </Counter>
  );
}

状态管理库

使用状态管理库如Redux或MobX可以将逻辑从组件中抽离，集中管理状态和业务逻辑。

// Redux示例
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

const store = createStore(counterReducer);

function CounterComponent() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>{count}</button>;
}

工具函数

将逻辑抽离为纯函数，便于测试和复用。

function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

function CartComponent({ items }) {
  const total = calculateTotal(items);
  return <div>Total: {total}</div>;
}