React中的Hooks钩子
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;
原文地址:https://blog.csdn.net/style201904/article/details/142920242
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!