真的有人喜欢 React 吗？—— 从真实开发者体验谈起

引言：一个看似挑衅，却值得深思的问题

最近在 Hacker News 上看到一个链接指向一个名为“Does anybody like React?”的网站（jsx.lol），这个标题颇具挑衅性，瞬间点燃了讨论。作为一位长期与前端技术打交道的开发者，我理解这种情绪的由来。React 确实改变了我们构建用户界面的方式，但伴随其普及而来的，是陡峭的学习曲线、不断演变的最佳实践，以及社区中关于其设计哲学的无尽争论。那么，抛开滤镜，真的有人喜欢 React 吗？

答案是复杂的。与其说我们“喜欢” React，不如说我们在特定场景下高度认可它的价值、生态和解决问题的能力。本文将尝试剥离情绪化的讨论，从技术事实、开发者体验和实际用例出发，客观地审视 React，并为初中级开发者提供一些扎实的见解和实践技巧。

核心内容一：我们为什么“用” React，而不仅仅是“喜欢”它？

在评判喜欢与否之前，必须承认 React 在市场和工程实践中的巨大成功。其流行并非偶然，而是源于几个核心优势：

声明式 UI 与组件化：React 的“状态 → 视图”单向数据流模型，让我们能够用更直观的方式描述界面随数据变化而变化的样子，而不是手动操作 DOM。组件化思想天然地将UI拆分为可复用、可独立管理的单元。
庞大的生态系统：从状态管理（Redux, Zustand, Jotai）、路由（React Router）到服务器端渲染（Next.js, Remix）、移动端（React Native），你需要的一切几乎都有成熟的解决方案。这极大地提升了开发效率和项目可维护性。
优秀的开发者工具：React Developer Tools 和对 Hooks 的深度集成，使得调试和性能剖析变得相对容易。
** JSX 的灵活性**：虽然 JS 与 HTML 的混合写法初期让人不适，但 JSX 本质上是 JavaScript 的语法糖，它允许我们利用 JavaScript 的全部能力（条件、循环、变量）来构建视图，非常强大。

正是这些特性，使得 React 成为构建中大型、交互复杂 Web 应用的可靠选择。公司用它，开发者用它，形成了强大的网络效应。

核心内容二：那些让我们“又爱又恨”的痛点

“喜欢”的反面往往源于实践中的摩擦。React 开发者常遇到的“痛点”包括：

Hooks 的心智模型：useEffect 的依赖数组、闭包陷阱、不必要的重渲染，是初学者的噩梦，也时常困扰老手。理解其背后的执行时机需要时间。
状态管理复杂性：当应用变大，选择合适的状态管理方案（Context、Redux、Zustand）本身就成为一个挑战，且不同方案有不同的权衡。
样板代码：相对于 Vue 的 Svelte 等框架，React 的某些模式（如早期的 Class Component、复杂的 Redux 配置）显得更为繁琐。
性能需要主动优化：React 默认的重渲染机制在带来简洁性的同时，也要求开发者在必要时手动介入（useMemo, React.memo, useCallback），否则性能可能下降。

这些痛点确实存在，但它们更多是复杂应用开发中不可避免的挑战，React 的工具集则提供了应对它们的明确路径。问题不在于框架本身，而在于我们如何掌握并运用这些工具。

核心内容三：从“恨”到“用好”——实用的 React 最佳实践与代码示例

下面，我们通过一些代码示例，展示如何规避常见问题，写出更健壮、更优雅的 React 代码。

1. 驯服 `useEffect`：明确数据流

错误示例：在 useEffect 中未正确声明依赖，导致闭包陷阱。

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 错误：这个 effect 只在 mount 时运行一次，`count` 永远是 0。
    console.log('Count is:', count);
  }, []); // 缺少 `count` 依赖

  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

正确实践：清晰地声明所有依赖，让 React 控制 effect 的执行时机。

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 当 `count` 改变时，这个 effect 会重新运行。
    console.log('Count is:', count);
  }, [count]); // 正确声明了 `count` 依赖

  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

2. 优化性能：避免不必要的子组件重渲染

问题：父组件状态变化导致子组件无意义地重渲染。

解决方案：使用 React.memo 包裹子组件，并结合 useMemo 和 useCallback 稳定 props。

import { memo, useMemo, useCallback } from 'react';

// 使用 memo 包裹的子组件
const ExpensiveChild = memo(({ data, onUpdate }) => {
  console.log('ExpensiveChild rendered');
  return (
    <div>
      <p>Data: {data}</p>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

function Parent() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  // useMemo 缓存计算结果
  const expensiveData = useMemo(() => {
    // 假设这是一个耗时计算
    return count * 2;
  }, [count]); // 只有 count 变化时才重新计算

  // useCallback 缓存函数引用
  const handleChildUpdate = useCallback(() => {
    console.log('Update from child');
    // 可以在这里更新父组件状态
  }, []); // 依赖数组为空，函数引用永不改变

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment Count</button>
      {/* 只有当 expensiveData 或 handleChildUpdate 变化时，子组件才重渲染 */}
      <ExpensiveChild data={expensiveData} onUpdate={handleChildUpdate} />
    </div>
  );
}

3. 使用自定义 Hook 抽象复杂逻辑

将组件中复杂的、可复用的状态逻辑提取到自定义 Hook 中，能极大提升代码的可读性和可维护性。

// 自定义 Hook：用于管理本地存储的状态
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

// 在组件中使用
function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  const toggleTheme = () => {
    setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <button onClick={toggleTheme}>
      当前主题：{theme} (点击切换)
    </button>
  );
}

总结：没有完美的框架，只有适合的选择

回到最初的问题：“Does anybody like React?”

我的答案是：是的，大量开发者欣赏并乐于使用 React，但这份“喜欢”是理性且有条件的。

它源于对 React 所倡导的声明式编程范式、组件化思想以及庞大生态的认可。同时，我们也清醒地认识到它的学习成本、心智模型和需要开发者主动进行性能管理的特点。

对于初中级开发者，我的建议是：

扎实基础：深入理解 JavaScript 核心概念（闭包、异步、原型链）和 React 核心原理（虚拟 DOM、协调过程、Hooks 规则）。这是规避 90% 常见问题的基石。
拥抱 Hooks 范式：放弃对 Class Component 的迷恋，用函数式组件和 Hooks 的思维去构建应用，它们是 React 的现在和未来。
善用生态工具：不要重复造轮子。学习使用成熟的库（如 TanStack Query 进行数据获取，Zustand 进行状态管理）来提升开发效率和应用质量。
关注性能，但不要过度优化：先确保代码的清晰和正确。只在出现明显性能瓶颈时，使用 React Profiler 工具定位问题，并进行有针对性的优化（useMemo, useCallback, React.memo）。

最终，喜欢一个框架与否，关键在于它是否能高效、愉悦地帮助你解决实际问题。React 或许不是最简单的，也不是最轻量的，但它无疑是构建现代复杂 Web 应用最强大、最稳定的工具之一。掌握它，意味着你拥有了解决一个庞大领域问题的强大能力。这，或许就是数百万开发者持续选择并“喜欢” React 的根本原因。

前端世界日新月异，保持好奇，持续学习，找到最适合你和项目的技术栈，才是永恒的真理。