从React基础到实战的学习笔记，开启前端开发新旅程

前端

2023-10-13 13:43:44

React：从入门到精通

一、认识React

React是一个前端JavaScript库，用于构建交互式用户界面（UI）。它采用组件化设计，每个组件代表应用程序中的一个特定元素，可重复使用，提高代码的可维护性和可重用性。

二、React基础

1. 组件**

组件是React的核心概念，它们是可重用的代码块，代表UI中的一个特定元素，比如按钮、输入框或列表。组件可以是函数组件或类组件，前者使用函数定义，后者使用ES6类定义。

2. 虚拟DOM**

虚拟DOM是React管理UI状态的数据结构。它是一个轻量级的DOM副本，当组件状态改变时，React会重新计算虚拟DOM，并将其与真实DOM进行比较，仅更新发生变化的部分，从而提高性能。

3. 状态管理**

状态管理对于React应用程序至关重要。受控组件由React管理其状态，而非受控组件则由应用程序本身管理状态。

4. 性能优化**

React天然具有高性能，但为了进一步提升性能，可以使用一些优化技巧，比如：

使用PureComponent或React.memo()优化组件渲染
使用shouldComponentUpdate()方法控制组件更新
优化状态更新，减少不必要的重新渲染

三、React实战

1. Todo应用程序**

Todo应用程序是一个经典的React实战项目，用于管理待办事项。它包含组件、状态管理和事件处理等基本概念。

import React, { useState } from 'react';

const TodoItem = ({ todo, onComplete }) => {
  const [done, setDone] = useState(todo.done);

  return (
    <li>
      <input type="checkbox" checked={done} onChange={() => setDone(!done)} />
      <span>{todo.text}</span>
    </li>
  );
};

const TodoList = ({ todos, onComplete }) => {
  return (
    <ul>
      {todos.map(todo => <TodoItem key={todo.id} todo={todo} onComplete={onComplete} />)}
    </ul>
  );
};

const TodoApp = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Buy groceries', done: false },
    { id: 2, text: 'Finish homework', done: false }
  ]);

  const handleComplete = id => {
    setTodos(prevTodos => prevTodos.map(todo => {
      if (todo.id === id) {
        todo.done = !todo.done;
      }
      return todo;
    }));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} onComplete={handleComplete} />
    </div>
  );
};

export default TodoApp;

2. 计算器应用程序**

计算器应用程序演示了React的事件处理和状态管理。它允许用户输入数字并执行基本算术运算。

import React, { useState } from 'react';

const Calculator = () => {
  const [display, setDisplay] = useState('0');
  const [operand1, setOperand1] = useState(0);
  const [operand2, setOperand2] = useState(null);
  const [operator, setOperator] = useState(null);

  const handleNumberClick = number => {
    setDisplay(display === '0' ? number : display + number);
  };

  const handleOperatorClick = op => {
    setOperand1(parseFloat(display));
    setOperator(op);
    setDisplay('0');
  };

  const handleEqualsClick = () => {
    const result = calculate(operand1, operand2, operator);
    setDisplay(result.toString());
  };

  return (
    <div>
      <input type="text" value={display} />
      <button onClick={() => handleNumberClick('1')}>1</button>
      <button onClick={() => handleNumberClick('2')}>2</button>
      <button onClick={() => handleNumberClick('3')}>3</button>
      <button onClick={() => handleOperatorClick('+')}>+</button>
      <button onClick={() => handleOperatorClick('-')}>-</button>
      <button onClick={() => handleOperatorClick('*')}>*</button>
      <button onClick={() => handleOperatorClick('/')}>/</button>
      <button onClick={handleEqualsClick}>=</button>
    </div>
  );
};

export default Calculator;

3. 表格应用程序**

表格应用程序展示了React的数据管理、排序和过滤功能。它允许用户查看和编辑表格中的数据。

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

const Table = () => {
  const [data, setData] = useState([]);
  const [sortField, setSortField] = useState(null);
  const [sortDirection, setSortDirection] = useState('asc');

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://example.com/data.json');
      const data = await response.json();
      setData(data);
    };

    fetchData();
  }, []);

  const handleSort = field => {
    setSortField(field);
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortDirection('asc');
    }
  };

  const sortData = (a, b) => {
    if (sortDirection === 'asc') {
      return a[sortField] > b[sortField] ? 1 : -1;
    } else {
      return a[sortField] < b[sortField] ? 1 : -1;
    }
  };

  return (
    <table border="1">
      <thead>
        <tr>
          {['Name', 'Age', 'Occupation'].map(field => (
            <th onClick={() => handleSort(field)} key={field}>{field}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.sort(sortData).map(row => (
          <tr key={row.id}>
            <td>{row.name}</td>
            <td>{row.age}</td>
            <td>{row.occupation}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;