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

React Hooks学习笔记

news 来源：原创 2024/9/20 23:41:27

一、usestate的使用方法-初始化state函数

import React, { useState } from "react";
function App() {const [count, setCount] = useState(0);return (<div><p>点击{count}次</p><button onClick={() => setCount(count + 1)}>点击</button></div>)

运行效果图：

二、useEffect的使用方法-执行钩子函数的操作

import React, { useState, useEffect } from "react";
const [count,setCount] = useState(0);const btnClick = () =>{setCount(count + 1);}useEffect(() =>{console.log("执行了useEffect");document.title = '点击了{count}次'})return(<div><p>点击{count}次</p><button onClick = {() => { btnClick()}}>点击</button></div>)

运行效果图：

三、useContext的使用方法-实现组件之间的共享

import React, { useContext, createContext } from "react"; 
const myContext = createContext();function App(){const value = useContext(myContext);return(<div>{value}</div>);}export default function MyComponent(){return(<myContext.Provider value={100}><div>hello world</div><App/></myContext.Provider>);}

运行效果图：

四、useReducer的使用方法-把组件的所有状态更新逻辑整合到reducer这个函数中

import React, { useReducer } from "react";
function Counter(){const initState = {count: 0 };function reducer(state, action){switch(action.type){case 'increment':return { count: state.count + 1};case 'decrement':return {count: state.count - 1};default:return{ count: state};}}const [state,dispatch] = useReducer(reducer, initState);return(<div><button onClick={() => dispatch({ type:'decrement'})}>减</button><span>{state.count}</span><button onClick={() => dispatch({ type:'increment'})}>加</button></div>)}export default Counter;

运行效果图：

五、useMemo的使用方法-对数据的记忆，具有缓存功能，类似于Vue的计算属性

useMemo 接收2个参数，第1个参数为执行运算的函数，第2个参数为要监控的状态。

import React, {  useMemo } from "react";
function Counter(){const [count, setCount] = useState(0);const value = useMemo(function(){return count * 2;},[count]);//数组中的元素就是useMemo监控的状态return (<div><h3>{count}</h3><h3>{value}</h3><button onClick={() => setCount(count + 1)}>按钮</button></div>)}export default Counter;

运行效果图：

六、useRef的使用方法-获取组件中的 dom 对象

import React, { useRef  } from "react"; 
function App(){const refObj = useRef();console.log(refObj);function getRef(){console.log(refObj);     }return(<div><div ref={refObj}>hello</div><button onClick={getRef}>按钮</button></div>);}
export default App;

运行效果图：

七、useCallback的使用方法-允许多次渲染中缓存数据，返回一个memoized回调函数,对函数的记忆

有2个函数，第一个参数是要缓存的函数，第二个参数是一个数组（响应值变化时更新函数）

import React, { useCallback, memo   } from "react";function App(){const[count, setCount] = useState(1);const fn = useCallback(function (){return count;},[count]);return(<div>{count}<button onClick={() => setCount(count + 1)}>增加</button><Heads fn={fn}></Heads></div>);}const Heads = memo(function(props){return <button onClick={() =>console.log(`我被渲染了${props.fn()}次`)}>按钮</button>});
export default App;

运行效果图：

八、useImperativeHandle和forwardRef的使用方法

useImperativeHandle-自定义由 ref 暴露出来的程序、数据或地址表等的入口地址，可应用于父组件访问子组件的场景。
forwardRef-允许组件使用 ref 将一个 DOM 节点暴露给父组件

import React, {useRef,useImperativeHandle, forwardRef   } from "react"; 
function App(){const CounterRef = useRef();function click(){const { count, setCount } = CounterRef.current || {};setCount(count + 1);}return(<><Counter ref={CounterRef}></Counter><button onClick={click}>按钮</button></>);}const Counter = forwardRef((props,ref) =>{const [count, setCount] = useState(0);useImperativeHandle(ref,() => ({ count, setCount }), [count]);return<>{count}</>});export default App;

运行效果图：