React 源码解读：API 复习和基础入门

2023-10-02 23:46:38

随着 React 在前端开发领域的不断普及，越来越多的人希望深入理解 React 的内部原理和使用 React 进行前端开发的技巧。本文将对 React 的 API 和基础知识进行全面的介绍，帮助读者快速掌握 React 的核心概念和使用技巧。

React 的生命周期

React 的生命周期是指 React 组件在创建、更新和销毁过程中所经历的一系列状态变化。React 组件的生命周期分为四个阶段：

Mounting (装载) ：当组件首次被创建和渲染到 DOM 中时，会进入 Mounting 阶段。在此阶段，组件会调用 componentDidMount 方法。
Updating (更新) ：当组件的状态或属性发生变化时，会进入 Updating 阶段。在此阶段，组件会调用 componentDidUpdate 方法。
Unmounting (卸载) ：当组件被从 DOM 中移除时，会进入 Unmounting 阶段。在此阶段，组件会调用 componentWillUnmount 方法。

组件结构

React 组件是前端开发中的一种重要概念。组件可以被视为一个独立的、可复用的代码块，它可以被多次使用来构建复杂的UI。React 组件通常由以下几个部分组成：

Properties (属性) ：组件的属性是组件从父组件接收的数据。属性可以是任何类型的数据，包括字符串、数字、布尔值、数组和对象。
State (状态) ：组件的状态是组件的内部数据。状态可以是任何类型的数据，包括字符串、数字、布尔值、数组和对象。组件的状态只能通过 setState() 方法进行修改。
Methods (方法) ：组件的方法是组件可以执行的操作。方法可以是任何类型的函数，包括箭头函数、普通函数和类方法。

事件处理

React 组件可以使用 addEventListener() 方法来监听 DOM 事件。当事件发生时，组件会调用相应的事件处理函数。事件处理函数通常是箭头函数或普通函数。

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

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

数据绑定

React 中的数据绑定是指组件的状态和 DOM 元素的值之间的一种双向关联。当组件的状态发生变化时，DOM 元素的值也会随之更新。反之，当 DOM 元素的值发生变化时，组件的状态也会随之更新。

React 中的数据绑定是通过 useState 和 useEffect 两个钩子函数来实现的。useState 钩子函数用于创建和管理组件的状态，useEffect 钩子函数用于在组件的状态或属性发生变化时执行某些操作。

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

  useEffect(() => {
    document.querySelector('#count').textContent = count;
  }, [count]);

  return (
    <div>
      <p id="count">{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};