react.js为何要函数式组件

React 推崇函数式组件（Function Components），并不是“为了函数而函数”，而是因为函数在构建 UI 这套问题域里，有天然的优势。可以从几个层面理解。

一、UI 的本质：输入 → 输出

一个组件的理想定义是：

给定 props（和 state），返回 UI（React 元素）

这正好就是一个纯函数的特征：

function UserCard({ name, age }) {
  return <div>{name} - {age}</div>
}

• 输入：props
• 输出：UI
• 没有命令式 DOM 操作
• 不依赖外部可变状态

函数天然适合表达这种“映射关系”。

二、类组件的痛点

在 Hooks 出现之前，只能用类组件：

class UserCard extends React.Component {
  state = { count: 0 }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>
  }
}

问题很多：

1. this 很烦

• 要绑定
• 容易丢上下文
• 新手极容易踩坑

2. 逻辑复用极难

• 只能用 HOC / render props
• 层级嵌套深
• 逻辑分散在多个生命周期中

3. 生命周期割裂逻辑

比如“订阅数据”：

• componentDidMount 订阅
• componentWillUnmount 取消
• 中间还要防重复

同一个功能被拆得到处都是。

三、函数式组件 + Hooks 解决了什么

1. 更直观的“状态即函数”

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

• 状态就在函数里
• 没有 this
• 逻辑局部可见

2. 逻辑可以“拆出来”

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [])
  return width
}

function App() {
  const width = useWindowWidth()
  return <div>{width}</div>
}

逻辑复用 = 函数调用，而不是组件嵌套。

3. 更符合“声明式 UI”

函数式组件强调：

UI 是状态的函数

UI = f(state)

而不是：

我一步步操作 DOM

四、性能与未来方向

1. 更利于编译优化

• 函数结构更简单
• React 更容易做静态分析
• 新特性（如 Server Components）更偏向函数

2. 更小的心智负担

• 没有生命周期记忆成本
• 没有 this
• 组件就是普通 JS 函数

五、一句话总结

React 用函数式组件，是因为 UI 本质上是“状态到视图的映射”，而函数正是表达映射最自然、最简单、最可组合的方式。

如果你愿意，我也可以：

• 对比 类组件 vs 函数组件 的完整示例
• 解释 为什么 Hooks 不能放在 if 里
• 讲 函数式组件和函数式编程的关系

你可以直接说想看哪一个。