当前位置：首页 > article >正文

React中的Hooks钩子

article 2024/10/22 4:42:28

useState

useState（initialState）有一个初始化值作为参数，initialState 可以是任意值
返回包含两个值数组，第一个是值，第二个是 set 方法

//这是一个useState简单使用实例
function Plus() {
  const [count, setCount] = useState(1);
  function counter(){
     setCount(count+1)
  }
  return (
    <div className='plus'>
        <div>{count}</div>
     <div className='plus-click' onClick={counter}>+</div>
 
    </div>
  );
}

useEffect（执行副作用）
副作用是指一段和当前执行结果无关的代码，比如说要修改函数外部的某个变量，要发起一个请求有两个参数。useEffect 有两个参数第一个参数是 callback，第二个是个依赖数组，这个数组可以为空

// 在这里count的值发生变化时，clikValue的值及跟着变化，在这个callback里也可以发起网络请求
function CountPlus() {
  const [count, setCount] = useState(0);
  const [clikValue, setClickValue] = useState("");
 
  useEffect(() =>{
    setClickValue("我点击了"+count+"次")
 
  },[count])
  function counter(){
     setCount(count+1)
  }
  return (
    <div className='plus'>
        <div>{count}</div>
      <div className='plus-click' onClick={counter}>+</div>
      <div>{clikValue}</div>
 
    </div>
  );
}
export default CountPlus;

useReducer
用于在函数组件中处理复杂的状态逻辑。它通常用于管理具有复杂状态和行为的组件，尤其是涉及到多个状态转换的情况。useReducer 接受两个参数：一个是包含状态转换逻辑的函数（reducer），另一个是初始状态。它返回一个包含当前状态和 dispatch 函数的数组。

import CountDis from "./componts/CountDis";
import './App.css';
import React, { useReducer } from 'react'
const reducer = (state, action) => {
  switch (action.type) {
    case 'count':
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}
function App() {
  const [useState, dispatch] = useReducer(reducer, { count: 0 })
  return (
    <div className="App">
      <p>点击了 {useState.count}次</p>
      <CountDis dispatch={dispatch}></CountDis>
    </div>
  );
}
export default App;

import React from 'react';
import '.././index.css';
 
function CountDis({dispatch}) {
 
  function counter(){
    dispatch({ type: 'count' })
  }
  return (
    <div className='plus'>
     <div className='plus-click' onClick={counter}>+</div>
    </div>
  );
}
export default CountDis;

useRef
访问 Dom 元素,

function CountRef() {
  const inputRef = useRef(null);
  // 使用 ref 访问 DOM 元素
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
  function counter() {
   alert(inputRef.current.value)
  }
  return (
    <div className='plus'>
      <p>{inputRef.current}</p>
      <input ref={inputRef}></input>
      <div className='plus-click' onClick={counter}>+</div>
    </div>
  );
}
export default CountRef;