企业网站seo外包 s_软件测试培训心得_深圳英文网站推广_百度云搜索引擎官网入口

useState

1. useState（initialState）有一个初始化值作为参数，initialState 可以是任意值
2. 返回包含两个值数组，第一个是值，第二个是 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;