随笔分类 - hooks
摘要：import React ,{useReducer}from 'react'; import './App.css'; const App =() =>{ const reduce =(state,action)=>{ const actionFn = { add:function(){ retur
阅读全文
摘要：自定义hook的步骤 自定义hook的步骤 1.引入react和自己需要的hook 2.创建自己的hook函数 3.返回一个数组,数组中第一个内容是数据,第二是修改数据的函数 4.将自己定义的hook暴露出去 5.在自己的业务组件中引入并使用 通过自定义hook 模拟数据接口请求功能 utils >
阅读全文
摘要：react中如何使用useReducer？ import React,{useReducer} from 'react'; // redux必须的内容 // store reducer /* useReducer使用？ 1.创建 数据仓库store 和 管理者reducer 2.通过useReduc
阅读全文
摘要：react中useContext的使用 import React,{useState,createContext,useContext} from 'react'; /* 1.需要引入createContext,useContext 2.通过createContext来创建句柄 3.Context.
阅读全文
摘要：react 中useRef的作用 import React,{useEffect, useState,useRef} from "react" /* 1.保存一个值,在整个生命周期中维持不变 2.重新赋值ref.current不会触发重新渲染 */ export default function U
阅读全文
摘要：react中useCallback使用案例 import React,{useState,useCallback,useEffect} from "react" const set = new Set(); export default function UseCallback(){ // 返回一个
阅读全文
摘要：react中useMemo使用案例二 import React,{useState,useMemo} from "react" export default function UseMemo(){ // 返回一个数组,第一个值是状态,第二个是改变状态的函数 const [num, setNum] =
阅读全文
摘要：react中useMemo使用结合案例演示 import React,{useState,useMemo} from 'react' const ChildComp = ({name,children}) =>{ function changeXiaohong(_name){ console.log
阅读全文
摘要：import React ,{useState,useCallback,memo} from 'react' const Child = memo((props) =>{ console.log('child run ...'); return( <> <h1>hello</h1> <button
阅读全文
摘要：import React,{useState,useCallback} from "react" const Son = React.memo( ({a,c}) =>{ console.log('son 重新渲染'); return ( <div> a:{a} <button onClick={c}
阅读全文
摘要：Example4.jsx import React, { useState,createContext,useContext} from 'react' const CountContext = createContext(); function Counter(){ let count = use
阅读全文
浙公网安备 33010602011771号