跳到主要内容

React基础

什么是React？​

React是一个由Facebook开发的开源JavaScript库，用于构建用户界面，特别是单页面应用（SPA）。React的核心思想是通过组件化的方式构建UI，使得代码更易于维护和复用。React使用虚拟DOM（Virtual DOM）来提高性能，确保在数据变化时高效地更新界面。

React的核心概念​

1. 组件（Component）​

React应用由组件构成。组件是独立的、可复用的代码块，用于描述UI的一部分。组件可以是函数组件或类组件。

函数组件示例​

jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件示例​

jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
提示

函数组件是React 16.8引入Hooks后的推荐写法，因为它更简洁且功能强大。

2. JSX​

JSX是JavaScript的语法扩展，允许你在JavaScript代码中编写类似HTML的代码。React使用JSX来描述UI。

jsx
const element = <h1>Hello, world!</h1>;
警告

JSX不是HTML，它最终会被编译为JavaScript代码。例如，<h1>Hello, world!</h1>会被编译为React.createElement('h1', null, 'Hello, world!')。

3. 状态（State）和属性（Props）​

  • Props：用于从父组件向子组件传递数据。Props是只读的，不能在子组件中修改。
  • State：用于管理组件内部的状态。State是可变的，可以通过setState方法更新。

示例：使用State和Props​

jsx
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

4. 事件处理​

React中的事件处理与DOM事件处理类似，但有一些语法差异。React事件使用驼峰命名法，例如onClick而不是onclick。

示例：事件处理​

jsx
function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

5. 生命周期方法​

React组件有一系列生命周期方法，允许你在组件的不同阶段执行代码。常见的生命周期方法包括componentDidMount、componentDidUpdate和componentWillUnmount。

备注

在函数组件中，你可以使用useEffect Hook来模拟生命周期方法。

实际应用场景​

1. 构建一个简单的待办事项列表​

jsx
function TodoApp() {
  const [todos, setTodos] = React.useState([]);
  const [input, setInput] = React.useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

2. 使用React Router构建多页面应用​

React Router是一个流行的库，用于在React应用中实现路由功能。

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

总结​

React是一个强大的JavaScript库，用于构建现代Web应用。通过组件化、JSX、状态管理和事件处理等核心概念，你可以轻松构建复杂的用户界面。本文介绍了React的基础知识，并通过实际案例展示了如何应用这些概念。

附加资源与练习​

  • 官方文档：React官方文档是学习React的最佳资源。
  • 练习：尝试构建一个简单的计数器应用，使用状态管理计数器的值，并通过按钮增加或减少计数。
  • 进阶学习：学习React Hooks，了解如何在函数组件中使用useState和useEffect。
注意

在学习React时，务必理解其核心概念，如组件、状态和生命周期方法。这些是构建复杂应用的基础。