react-4-函数式组件-hook

hook 是什么

在hook没有出现之前，函数组件叫做无状态组件，因为他没有自己的状态，只有父组件传过来的属性，这就导致了函数式组件具有局限。但是hook的出现使得函数式组件有自己的状态，也能实现一些需要在声明周期函数中才能完成的操作，加之函数式组件更加简单，所以受欢迎程度逐渐提高。hook是什么？就是让函数式组件拥有状态等的一些函数。

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-副作用函数

副作用函数指的是主要作用以外的作用，狭隘理解就是次要作用。不是生病吃药之后身体产生的负面作用的那个副作用。

这个函数中可以：

ajax请求
手动修改dom
localstorage操作

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

react-4-部分1