React简介与特性

React是由Facebook开发的一种用于构建用户界面的JavaScript库，它的主要特点是组件化和虚拟DOM。通过组件化的思想，React可以将一个复杂的应用程序拆分成多个独立的组件，每个组件只负责一小部分功能，这样可以提高代码的可维护性和可复用性。而虚拟DOM可以在页面需要更新时，先在内存中构建出一个虚拟的DOM树，然后将这个虚拟DOM树和上一次的虚拟DOM树进行比较，只更新有变化的部分，这样可以提高页面更新的效率。

React还有以下一些重要的特点：

声明式编程：React通过声明式编程，让开发者只关注描述组件应该如何展示，而不用手动操作DOM。
单向数据流：React中的数据流是单向的，即从父组件向子组件传递数据，这样可以避免组件之间的数据互相干扰。
组件化的CSS：React中的组件可以封装自己的CSS样式，这样可以避免CSS样式的全局污染。

React更新流程

React的更新流程主要包括以下几个步骤：

状态更新：当组件的状态发生变化时，React会调用组件的render方法重新渲染组件。
虚拟DOM比较：渲染完成后，React会将新的虚拟DOM树和旧的虚拟DOM树进行比较，找出有变化的部分。
真实DOM更新：React会将有变化的部分更新到真实的DOM树上，这个过程叫做DOM重建。
生命周期方法调用：在DOM更新完成后，React会调用组件的生命周期方法，进行必要的操作，例如组件挂载完成后执行的操作。

Class组件和函数组件

在React中，组件分为Class组件和函数组件两种，它们都可以接收props参数，并且都有自己的状态。

Class组件是ES6中的类，它们继承自React.Component类，并且可以使用render方法返回需要渲染的内容，例如：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default MyComponent;

而函数组件则是简单的JavaScript函数，它们接收props参数，并返回需要渲染的内容，例如：

import React from 'react';

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

export default MyComponent;

在React的更新流程中，函数组件的性能要比Class组件好，因为函数组件不需要实现有的类实例化过程，也不需要实现生命周期方法等。但是Class组件在某些情况下仍然很有用，例如需要在组件内部维护一些状态或者需要使用生命周期方法时。

Hook规则

Hook是React 16.8版本引入的一个新特性，它可以让我们在函数组件中使用状态和其他React特性。使用Hook可以使得代码更加简洁和易于理解。

在使用Hook时，需要遵守以下几个规则：

只在函数最外层调用Hook，不要在循环、条件语句或者其他任何嵌套的函数中调用。
只在React函数组件或自定义Hook中调用Hook，不要在普通的JavaScript函数中调用。
在同一个组件中按照顺序调用Hook，不要跳过某个Hook或者在条件语句中使用。

遵守这些规则可以确保我们正确地使用Hook，并避免一些常见的问题。

常见API讲解

在React中，有一些常见的API被广泛使用，包括useState、useEffect、useContext等。

useState可以用于在函数组件中定义状态，例如：

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect可以用于在组件渲染完成后执行副作用操作，例如：

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

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useContext可以用于在函数组件中访问Context，例如：

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

function MyComponent() {
  const { user } = useContext(UserContext);

  return (
    <div>
      <p>Welcome, {user.name}!</p>
    </div>
  );
}

业务场景案例

在实际的开发中，React可以应用于各种各样的业务场景。下面是一个简单的案例，展示了如何使用React构建一个简单的待办事项应用程序。

首先，我们可以定义一个TodoItem组件，用于展示每一个待办事项：

import React from 'react';

function TodoItem(props) {
  return (
    <div>
      <input type="checkbox" checked={props.completed} onChange={props.onToggle} />
      <span>{props.text}</span>
    </div>
  );
}

export default TodoItem;

接下来，我们可以定义一个TodoList组件，用于展示所有的待办事项：

import React, { useState } from 'react';
import TodoItem from './TodoItem';

function TodoList() {
  const [items, setItems] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build a todo app', completed: false },
    { id: 3, text: 'Deploy the app', completed: false }
  ]);

  function handleToggle(id) {
    setItems(
      items.map(item => {
        if (item.id === id) {
          return {
            ...item,
            completed: !item.completed
          };
        } else {
          return item;
        }
      })
    );
  }

  return (
    <div>
      {items.map(item => (
        <TodoItem key={item.id} text={item.text} completed={item.completed} onToggle={() => handleToggle(item.id)} />
      ))}
    </div>
  );
}

export default TodoList;

在TodoList组件中，我们使用useState定义了一个items状态，用于保存所有的待办事项。我们还定义了一个handleToggle函数，用于在待办事项被点击时更新它的状态。

最后，我们可以在应用程序中使用TodoList组件：

javascriptCopy code
import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <h1>Todo App</h1>
      <TodoList />
    </div>
  );
}

export default App;

这个应用程序非常简单，但它展示了如何使用React构建一个具有状态和交互性的应用程序。在实际的开发中，我们可以使用React构建更复杂的应用程序，例如社交网络、电子商务网站等。

React基础 | 青训营笔记