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

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>
  );
}