React-4 HOOK函数式组件

最新推荐文章于 2023-06-07 00:50:03 发布

原创最新推荐文章于 2023-06-07 00:50:03 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React 专栏收录该内容

5 篇文章

订阅专栏

本文详细探讨了React Hooks中的useState、useEffect和useContext，包括它们在函数式组件中的应用。useState用于状态管理，useEffect处理副作用，而useContext则实现了组件间的跨级通信。此外，还介绍了如何在父组件和子组件中使用这些Hooks，以及如何创建自定义Hook以提升代码复用性。

react4 Hook 函数式组件

在hook没有出现之前，函数组件叫做无状态组件，因为没有自己的状态，只有父组件传过来的属性，hook的出现使得函数式组件有自己的状态，也能实现一些需要在声明周期函数中才能完成的操作

是一些可以让你在函数组件里“钩入”react state及生命周期等特性的函数
特点:
    组件之间复用状态逻辑，不需要修改组件的结构
    可将组件中互相关联的部分拆分成更小的函数
    在不编写class的情况下使用state以及其他的react特性
        
		函数主要作用，通过数据渲染ui界面
        除主要作用之外的操作为副作用
        如：操作DOM节点
           Ajax网络请求
           localstorage操作

useState

// 引入对应的 hooks 组件
import React, { useState } from "react";

export default function App() {
    // 使用 hooks 组件  useState函数在一个组件中可以使用多个
    // 这个语法的意思是 useState() 函数会返回一个数组，然后解构出来
  const [num, setnum] = useState(0);
    
    // 第一个元素 msg 表示的是 useState("msg") 括号里面的参数； msg是一个变量
    // 第二个参数 setmsg 表示的是设置 msg的唯一的函数 setmsg这个函数名字可以随意取，但是建议下面代码这样操作；setmsg() 是一个函数
  const [msg, setmsg] = useState("msg");
    
  return (
    <div>
      <h2>App</h2>
         直接使用 useState 的值
      <h3>{num}</h3>
      <button
        onClick={() => {
          // 修改 useState 返回的值
          setnum(num + 1);
        }}
      >
        加一
      </button>
      <h3>{msg}</h3>
      <button
        onClick={() => {
          setmsg("信息化");
        }}
      >
        changInfo
      </button>
    </div>
  );
}

useEffect - 副作用函数

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

export default function App() {
  const [num, setnum] = useState(0);
  // useEffect 在只写第一个参数的时候，在初始化和组件刷新的时候，都会被触发
  useEffect(() => {
    console.log("useEffect 在只写第一个参数的时候，在初始化和组件刷新的时候，都会被触发");
  });

  useEffect(() => {
    console.log("---useEffect 第二个参数为空数组的时候，只有初始化的时候调用");
  }, []);
    
  useEffect(() => {
    console.log("===初始化会执行，第二个参数有值的时候，当数组里面的值变化的时候，触发该函数");
    return () => {
      // 在组件销毁的时候，执行这里的代码
    };
  }, [num]);

  return (
    <div>
      <h2>useEffect的使用</h2>
      <h3>{num}</h3>
      <button
        onClick={() => {
          setnum(num + 1);
        }}
      >
        加一
      </button>
    </div>
  );
}

useContext 函数组件跨级通信

父组件代码

import React from "react";

import Demo from "./Demo";

// 创建一个 context 对象 导出一下，因为子组件需要使用这个对象中的一个消费者对象
export const GlobalContext = React.createContext();

export default function App() {
  return (
    <GlobalContext.Provider
      value={{
        val: "------------123456789",
        num: 1234,
      }}
     >
      <Demo />
    </GlobalContext.Provider>
  );
}

子组件

import React, { useContext } from "react";
// 引入导出的那个 context 对象
import { GlobalContext } from "./App";

export default function ComC() {
  // 使用 useContext 的使用  将导入的 context 对象作为参数传入,这个函数会返回 提供者的 value属性的值
  const text = useContext(GlobalContext);
  // console.log(text);
  return (
    <div>
      <h2>ComC</h2>
      {text.val}
    </div>
  );
}

自定义Hook

import { useState } from "react";
// 这个函数就是自定义的 hook 
export function useScrollTop() {
    
  const [height, setheight] = useState(0);

  window.addEventListener("scroll", () => {
      
    let h = document.documentElement.scrollTop;
    setheight(h);
      
  });
    
  return [height];
}

其他

1、日期时间转字符串：toLocaleTimeString()

2、获取接口的方法fetch类似于Ajax技术，返回一个promise对象，无拦截器

语法:

fetch('url')

    .then(response=>response.json())    //返回一个promise对象 需要一个then作中转站

    .then(data = > console.log(data))   //返回真正的数据