React 是什么

问题

谈谈你对 React 的理解。

解答

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并开源。

设计思想

1. 声明式编程

告诉 React 你想要什么样的 UI，而不是如何操作 DOM：

// 声明式：描述 UI 应该是什么样子
function Counter({ count }) {
  return <div>当前计数：{count}</div>;
}

// 命令式：手动操作 DOM
document.getElementById('counter').innerHTML = `当前计数：${count}`;

2. 组件化

将 UI 拆分成独立、可复用的组件：

// 按钮组件
function Button({ onClick, children }) {
  return (
    <button className="btn" onClick={onClick}>
      {children}
    </button>
  );
}

// 卡片组件
function Card({ title, content }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

// 组合使用
function App() {
  return (
    <Card title="欢迎">
      <Button onClick={() => alert('点击了')}>点击我</Button>
    </Card>
  );
}

3. 单向数据流

数据从父组件流向子组件，子组件通过回调函数通知父组件：

function Parent() {
  const [count, setCount] = useState(0);
  
  // 数据向下传递，事件向上传递
  return <Child count={count} onIncrement={() => setCount(count + 1)} />;
}

function Child({ count, onIncrement }) {
  return (
    <div>
      <span>{count}</span>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

工作原理

Virtual DOM

React 使用虚拟 DOM 来提高性能：

// 1. 状态变化时，React 创建新的虚拟 DOM 树
const vdom = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Hello' } },
      { type: 'p', props: { children: 'World' } }
    ]
  }
};

// 2. 对比新旧虚拟 DOM（Diff 算法）
// 3. 只更新变化的部分到真实 DOM

Diff 算法策略

// 1. 同层比较，不跨层级
<div>
  <A />  {/* 只和同层的元素比较 */}
  <B />
</div>

// 2. 不同类型的元素产生不同的树
<div><Counter /></div>  // 变成
<span><Counter /></span> // 整个子树重建

// 3. 通过 key 标识列表中的元素
{items.map(item => (
  <li key={item.id}>{item.name}</li>  // key 帮助 React 识别哪些元素变化了
))}

完整示例

import { useState, useEffect } from 'react';

// 自定义 Hook：封装数据获取逻辑
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 展示组件：只负责渲染
function UserCard({ user }) {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

// 容器组件：处理数据和逻辑
function UserList() {
  const { data: users, loading } = useFetch('/api/users');

  if (loading) return <div>加载中...</div>;

  return (
    <div className="user-list">
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

关键点

• 声明式：描述 UI 状态，React 负责更新 DOM
• 组件化：UI 拆分成独立可复用的组件，便于维护和测试
• 单向数据流：数据自上而下流动，状态变化可预测
• Virtual DOM：通过 Diff 算法最小化 DOM 操作，提升性能
• JSX：JavaScript 的语法扩展，让 UI 代码更直观