当前位置：首页 > React

理解如何react

2026-01-13 10:38:24React

理解React的核心概念

React是一个用于构建用户界面的JavaScript库，专注于通过组件化开发提高代码的可维护性和复用性。其核心思想包括虚拟DOM（Virtual DOM）和单向数据流，能够高效更新界面并管理状态。

组件化开发

React应用由多个组件构成，每个组件负责渲染UI的一部分。组件可以是函数式组件或类组件。函数式组件更简洁，类组件提供更多功能如生命周期方法。通过组合这些组件，可以构建复杂的用户界面。

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

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

状态与属性（State & Props）

State是组件内部管理的可变数据，而Props是从父组件传递给子组件的不可变数据。State的变化会触发组件重新渲染，使得UI与数据保持同步。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

虚拟DOM与高效渲染

React使用虚拟DOM来优化性能。当状态或属性变化时，React会创建一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较（Diffing算法），计算出最小的DOM操作来更新实际DOM。

生命周期方法

类组件提供生命周期方法，可以在组件挂载、更新或卸载时执行特定逻辑。常用的生命周期方法包括componentDidMount、componentDidUpdate和componentWillUnmount。

class Example extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Lifecycle Example</div>;
  }
}

Hooks的引入

React 16.8引入了Hooks，允许在函数式组件中使用状态和其他React特性。常用的Hooks包括useState、useEffect和useContext。

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}