当前位置：首页 > React

react业务逻辑实现

2026-01-26 19:15:42React

React 业务逻辑实现方法

状态管理 使用 useState 或 useReducer 管理组件内部状态。对于复杂状态逻辑，useReducer 更合适，它允许通过 reducer 函数集中处理状态更新逻辑。

const [state, dispatch] = useReducer(reducer, initialState);

副作用处理 使用 useEffect 处理副作用，如数据获取、订阅或手动 DOM 操作。依赖数组确保副作用在特定依赖变化时执行。

useEffect(() => {
  fetchData().then(data => setData(data));
}, [dependency]);

自定义 Hooks 封装可复用的业务逻辑到自定义 Hook 中。自定义 Hook 可以组合内置 Hooks，实现逻辑复用。

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

上下文 API 使用 createContext 和 useContext 跨组件共享状态。适合全局状态或主题等共享数据。

const ThemeContext = createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

状态管理库 对于大型应用，考虑使用 Redux 或 MobX。Redux 提供可预测的状态管理，适合复杂状态交互。

const store = createStore(reducer);
function App() {
  return (
    <Provider store={store}>
      <Component />
    </Provider>
  );
}

逻辑与 UI 分离 将业务逻辑抽离到单独的函数或模块中，保持组件专注于渲染。这种分离提高代码的可测试性和可维护性。

// businessLogic.js
export function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Component.jsx
import { calculateTotal } from './businessLogic';
function Cart() {
  const total = calculateTotal(items);
  return <div>Total: {total}</div>;
}

性能优化 使用 useMemo 和 useCallback 避免不必要的计算和渲染。useMemo 缓存计算结果，useCallback 缓存函数引用。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

错误处理 使用错误边界捕获组件树中的 JavaScript 错误。错误边界是 React 组件，可以捕获并处理子组件中的错误。

react业务逻辑实现

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}