当前位置：首页 > React

react是如何理解的

2026-01-24 15:10:29React

React 的核心概念

React 是一个用于构建用户界面的 JavaScript 库，专注于组件化和声明式编程。其核心思想是通过虚拟 DOM（Virtual DOM）高效更新真实 DOM，提升性能。

组件化开发

React 将 UI 拆分为独立的、可复用的组件。组件分为函数组件和类组件，通过 props 传递数据，通过 state 管理内部状态。

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

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

虚拟 DOM 与高效渲染

React 通过虚拟 DOM 减少直接操作真实 DOM 的开销。当状态变化时，React 会生成新的虚拟 DOM 树，通过 Diff 算法比较差异，仅更新必要的部分。

声明式编程

React 采用声明式范式描述 UI 的最终状态，而非一步步操作 DOM。开发者只需关注“应该显示什么”，而非“如何更新 UI”。

// 声明式示例：直接描述 UI 状态
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

单向数据流

数据在 React 中自上而下流动（父组件 → 子组件），子组件通过 props 接收父组件数据。状态提升（Lifting State Up）用于共享多个组件的状态。

Hooks 的引入

React 16.8 引入 Hooks，允许函数组件使用状态和其他特性（如生命周期）。常见 Hooks 包括 useState、useEffect、useContext 等。

// 使用 useState 管理状态
function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return <div>Seconds: {seconds}</div>;
}