React基础与实践

一、React简介与特点

1.简介

React是一个用于构建用户界面的JavaScript库，由Facebook开发并开源。它专注于构建可重用的UI组件，使开发者能够以声明式的方式描述应用程序的用户界面，并以高效、灵活和可维护的方式进行管理。

React的核心思想是组件化。开发者可以将用户界面拆分为独立的、可重用的组件，每个组件负责管理自己的状态和渲染逻辑。这种组件化的方式使得代码结构清晰、易于理解和维护。同时，React采用了虚拟DOM（Virtual DOM）的概念，通过将界面的变化进行虚拟化比较，只对需要更新的部分进行实际的DOM操作，从而提高了性能。

React还提供了一种称为JSX（JavaScript XML）的语法扩展，允许开发者在JavaScript代码中编写类似HTML的标记，将组件的结构和逻辑进行组合。这种混合编写的方式使得界面的开发更加直观和灵活。

React本身只关注于用户界面的构建，不涉及数据管理和网络请求等方面。为了解决这些问题，开发者可以结合其他库或框架，例如Redux、Mobx或者GraphQL等。

总结起来，React是一个用于构建用户界面的声明式JavaScript库，以组件化和虚拟DOM为核心，通过提供高效、灵活和可维护的方式，使开发者能够构建复杂的、交互丰富的Web应用程序。

2.react特点

（1）声明式

import React from 'react';

// 声明一个函数组件
function Counter() {
  const [count, setCount] = React.useState(0);

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

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
}

// 渲染组件到DOM
React.render(<Counter />, document.getElementById('root'));

这个示例展示了React声明式的特点，我们只需要描述组件的状态和界面的结构，React会负责根据状态的变化来更新界面。每当状态发生变化时，React会根据新的状态重新渲染组件，从而使界面与数据保持同步。

（2）组件化

import React from 'react';

// 声明一个函数组件
function Button(props) {
  return (
    <button onClick={props.onClick}>{props.label}</button>
  );
}

// 声明一个类组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

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

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <h1>计数器</h1>
        <p>当前计数：{this.state.count}</p>
        <Button onClick={() => this.increment()} label="增加" />
        <Button onClick={() => this.decrement()} label="减少" />
      </div>
    );
  }
}

// 渲染组件到DOM
ReactDOM.render(<Counter />, document.getElementById('root'));

这个示例展示了React组件化的特点，我们将界面拆分为独立的、可重用的组件，并通过组合这些组件来构建复杂的界面。每个组件负责管理自己的状态和渲染逻辑，通过传递属性来实现组件间的数据传递和交互。这种组件化的方式使得代码更加模块化、可维护和可扩展。

（3）跨平台编写

React是一个跨平台的JavaScript库，它可以用于构建Web应用、移动应用和桌面应用。

二、react基础

组件：React的核心思想是组件化。组件是构建用户界面的基本单元，可以是函数组件或类组件。组件将界面的不同部分进行封装，使代码结构更清晰、可维护性更高。
JSX：JSX是一种JavaScript语法扩展，允许在JavaScript代码中直接编写类似HTML的标记。通过JSX，可以以声明式的方式描述界面的结构，将HTML标记和JavaScript代码混合在一起。
属性（Props）：组件可以通过属性（props）接收外部传递的数据。属性是从父组件向子组件传递数据的一种机制，用于定制和配置组件的行为。
状态（State）：组件可以通过状态（state）管理自己的数据。状态是组件内部的可变数据，用于存储和跟踪组件的状态变化。通过使用React的useState钩子或类组件的state属性，可以定义和更新组件的状态。
渲染（Rendering）：React使用虚拟DOM（Virtual DOM）来进行高效的渲染。虚拟DOM是React的一种抽象表示，它是一个轻量级的JavaScript对象树，与实际的DOM结构相对应。当组件的状态发生变化时，React会计算出新的虚拟DOM树与旧的虚拟DOM树的差异，并进行最小化的更新操作，以减少对实际DOM的操作次数。
生命周期（Lifecycle）：类组件具有生命周期方法，这些方法在组件的不同阶段会被自动调用。生命周期方法允许开发者在组件的不同生命周期阶段进行一些操作，例如组件初始化、更新、卸载等。
事件处理：React使用事件处理机制来处理用户交互。可以在组件中定义事件处理函数，并通过onClick、onChange等属性将其绑定到相应的元素上。
条件渲染：React允许根据条件来选择性地渲染组件或元素。通过使用条件语句（如if、switch）或三元表达式，可以根据不同的条件来决定要渲染的内容。
列表渲染：React提供了简洁的方式来渲染列表数据。可以使用map方法将数据数组映射为对应的组件数组，并将其渲染到界面上。

以下是一个react代码示例

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

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

  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const handleDeleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

上述代码实现了一个react的todoList代码示例。

这个示例展示了React组件的声明、状态管理、事件处理和列表渲染等基本概念。通过这个示例，用户可以输入待办事项，点击"Add"按钮添加到列表中，并且可以删除已完成的事项。

三、常见API详解

四、常见Hook及作用

在React中，Hook是一种函数，可以让你在函数组件中使用React的一些特性。它们让你在不编写类组件的情况下，使用状态管理、生命周期方法等功能。

React基础与实践 | 青训营笔记