React的生命周期

# Hooks 与 React 生命周期的关系 # react Hooks 与 React 生命周期的关系

• useState：定义并初始化数据

import { useState } from "react";

const RenderIndex = () => {
  const [count, set_count] = useState(0);
  const handleCount = () => {
    set_count(count + 1);
  };

  return (
    <>
      <div>{count}</div>
      <button onClick={() => handleCount()}>点击</button>
    </>
  );
};

export default RenderIndex;

• useEffect：初始化页面 & 监听数据

import { useEffect, useState } from "react";

const RenderIndex = () => {
  const [count, set_count] = useState(0);
  useEffect(() => {
    console.log("====================================");
    console.log("初始化页面");
    console.log("====================================");
  }, []);

  return (
    <>
      <div>{count}</div>
      <button onClick={() => handleCount()}>点击</button>
    </>
  );
};

export default RenderIndex;

import { useEffect, useState } from "react";

const RenderIndex = () => {
  const [count, set_count] = useState(0);
  useEffect(() => {
    console.log("====================================");
    console.log("初始化页面");
    console.log("====================================");
  }, []);

  useEffect(() => {
    console.log("count", count);
  }, [count]);

  const handleCount = () => {
    set_count(count + 1);
  };
  return (
    <>
      <div>{count}</div>
      <button onClick={() => handleCount()}>点击</button>
    </>
  );
};

export default RenderIndex;

• useRef：获取 dom 节点

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

const RenderIndex = () => {
	const [count, set_count] = useState(0);

	// 获取真实dom节点
	const domRef = useRef(null);

	useEffect(() => {
		console.log('====================================');
		console.log('初始化页面', domRef);
		console.log('====================================');
	}, []);

	useEffect(() => {
		console.log('count', count);
	}, [count]);

	const handleCount = () => {
		set_count(count + 1);
	};
	return (
		<>
			<div style={{ marginBottom: 20, color: 'pink' }} ref={domRef}>
				{count}
			</div>
			<button onClick={() => handleCount()}>点击</button>
		</>
	);
};

export defaul~~t RenderIndex;