React教程：轻松入门React框架

React是什么？

React是Facebook发布的一款开源JavaScript库，专为构建用户界面而设计。以组件化编程为核心，它让开发者以声明性的形式编写UI代码，使得代码结构清晰、易于维护。React的优势体现在高效性能、组件复用及状态管理上，使其成为构建动态、复杂Web应用的理想选择。

React的应用场景与优势

React广泛应用于单页应用（SPA）、移动应用、桌面应用及服务器端渲染（SSR）等场景。其显著优势包括：

• 高效性能：采用虚拟DOM技术，减少DOM操作，提升应用响应速度。
• 组件化开发：通过组件将界面拆分为可复用的逻辑单元，提高代码复用性和可维护性。
• 灵活的生命周期：提供一系列生命周期方法，便于管理组件的生命周期事件。
• 强大的社区支持：拥有庞大的开发者社区和丰富资源，促进学习与开发。

核心概念：组件、状态、属性、生命周期

• 组件：React应用由一系列组件构成，每个组件是独立的UI元素或功能模块。
• 状态（State）：组件内部存储的数据，描述组件当前状态。
• 属性（Props）：传递给组件的数据，用于控制组件渲染和行为。
• 生命周期：组件从创建到销毁的全过程，包含多个关键方法，如componentDidMount、componentDidUpdate等。

基本操作：创建组件、属性传递、状态更新

创建组件

import React from 'react';

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

export default MyComponent;

属性传递与状态更新

<MyComponent name="World" />

在组件内部，通过this.props获取属性，setState方法用于更新状态。

实例化一个简单的React应用

创建基本React应用：

npx create-react-app my-app
cd my-app

添加交互与状态管理

function App() {
  const [count, setCount] = React.useState(0);

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

条件渲染

function App() {
  const condition = true;

  return (
    <div>
      <h1>{condition ? 'Condition is true' : 'Condition is false'}</h1>
    </div>
  );
}

循环渲染

function App() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <div>
      {items.map(item => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

使用setState更新状态

function App() {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

处理用户事件

function InputForm() {
  const [inputValue, setInputValue] = React.useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>Value: {inputValue}</p>
    </div>
  );
}

实现页面路由功能

使用React Router库实现路由：

npm install react-router-dom

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

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

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

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

设计与规划

应用包含以下功能：

• 添加、编辑、删除待办事项
• 显示待办事项列表

实现功能

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      currentTodo: '',
      editingIndex: -1,
    };
  }

  handleInputChange = (event) => {
    this.setState({ currentTodo: event.target.value });
  };

  addItem = () => {
    if (this.state.currentTodo.trim() !== '') {
      const newItem = {
        id: Date.now(),
        text: this.state.currentTodo,
        completed: false,
      };
      this.setState(prevState => ({
        todos: [...prevState.todos, newItem],
        currentTodo: '',
      }));
    }
  };

  deleteItem = (index) => {
    const updatedTodos = [...this.state.todos];
    updatedTodos.splice(index, 1);
    this.setState({ todos: updatedTodos });
  };

  toggleComplete = (index) => {
    const updatedTodos = [...this.state.todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    this.setState({ todos: updatedTodos });
  };

  editItem = (index) => {
    const updatedTodos = [...this.state.todos];
    updatedTodos[index].text = this.state.currentTodo;
    this.setState({ editingIndex: -1 });
    if (updatedTodos[index].completed) {
      this.toggleComplete(index);
    }
    this.setState({ todos: updatedTodos });
  };

  render() {
    return (
      <div className="App">
        <h1>Todo List</h1>
        <input
          value={this.state.currentTodo}
          onChange={this.handleInputChange}
          placeholder="Enter a new item"
        />
        <button onClick={this.addItem}>Add Item</button>
        <ul>
          {this.state.todos.map((todo, index) => (
            <li key={todo.id}>
              {todo.completed ? <span>{todo.text} (Completed)</span> : todo.text}
              <button onClick={() => this.toggleComplete(index)}>Mark Completed</button>
              <button onClick={() => this.editItem(index)}>Edit</button>
              <button onClick={() => this.deleteItem(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

最终部署与优化

部署React应用至Netlify或Vercel等平台。进行性能优化，如代码分割、懒加载、使用CDN引用React库资源等。

至此，您已掌握了React的基础知识，并能构建包含条件渲染、循环、状态管理、事件处理以及简单路由的React应用。通过实践，您可以探索更多React高级特性和框架组件，如Redux用于状态管理，或者更复杂的路由解决方案如react-router-dom的动态路由功能。