ReactHooks
文章平均质量分 58
youhebuke225
这个作者很懒,什么都没留下…
展开
-
ReactHooks之useCallback
还记得我们们在讲父子组件传值的时候用到了useMemo函数吗,useCallback的用法和useMemo是相同的,只不过是useCallback缓存了函数https://blog.csdn.net/leelxp/article/details/107822103https://blog.csdn.net/weixin_45389051/article/details/107677723使用场景父组件向子组件传值的时候,父组件给子组件传递了一个函数如果不进行优化,那么每次父组件进行刷新的时候.原创 2022-03-30 09:30:09 · 612 阅读 · 0 评论 -
ReactHooks之自定义Hook
文章目录语法一般我们使用useCallback来自定义一个hook ,官网语法一般名称以use开后其内部可以调用其他的hooks原创 2022-03-28 09:07:35 · 280 阅读 · 0 评论 -
ReactHooks之获取DOM
文章目录代码效果一般使用useRef获取相关DOM,官网代码import React, {useRef } from "react";function App() { const inputEle = useRef(null) const handleClick = () => { console.log(inputEle); console.log(inputEle.current.value) } return ( <>原创 2022-03-26 21:38:02 · 2837 阅读 · 0 评论 -
ReactHooks之使用useReducer代替redux
文章目录组件第一个组件第二个组件父组件效果传值redux用于在组件之间传递数据,组件之间共享数据那么使用useReducer我们同样可以实现相应的功能我们一般使用useContext和useReducer来实现redux的功能组件第一个组件function Colors() { return ( <> <div style={{color:"blue"}}>字体的颜色为蓝色</div> </&g原创 2022-03-25 09:27:42 · 751 阅读 · 0 评论 -
ReactHooks之useReducer
语法官网代码import React, { useReducer } from "react";function App() { const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "decrem原创 2022-03-24 09:00:40 · 159 阅读 · 0 评论 -
ReactHooks之父子组件传值优化
import React, { useState, createContext, useContext } from "react";function ChildComponent1({num,children}) { function changeNum1(){ console.log(`ChildComponent1的数值为${num}`); return `Num1的数值为${num}` } const actionNum1 = changeNum1() retur原创 2022-03-23 11:20:22 · 2227 阅读 · 0 评论 -
ReachHooks之父子组件传值
一般我们会使用useContext和createContext来进行父子组件的传值 官网父组件我们使用计数器作为父组件function App() { const [count, setCount] = useState(0); return ( <> <div>次数:{count}</div> <button onClick={() => {setCount(count + 1);}}>增加次数<.原创 2022-03-20 14:34:28 · 577 阅读 · 0 评论