React 基础 - 12 （函数组件hook的使用：state状态、生命周期）

最新推荐文章于 2024-09-11 16:35:34 发布

黑猫了个怪怪

最新推荐文章于 2024-09-11 16:35:34 发布

阅读量373

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Janicecat/article/details/121960362

版权

本文详细介绍了React函数组件中的Hook特性，包括useState用于管理状态和useEffect实现生命周期功能。通过例子展示了如何声明和使用state，如设置初始值、修改状态。同时，解释了useEffect的生命周期阶段，如挂载、更新和卸载时的执行。通过这些Hook，开发者可以更灵活地处理组件的状态变化和副作用。

摘要由CSDN通过智能技术生成

rfc 函数组件 16.8版本 Hook特性，其中就包含了state、生命周期.......

rcc 类组件功能更完善 state 组件生命周期

state状态：

1、引入：import { useState } from "react";

2、声明、使用：const [num, setNum] = useState(1)

useState拥有了state、setState方法

参数1：状态的名称key，rcc中的state={key:value}

参数2：修改state的方法，习惯set+key的大驼峰

参数3：rcc中state中的value

import React, { useState } from "react";

export default function App() {
  const [num, setNum] = useState(1);
  const [name, setName] = useState("皮卡丘");
  return (
    <div>
      <h3>我是函数组件定义的</h3>
      <button onClick={() => setNum(num + 1)}>修改num:{num}</button>
      <div>你的宝贝是:{name}</div>
      <button onClick={() => setName("雷丘")}>升级</button>
    </div>
  );
}

生命周期：

1、引入：import { useEffect } from "react"

2、使用：

第一段：挂载/更新

第二段：将要卸载

第三段：监控数据的变化

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

export default function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>显示/隐藏</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  const [num, setNum] = useState(1);
  const [count, setCount] = useState(100);
  useEffect(() => {
    console.log("挂载或者更新触发", "num更新后:", num);
    return () => {
      console.log("组件将要销毁时触发", "num更新前:", num);
    };
  }, [num]);
  useEffect(() => {
    console.log("更新后的count:", count);
    return () => {
      console.log("更新前的count:", count);
    };
  }, [count]);
  return (
    <div style={{ border: "1px solid red" }}>
      <div>子元素</div>
      {/* 数据更新操作 */}
      <button onClick={() => setNum(num + 1)}>num+1:{num}</button>

      <input
        value={count}
        type="text"
        onChange={e => setCount(e.target.value)}
      />
    </div>
  );
}