【React】React Hooks

useState

useState 向组件中添加状态变量

状态是只读的，不可以直接修改

对于对象类型的状态变量，应该传递一个新的对象来更改

需要对象展开，并重新赋值，进行增加或者修改。

如果需要删除，则使用 filter。

js 复制代码

import { useState } from "react";

function App() {
  const [arr, setArr] = useState([
    { id: 1, name: 'zhangsan' },
    { id: 2, name: 'lisi' },
    { id: 3, name: 'wangwu' }
  ]);
  const content = arr.map((item, index) => {
    return <li key={item.id}>{item.name}</li>
  })
  const deleteVar = () => {
      setArr(arr.filter(item => item.name !== 'zhangsan'))
  }
  return (
    <>
      <ul>
        {content}
      </ul>
      <button onClick={deleteVar}>点击删除zhangsan</button>
    </>
  )
}

export default App

useReducer

让 React 管理多个相对关联的状态数据

js 复制代码

import { useReducer } from "react"
// 1. 定义reducer函数，根据不同的action返回不同的状态
function reducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return state + action.payload
    case 'SUB':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 2. 组件中调用 useReducer， 0 是初始化参数
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div className="App">
      {state}
      {/* 3. 调用dispatch 产生一个新的状态，匹配事件（可传参） 更新 UI */}
      <button onClick={() => { dispatch({ type: 'ADD', payload:100 }) }}>+</button>
      <button onClick={() => { dispatch({ type: 'SUB' }) }}>-</button>
    </div>
  )
}

export default App;

useRef

进行数据存储值可以手动修改不是响应式数据
获取 dom 节点

数据存储

js 复制代码

import {useRef, useState} from "react";


function App() {
    const [count, setCount] = useState(0)
    // useState 进行数据存储 值可以手动修改 不是响应式数据
    const preCount = useRef()

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

    return (
        <>
            <p>最新的 count：{count}</p>
            <p>上次的 count：{preCount.current}</p>
            <button onClick={handleClick}>增加count</button>
        </>
    )
}

export default App;

获取 dom 节点

js 复制代码

import {useRef, useState} from "react";


function App() {
    const inputRef = useRef(null);

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

    return (
        <>
            <input ref={inputRef} />
            <button onClick={handleClick}>
                聚焦输入框
            </button>
        </>
    );
}

export default App;

获取组件

js 复制代码

import {forwardRef, useImperativeHandle, useRef} from "react";

// 默认子组件不对外开放自身的功能 需要 forwardRef 进行包裹
const Child = forwardRef(function (props, ref) {
    // 暴露给父组件的方法
    useImperativeHandle(ref, () => ({
        myFn: () => {
            console.log('子组件myFn方法')
        }
    }))
    return (
        <div>Child 子组件</div>
    )
})

function App() {
    const childRef = useRef();

    function handleClick() {
        childRef.current.myFn();
    }

    return (
        <>
            <Child ref={childRef}/>
            <button onClick={handleClick}>
                按钮
            </button>
        </>
    );
}

export default App;

useContext

多层级通信 - useContext

官方文档：useContext

js 复制代码

import {createContext, useContext, useState} from "react";

function Section({children}) {
    const level = useContext(LevelContent)
    return (
        <section className="section">
            {/*逐渐从上层提供的LevelContext中取值*/}
            <LevelContent.Provider value={level + 1}>
                {/*children 也就是 heading 需要使用 useContext*/}
                {children}
            </LevelContent.Provider>
        </section>
    );
}

function Heading({children}) {
    const level = useContext(LevelContent)
    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 <h6>{children}</h6>;
        default:
            throw Error('未知的 level：' + level);
    }
}

const LevelContent = createContext(0)

function App() {
    return (
        <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>
    )
}

export default App;

useEffect

useEffect 在组件中创建由渲染本身引起的操作（如发送 Ajax 请求，更改 DOM 等），即非用户操作。

副作用函数随着依赖项的触发而执行。

清理副作用一般在组件卸载时执行

useEffect(() =>{
  // 实现副作用逻辑
  return ()=> {
  // 清除副作用逻辑
  }
}, [] )

js 复制代码

import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";



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>
        </>
    );
}

export default App;

useMemo

组件重新渲染时缓存计算的结果。

实例：count1计算斐波那契数列，count2和count1可以触发数值变化。使用memo可以使只有在count1变化时触发斐波那契数列计算函数，而count2变化时不触发斐波那契数列计算函数。

js 复制代码

import { useMemo } from "react";
import { useState } from "react";

function fib(n) {
  console.log('计算函数执行')
  if (n < 3) {
    return 1
  }
  return fib(n - 1) + fib(n - 2)
}

function App() {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  console.log('组件重新渲染')
  const result = useMemo(() => {
    return fib(count1)
  }, [count1])
  return (
    <div className="App">
      <button onClick={() => { setCount1(count1 + 1) }}>change count1: {count1}</button>
      <button onClick={() => { setCount2(count2 + 1) }}>change count2: {count2}</button>
      result: {result}
    </div>
  )
}

export default App

useCallback

useCallback 缓存函数

js 复制代码

import { memo, useCallback, useState} from "react";

// memo 将组件变更为记忆组件
// 如果向组件传入的 prop 没有发生变化 将不会收到外部父组件的影响
const Button = memo(function ({onClick}) {
    console.log('Button渲染了')
    return <button onClick={onClick}>点击触发子组件</button>
})

function App(callback, deps) {
    const [count, setCount] = useState(0)
    // 此时不仅需要 memo 还需要将函数设为useCallback 缓存函数
    // 因为父组件重新渲染 那么handleClick 将被分配一块新的内存地址 和之前的不是同一个函数
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const handleClick = useCallback(() => {
        console.log('点击按钮')
    },[])
    const handleUpdate = () => {
        setCount(count + 1)
    }

    return (
        <>
            <div>
                <p>Count: {count}</p>
                <button onClick={handleUpdate}>点击更新count</button>
                <Button onClick={handleClick}></Button>
            </div>
        </>
    );
}

export default App;