React——hooks 钩子函数基本用法

【useState】声明 state 变量

useState 会返回一个数组：[当前状态,更新它的函数]

import { useState } from "react"function Index() {const [num, setNum] = useState(0)return <div><h1>计数器：{num}</h1><button onClick={() => setNum(num + 1)}>增加</button></div>
}
export default Index

【useEffect】副作用集合了(组件初始化、更新、销毁)

useEffect 可以接收两个参数

//组件会在初始化和更新的时候执行函数
useEffect(() => {console.log("useEffect-updata")
})
//组件会在销毁时执行return的函数
useEffect(() => {console.log("useEffect-updata")return ()=>{console.log("useEffect-destroy")}
})
//组件初始化时执行，只会执行一次
useEffect(() => {console.log("useEffect-updata")
},[])
//组件初始化时执行或者num变量发生改变时执行
useEffect(() => {console.log("useEffect-updata")
},[num])

【useContext】获取上下文

useContext 配合着 createContext 一起使用

//父组件
import { useState , createContext } from "react"
import A from "../../components/A/index"export const C:any = createContext(null)export const Index = () => {const [list] = useState([1, 2])return <C.Provider value={{list}}><A></A></C.Provider>
}

//子组件
import B from "../B/index"export default function A(){return <div><B></B></div>
}

//孙组件
import { useContext } from "react"
import { C } from "../../view/PageFn/PageFn1"export default function B(){const { list } = useContext(C)return <div>{list}</div>
}

【useReducer】useState 的替代方案

useReducer 接收三个参数(回调函数,变量,变量初始化函数)
useReducer 返回一个数组 [变量,执行函数]

import { useReducer } from "react"const initData = "Hello"export const Index = () => {const [state, dispatch] = useReducer(reducer,initData,initFn)return <div><div>state:{state}</div><button onClick={()=>dispatch("B")}>打招呼</button></div>
}/* state设置的变量,action传递的参数 */
function reducer(state: any, action: any) {return `${state} and ${action}`
}/* state变量的初始化函数 */
function initFn(state: any){return `${state} A`
}

【useRef】获取dom

import { useRef } from "react"export const Index = () => {const el = useRef<any>(null)const hanleGetEl = ()=>{console.log(el.current.focus())}return <div><input type={"text"} ref={el} /><button onClick={hanleGetEl}>Focus El</button></div>
}

【useImperativeHandle】配合forwardRef一起使用

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值

import { forwardRef, useImperativeHandle, useRef } from "react"
//父组件
export const Index = () => {const AInput = forwardRef(A)const AInputRef = useRef<any>(null)//点击按钮执行子组件暴露的focus方法const handleFocus = ()=>{AInputRef.current.focus()}return <div><AInput ref={AInputRef}></AInput><button onClick={handleFocus}>Get El</button></div>
}
//子组件
function A(_props:any,ref:any){const inputRef = useRef<any>(null)useImperativeHandle(ref,()=>({focus:()=>{inputRef.current.focus()}}))return <input type="text" ref={inputRef} />
}

React——hooks 钩子函数基本用法相关推荐

react-10 函数式写法rsc，配合HOOKS钩子函数
性能优化:useMemo :用于组件性能优化(缓存计算属性,变化才执行)是通过缓存值的方式实现性能优化 (计算缓存):适用于复杂的计算场景,如复杂的列表渲染,对象深拷贝... // // // ...
“约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法（建议收藏）
vue-router中的路由钩子函数基本用法路由钩子函数分为三种类型如下: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { consol ...
React Hooks常用的Hooks钩子函数
React Hooks的作用是对函数型组件进⾏增强,让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒,可以在不使⽤类组件的情况下, 实现相同的功能. useState实现原理 useState方法 ...
知识梳理---------Hooks钩子函数的使用
1 React Hooks介绍 1.1 React Hooks是用来做什么的对函数型组件进行增强,让函数型组件可以存储状态,一个拥有处理副作用的能力. 组件中只要不是把数据转换成视图的代码,就是属于 ...
认识 react 的钩子函数
钩子函数运行总览: react基本的钩子函数(蓝色为持续运行的钩子函数) 执行顺序和组件相关的几个重要钩子函数
pytest合集（10）— Hook钩子函数
一.钩子函数钩子函数这个称呼是很多开发语言中都会涉及到的一个东西. 1.理解钩子函数如何理解钩子函数 - 知乎 2.pytest的钩子函数 Hooks钩子函数是pytest框架预留的函数,通过这些 ...
React Hooks（钩子函数）
React Hooks 什么是Hooks? UseState() useReducer() useContext() useEffect() useRef() 自定义钩子函数 React Hooks中 ...
React Hooks （一文看懂四个常用的钩子）
React Hooks (一文看懂四个常用的钩子) 上次看了阮一峰老师的文章,写的很通俗易懂,我在这简单给大家梳理一下我们在开发中常用的就以下四个Hooks. useState() useConte ...
react hooks useEffect副作用钩子使用
react框架开发作为入门,我们首先学到的是自定义组件,然后编写相关处理逻辑,绑定事件等等.一般自定义组件,我们是通过编写一个class继承React.Component,然后编写最主要的render ...

React——hooks 钩子函数基本用法

React——hooks 钩子函数基本用法相关推荐

最新文章

热门文章