Reack hooks的使用
1. 前言
react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。
2. useState
useState类似于class组件的state功能,用于更新视图
import React, { Component, useState } from 'react';export default function Hello() {const [count, setCount] = useState(0); //设置默认值为0return <div>{count}<button onClick={()=>setCount(count + 1)}>增加</button></div>
}//useState还可以使用函数进行赋值const [count, setCount] = useState(()=>0); //设置默认值为0
3. useEffect
useEffect接受两个参数,第一个参数是要执行的回调函数,第二个参数是依赖的参数,如下面的例子里只有当count发生变化的时候才会打印count,当第二个参数为空数组的时候,组件在渲染完成后会执行一次,第二个参数不传递的时候每次渲染都会执行
export default function Hello() {const [count, setCount] = useState(() => 0); //设置默认值为0// useEffectuseEffect(() => {}, [count])return <div>{count}<button onClick={() => setCount(count + 1)}>增加</button></div>
}
带有返回值的useEffect用于清除执行过程中的副作用
useEffect(()=>{const timer = setInterval(() => {console.log(count);}, 1000);window.addEventListener('resize',handleResize);return function(){clearInterval(timer);window.removeEventListener('resize',handleResize);}}, [count])
如果每次执行useEffect都定义一个定时器,那定时器会越来越多,通过在返回函数中清除定时器取消这个副作用。useEffect返回函数的执行时机是下一次useEffect执行之前。
利用这一点可以实现防抖和节流函数
4. useLayoutEffect
dom渲染之前的useEffect: useLayoutEffect =》 dom渲染 =》useLayout
export default function Hello (props){const [count, setCount] = useState(0);useEffect(()=>{console.log('useEffect');},[count]);useLayoutEffect(()=>{console.log('useLayoutEffect');},[count])return <div>{count}<button onClick={()=> setCount(count+1)}>增加</button>;</div>
}
使用useEffect和useLayoutEffect去更新视图状态会产生不同的效果,useEffect会有一个状态到另一个状态的过程(闪动效果),useLayoutEffect直接渲染最终状态
5. useMemo
useMemo的作用就是缓存,减少代码的执行次数。
下面的代码点击按钮count状态发生变化,整个Hello函数体内的代码都会执行,每次点击按钮都会打印str的值
export default function Hello (props){const [count, setCount] = useState(0);const [str, setStr] = useState('hello hooks!');useEffect(()=>{console.log('useEffect');},[count]);console.log('str'); //每次渲染都会执行return <div>{count}{str}<button onClick={()=> setCount(count+1)}>增加</button></div>
}
使用useMemeo进行缓存,当str发生变化的时候再执行打印语句
useMemo(()=>{console.log(str);
},[str])
useMemo还可以用来缓存函数
export default function Hello (props){const [count, setCount] = useState(0);const [str, setStr] = useState('hello hooks!');useEffect(()=>{console.log('useEffect');},[count]);// 使用useMemo缓存函数const hanldeClick = useMemo(()=>{return function(){console.log(count);};},[count]);return <div>{count}{str}<button onClick={()=> setCount(count+1)}>增加</button><button onClick={hanldeClick}>测试</button></div>
}
6. useCallback
useCallback的功能是缓存函数,取的是useMemo的运行结果
const handleClick = useMemo(()=>{return function(){console.log(count);};},[count]);const handleClick = useCallback(()=>{console.log(count);},[count])
上面两个实现的功能是一样的,在平时的开发中要尽量使用useMemo去缓存函数
7. useRef
- 获取元素dom ref.current
- 缓存数据
使用useRef获取元素
export default function Hello(props) {const ref = useRef(null);useEffect(() => {console.log(ref.current); // <input id='input'>})return <div><input ref={ref} id="input" /></div>
}
使用useRef保存数据,当ref.current发生变化的时候视图不会重新渲染
export default function Hello(props) {const ref = useRef(null);useEffect(() => {ref.current = 'hello hooks!';});return <div><span> {ref.current}</span></div>
}
8. useReducer
useReducer用于更新复杂的state提升渲染性能,使用方法与redux类似。与redux的区别是redux管理的是全局的数据做数据共享,useReducer是useState的替代方案,只管理单个组件的状态。
onst reducer = (state, action) => {switch (action.name) {case 'increment': return { count: state.count + 1 };case 'decrement': return { count: state.count - 1 };default: return state;}
};const initState = { count: 0 };export default function Hello() {const [state, dispatch] = useReducer(reducer, initState)return <div><span> {state.count}</span><button onClick={() => dispatch({ name: 'increment' })}>增加</button><button onClick={() => dispatch({ name: 'decrement' })}>减少</button></div>
}
9. useContext
useContext用来解决props层层传递,嵌套很深的问题。
export default function Father() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return <div>{count}<button onClick={() => handleClick()}>增加</button><MyContext.Provider value={{ count }}><Children /></MyContext.Provider></div>
};function Children() {const context = useContext(MyContext);return <div>父组件的count: {context.count}</div>
};
10. memo
在calss组件中通过对比props,子组件接收的props发生变化的时候才进行更新渲染,在函数组件中没有识别props的能力,当父组件重新渲染的时候子组件也会重新渲染,在使用memo包裹后只有props发生变化的时候才会重新渲染。memo的功能类似于calss组件对pureComponent对props进行了浅比较。
export default function Father() {const [count, setCount] = useState(0);const [str, setStr] = useState('hello hooks!');return <div>{count}{str}<button onClick={() => setCount(count + 1)}>增加count</button><button onClick={() => setStr(str + 1)}>修改str</button><Children count={count} /></div>
};const Children = React.memo(function Children(props) {console.log('子组件渲染');return <div>子组件: {props.count}</div>
}
);
上面的例子中,count变化的时候子组件渲染更新,str变化的时候子组件不重新渲染。
Reack hooks的使用相关推荐
- reack Hooks
Hooks简单来说就是来解决函数式组件没有state和生命周期的问题 先引入 import { useState, useEffect,useNavigate,useLocation,useSearc ...
- 可能是基于 Hooks 和 Typescript 最好的状态管理工具
接上一篇:我理想中的状态管理工具 之前说,对于我个人来而言,理想的状态管理工具只需同时满足两个特点: 简单易用,并且适合中大型项目 完美地支持 Typescript 未能找到一个完美满足这两点的,所以 ...
- TNG-Hooks:有状态逻辑在标准函数中的重用和组合
TNG-Hooks软件库出现之后,JavaScript开发人员可通过有用的.频繁有状态的和有效逻辑来装饰常规独立函数,例如查询远程数据库.访问范围外的上下文数据等.钩子函数(Hook)有助于代码重用和 ...
- Svn 笔记—— Hooks
pre-commit 钩子功能: [root@Da hooks]# cat /application/svndata/sadoc/hooks/pre-commit #!/bin/bash #Check ...
- react hooks使用_为什么要使用React Hooks?
react hooks使用 The first thing you should do whenever you're about to learn something new is ask your ...
- react hooks使用_如何使用React和Hooks检测外部点击
react hooks使用 by Andrei Cacio 通过安德烈·卡西奥(Andrei Cacio) 如何使用React和Hooks检测外部点击 (How to detect an outsid ...
- react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...
- 优化自定义函数_10分钟教你手写8个常用的自定义hooks
前言 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性.本文是一篇以实战为主的文章,主要讲解实际项目中如何使用ho ...
- Subversion hooks脚本配置演示及排错
Subversion提供了强大的hooks脚本功能,主要用于控制commit操作前,后的执行动作,以及lock,unlock操作前,后的执行动作:默认在版本仓库下的hooks目录下存在着这些脚本的模板 ...
最新文章
- 做acm 需要学的算法
- python培训学费多少钱-培训python学费多少python学会得多少钱?
- HashMap,HashTable,ConcurrentHashMap面试总结!!!
- 大家好,我是区块链本人。今天,我要给你们介绍我的家族
- python爬取地图上的经纬度_Python调用百度地图API爬取经纬度
- ABAP 弹出框自建内容POPUP
- 深度访谈Amazon员工与HR:华裔因pip跳楼背后(图)
- Duilib初级控件扩展一例: 具有鼠标滚动消息的OptionUI
- python组件的react实现_【React源码解读】- 组件的实现
- Java基础学习总结(113)——异常最佳实践
- Linux命令应用大词典-第 15章 文件、目录权限和属性
- 作业一:建立博客、自我介绍、速读教材、学习进度总结(1)
- HTTP权威指南学习笔记:连接管理
- uwsgi 的启动、停止、重启
- 即时聊天系统(IM)发送文件语音视频的两种方式比较
- unreal engine各个版本网盘离线下载
- 计算机二级多少人优秀,计算机二级各科通过率是多少
- Wireshark抓取网络聊天
- laydate时间控件在谷歌浏览器中兼容性问题
- selenium+python设置爬虫代理IP