React学习，进阶之美，构建交互式前端

2023-11-18 19:40:43

在React的学习之旅中，Hooks 与组件传值 是迈向进阶必不可少的两块基石。本文将深入剖析这两个核心概念，并通过生动的例子，带你领略React构建交互式前端应用的精妙之处。

拥抱Hooks，解放组件束缚

Hooks是React在16.8版本引入的革命性特性。它消除了类组件的束缚，让你可以以函数组件的形式使用状态和生命周期方法。

状态管理的艺术

使用Hooks，你可以轻松管理组件状态：

const [count, setCount] = useState(0); // 初始化状态，count初始值为0
setCount(count + 1); // 更新状态，count自增1

掌控生命周期

Hooks还提供了控制组件生命周期的方法：

useEffect(() => {
  // 组件挂载或更新时执行的副作用
  console.log("组件已挂载或更新");
}, []); // 依赖项为空，只执行一次

组件传值的奥秘

组件传值是React应用中数据交互的基石。它允许父组件将数据传递给子组件，从而实现数据共享。

父传子，一脉相承

父组件可以通过props属性向子组件传递数据：

// 父组件
<ChildComponent prop1={value1} prop2={value2} />

// 子组件
const props = { prop1, prop2 };

子传父，逆流而上

子组件可以通过函数回调的方式，将数据传递回父组件：

// 子组件
const childCallback = (value) => {
  // 将value传递回父组件
  parentCallback(value);
};

// 父组件
<ChildComponent onCallback={parentCallback} />

实例演绎，触类旁通

为了加深理解，让我们通过几个例子来体验React Hooks和组件传值的强大之处：

计时器组件

使用Hooks构建一个简单的计时器组件：

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>计时：{count}秒</div>;
};

弹框组件

通过组件传值，创建一个可复用的弹框组件：

// 父组件
<Modal isOpen={true} onClose={() => setIsOpen(false)} />

// Modal组件
const Modal = ({ isOpen, onClose }) => {
  return isOpen ? (
    <div>
      ...弹框内容...
      <button onClick={onClose}>关闭</button>
    </div>
  ) : null;
};