React之hooks常见钩子的使用

1.Hooks的含义

Hooks”的单词意思为“钩子”。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。而React Hooks 就是我们所说的“钩子”。

那么Hooks要怎么用呢？“你需要写什么功能，就用什么钩子”。对于常见的功能，React为我们提供了一些常用的钩子，如果有特殊需要，我们也可以写自己的钩子。下面是React Hooks为我们提供的常用的钩子：
useState()
useContext()

2.hooks之useState()

首先，我们创建一个react项目

create-react-app hooks

直接上代码我这里是直接写在app.js里的

import React, {
    
     useState, createContext } from "react";
import Demo from "./demo";
// useState-------
export default function App() {
    
    
  // useState 相当于 状态管理器
  //                                    useState（） 函数
  // const [状态对象, set设置状态对象] = useState(状态对象初始值);
  //可以存储一个值
  const [count, setCount] = useState(0);
  //也可以存储一个对象或者数组
  const [arr, setArr] = useState({
    
    
    name: "zs",
    age: 18,
  });
  //count+1的方法
  const add = () => {
    
    
    setCount(count + 1);
  };

  return (
    <div>
      <div>计数器：{
    
    count}次</div>
      <button onClick={
    
    add}>+1</button>
    </div>
  );
}

在这里插入图片描述

3.hooks之useContext()

接着上面代码写，在src下面建一个demo文件夹
在这里插入图片描述
app.js 里先共享数据给子组件Demo

import React, {
    
     useState, createContext } from "react";
import Demo from "./demo";

// createContextAPI对象
// const context变量名称 = createContext();
//这里要使用export导出，不然子组件不能引用context
export const context = createContext();

export default function App() {
    
    
  const [count, setCount] = useState(0);
  const [arr, setArr] = useState({
    
    
    name: "zs",
    age: 18,
  });
  const add = () => {
    
    
    setCount(count + 1);
  };

  return (
    <div>
      <div>计数器：{
    
    count}次</div>
      <button onClick={
    
    add}>+1</button>
      {
    
    /* 共享数据 把count的值共享给Demo组件 */}
      <context.Provider value={
    
    count}>
        <Demo></Demo>
      </context.Provider>
    </div>
  );
}

在Demo里接收数据

import React ,{
    
    useContext}from 'react'
//引入  const context = createContext();
import {
    
    context} from '../App'
export default function Index() {
    
    
//接收context的数据给con
  const con = useContext(context);
  return (
    <div>接受父组件的{
    
    con}数据</div>
  )
}

注意，我们在使用rfc快捷生成函数组件式的时候，index为首字母是小写，这里我们要改为大写，因为我们生成的是组件，不是函数，所以要大写。
在这里插入图片描述

4.hooks之useEffect（）

简单的理解就是
useEffect 代替常用的生命周期函数 —— componentDidMount和componentDidUpdate

import React, {
    
     useState, createContext, useEffect } from "react";
import Demo from "./demo";
export const context = createContext();
export default function App() {
    
    
  const [count, setCount] = useState(0);
  const [arr, setArr] = useState({
    
    
    name: "zs",
    age: 18,
  });
  const add = () => {
    
    
    setCount(count + 1);
  };
  // useEffec函数代替声明周期函数---componentDidMount和componentDidUpdate
  //   使用useEffect时候有两点需要注意的
  // （1）React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用
  // 两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染
  // (componentDidUpdate)。
  // （2）useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异
  // 步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行
  // 的。个人认为这个有好处也有坏处吧，比如我们要根据页面的大小，然后绘制当前弹出
  // 窗口的大小，如果时异步的就不好操作了
  useEffect(() => {
    
    
    console.log(`useEffect=>点击第 ${
      
      count} 次`);
  });

  return (
    <div>
      <div>计数器：{
    
    count}次</div>
      <button onClick={
    
    add}>+1</button>
      {
    
    /* 共享数据 */}
      <context.Provider value={
    
    count}>
        <Demo></Demo>
      </context.Provider>
    </div>
  );
}

当数据发生变化是就会触发useEffect（）
在这里插入图片描述