React 中分组函数式组件的替代方法：Composition、HOC、Context 逐个击破

2024-03-22 21:11:20

在 React 中分组函数式组件：替代方法

前言

在 React 中，将函数式组件分组为一个类并不是一个理想的做法，因为它可能会导致维护困难和错误。本文将探讨在 React 中分组组件的替代方法，包括 composition、高阶组件 (HOC) 和 context。

Composition

Composition 是在 React 中组合组件的推荐方法。它允许你将较小的组件组合成更高级别的组件，而无需创建类。这种方法简单易懂，易于维护。

案例：

const ComponentA = () => <h1>Hello World</h1>

const ComponentB = () => {
  const [name, setName] = useState('Hello World')
  return <ComponentA />
}

高阶组件 (HOC)

HOC 是另一种在 React 中组合组件的方法。它们允许你将一个组件作为参数传递给另一个组件。这种方法提供了更大的灵活性，但可能会导致代码复杂度增加。

案例：

const withName = (WrappedComponent) => (props) => {
  const [name, setName] = useState('Hello World')
  return <WrappedComponent {...props} name={name} />
}

const ComponentA = () => <h1>{props.name}</h1>

const ComponentB = withName(ComponentA)

Context

Context 是 React 中共享数据的一种方法。它允许你在组件树中传递数据，而无需显式地将数据作为 props 传递。这种方法非常适合管理全局状态或跨组件共享的数据。

案例：

const NameContext = React.createContext()

const Provider = (props) => {
  const [name, setName] = useState('Hello World')
  return <NameContext.Provider value={name} {...props} />
}

const ComponentA = () => {
  const name = useContext(NameContext)
  return <h1>{name}</h1>
}

const ComponentB = () => {
  return <Provider><ComponentA /></Provider>
}