当前位置：首页 > React

理解如何react

2026-02-11 13:30:05React

React 核心概念

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

组件化开发

React 应用由组件构成，每个组件负责渲染一部分 UI。组件可以是函数式组件或类组件。函数式组件更简洁，类组件支持生命周期方法和状态管理。

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

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

状态管理

组件可以通过 state 管理内部数据。函数式组件使用 useState Hook，类组件通过 this.state 和 this.setState 实现。

// 函数式组件状态
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

// 类组件状态
class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

生命周期方法

类组件提供生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。函数式组件通过 useEffect Hook 实现类似功能。

// 类组件生命周期
class Example extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }
}

// 函数式组件等效
function Example() {
  React.useEffect(() => {
    console.log('Component mounted');
  }, []);
}

虚拟 DOM 与渲染

React 通过虚拟 DOM 优化渲染性能。当状态或属性变化时，React 会重新计算虚拟 DOM 差异，并仅更新必要的真实 DOM 部分。

数据流

React 遵循单向数据流原则。数据通过属性从父组件传递到子组件，子组件通过回调函数与父组件通信。

function Parent() {
  const [value, setValue] = React.useState('');
  return <Child value={value} onChange={setValue} />;
}

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

高级特性

React 提供 Context API 跨组件共享数据，使用 Refs 访问 DOM 节点，支持 Fragments 包裹多个元素，以及 Error Boundaries 捕获组件错误。

理解如何react

// Context API
const ThemeContext = React.createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// Refs
function TextInput() {
  const inputRef = React.useRef();
  return <input ref={inputRef} />;
}