一些常用的react hooks以及各自的作用

一些常用的react hooks以及各自的作用

一、React Hooks是什么

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

至于为什么引入hook,官方给出的动机是解决长时间使用和维护react过程中常遇到的问题,例如:

  • 难以重用和共享组件中的与状态相关的逻辑
  • 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命* 周期函数中可能会包含着各种互不相关的逻辑在里面
  • 类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题
  • 由于业务变动,函数组件不得不改为类组件等等

在以前,函数组件也被称为无状态的组件,只负责渲染的一些工作

因此,现在的函数组件也可以是有状态的组件,内部也可以维护自身的状态以及做一些逻辑方面的处理

二、一些常用的Hooks以及各自的作用

1、useState

创建数据状态,方法里的参数为state默认的值,返回值是一个数组,第一个值为当前的state,第二个值为更新state的函数

javascript 复制代码
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p >
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2、useEffect

可以进行带有副作用的操作,useEffect第一个参数接受一个回调函数,第二个参数是一个数组,数组元素指定特定值是否在两次渲染中发生变化,没有变化则跳过effect的调用

javascript 复制代码
import { useEffect, useState } from "react";
export default function App() {
  const [count, setCount] = useState(0)
  const handleIncrement = () => setCount(count + 1)
  const handleDecrement = () => setCount(count - 1)
  useEffect(() => {
    console.log('useEffect');
  }, [count])

  return (
    <div style={{ padding: 10 }}>
      <button onClick={handleIncrement}>+</button>
      <span>{count}</span>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

3、useContext

用作组件通信

javascript 复制代码
import { createContext, useContext } from "react";

export function Section({ children }) {
  const level = useContext(LevelContext);
  return (
    <section className="section">
      <LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider>
    </section>
  );
}

export function Heading({ children }) {
  const level =  useContext(LevelContext);
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h1>{children}</h1>;
    default:
      throw Error("未知的 level: " + level);
  }
}

const LevelContext = createContext(0);

export default function App() {
  return (
    <div>
      <Section>
        <Heading>主标题</Heading>
        <Section>
          <Heading>副标题</Heading>
          <Heading>副标题</Heading>
          <Heading>副标题</Heading>
          <Section>
            <Heading>子标题</Heading>
            <Heading>子标题</Heading>
            <Heading>子标题</Heading>
            <Section>
              <Heading>子子标题</Heading>
              <Heading>子子标题</Heading>
              <Heading>子子标题</Heading>
            </Section>
          </Section>
        </Section>
      </Section>
    </div>
  );
}

4、useMemo

用作数据缓存

javascript 复制代码
import { useMemo, useState } from "react";

function DoSomeMath({value}){
  const result = useMemo(() => {
    console.log('DoSomeMath执行了');
    let result = 0
    for(let i = 0; i < 1000000; i++){
      result += value * 2
    }
    return result
  }, [value])
  return (
    <div>
      <p>输入内容:{value}</p>
      <p>经过复杂计算的数据:{result}</p>
    </div>
  )
}

export default function App() {
  const [inputValue, setInputValue] = useState(5)
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>count的值为:{count}</p>
      <button onClick={() => setCount(count  + 1)}>
        点击更新
      </button>
      <br/>
      <br/>
      <input 
        type="number"
        value={inputValue}
        onChange={(e) => setInputValue(parseInt(e.target.value))}
      />
      <DoSomeMath value={inputValue}/>
    </div>
  );
}

5、useCallback

用作函数缓存

javascript 复制代码
import { memo, useCallback, useState } from "react";

// memo将组件变更为一个记忆组件,如果向这个组件传入的prop没有出现变话,它就不会受到父组件更新的影响
const Button = memo(function ({ onClick }) {
  console.log("Button渲染了");
  return <button onClick={onClick}>子组件</button>;
}); 

export default function App() {
  const [count, setCount] = useState(0)
  const handleClick = useCallback(() => {
    console.log("点击按钮");
  }, []);
  const handleUpdate = () => {
    setCount(count + 1)
  }
  return (
    <div>
      <p>Count:{count}</p>
      <button onClick={handleUpdate}>点击</button>
      <br />
      <Button onClick={handleClick} />
    </div>
  );
}

6、useReducer

用作state的统一管理状态,可用useState代替

javascript 复制代码
import { useReducer } from "react";
function countReducer(state, action){
  switch (action.type){
    case "increment":
      return state + 1
    case "decrement":
      return state - 1
    default: 
      throw new Error()
  }
}
export default function App(){
  // 计数器
  // const [count, setCount] = useState(0)
  // const handleIncrement = () => setCount(count + 1)
  // const handleDecrement = () => setCount(count - 1)
    const [state, dispatch] = useReducer(countReducer, 0);
    const handleIncrement = () => dispatch({ type: "increment" });
    const handleDecrement = () => dispatch({ type: "decrement" });

  return (
    <div style={{ padding: 10 }}>
      <button onClick={handleIncrement}>+</button>
       {/* <span>{count}</span> */}
      <span>{state}</span>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

7、useRef

用作获取DOM结构和引用之前的状态值

javascript 复制代码
// react hooks,useRef,引用之前的状态值
import { useRef, useState } from "react";

export default function App(){
  const [count, setCount] = useState(0)
  const prevCount = useRef()

  function handleClick(){
    prevCount.current = count
    setCount(count + 1)
  }

  return (
    <div style={{ padding: 10 }}>
      <p>最新的count:{count}</p>
      <p>上次的count:{prevCount.current}</p>
      <button onClick={handleClick}>增大的count</button>
    </div>
  );
}
javascript 复制代码
// react hooks,useRef,引用页面中的标签
import { useRef } from "react";

export default function App(){
  const inputRef = useRef(null)

  function handleClick(){
    inputRef.current.focus()
  }

  return (
    <div style={{ padding: 10 }}>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>增大的count</button>
    </div>
  );
}
javascript 复制代码
// react hooks,useRef,引用页面中的其他组件进行子组件功能访问
import { forwardRef, useImperativeHandle, useRef } from "react";
const Child = forwardRef(function (props, ref) {
  useImperativeHandle(ref, () => ({
    // 暴露父组件的方法
    myFn: () => {
      console.log("子组件的myFn方法");
    },
  }));
  return <div>子组件</div>;
});

export default function App() {
  const childRef = useRef();
  function handleClick() {
    childRef.current.myFn()
  }

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}
相关推荐
m0_7482552611 分钟前
前端安全——敏感信息泄露
前端·安全
鑫~阳2 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin2 小时前
CSS|14 z-index
前端·css
2401_882727573 小时前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder3 小时前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂4 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand4 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL4 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿4 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫4 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js