React 核心概念

问题

解释 React 的核心概念，包括 JSX、组件、State、Props、Hooks 和虚拟 DOM。

解答

1. JSX

JSX 是 JavaScript 的语法扩展，允许在 JS 中写类似 HTML 的代码。

// JSX 会被编译为 React.createElement 调用
const element = <h1 className="title">Hello</h1>;

// 等价于
const element = React.createElement('h1', { className: 'title' }, 'Hello');

2. 组件

// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

3. State 和 Props

function Counter({ initialCount }) {
  // props: 父组件传入，只读
  // state: 组件内部状态，可变
  const [count, setCount] = useState(initialCount);

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

// 使用
<Counter initialCount={0} />

4. 常用 Hooks

import { useState, useEffect, useMemo, useCallback, useRef } from 'react';

function Example() {
  // 状态管理
  const [count, setCount] = useState(0);

  // 副作用处理
  useEffect(() => {
    document.title = `Count: ${count}`;
    return () => {
      // 清理函数
    };
  }, [count]); // 依赖数组

  // 缓存计算结果
  const doubled = useMemo(() => count * 2, [count]);

  // 缓存函数引用
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  // 获取 DOM 引用
  const inputRef = useRef(null);

  return <input ref={inputRef} />;
}

5. 虚拟 DOM 和 Diff 算法

// 虚拟 DOM 是 JS 对象，描述真实 DOM 结构
const vdom = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Title' } },
      { type: 'p', props: { children: 'Content' } }
    ]
  }
};

// React Diff 策略：
// 1. 同层比较，不跨层
// 2. 不同类型直接替换
// 3. 通过 key 识别列表项
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        // key 帮助 React 识别哪些元素改变了
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

6. 单向数据流

// 数据从父组件流向子组件
function Parent() {
  const [data, setData] = useState('hello');

  // 通过回调函数让子组件修改父组件状态
  const handleChange = (newData) => {
    setData(newData);
  };

  return <Child data={data} onChange={handleChange} />;
}

function Child({ data, onChange }) {
  return (
    <input
      value={data}
      onChange={e => onChange(e.target.value)}
    />
  );
}

关键点

• JSX 是语法糖，编译后变成 React.createElement 调用
• Props 只读，State 可变；Props 向下传，事件向上传
• Hooks 让函数组件拥有状态和生命周期能力
• 虚拟 DOM 通过 Diff 算法最小化真实 DOM 操作
• 列表渲染必须加 key，且 key 要稳定唯一