博客
关于我
useEffect补充与自定义hooks
阅读量:527 次
发布时间:2019-03-08

本文共 1818 字,大约阅读时间需要 6 分钟。

useEffect

需求:通过useEffect获取到监听值的旧值与新值

  1. 准备一组数据可以被监听到
import React,{   useState} from 'react';		function Child(props){   		let [txt,setTxt] = useState("1");	    	   return {   	                setTxt(target.value)	            }}	        />	}		export default Child
  1. 通过useRef实现绑定
import React,{   useState,useRef} from 'react';function Child(props){       let [txt,setTxt] = useState("1");    let txtRef = useRef(txt);    useEffect(()=>{           console.log(txtRef.current,txt);        txtRef.current = txt;    },[txt]);    return {                   setTxt(target.value)            }}        />}export default Child
  1. 通过useEffect实现监听
import React,{   useState,useEffect,useRef} from 'react';function Child(props){   	let [txt,setTxt] = useState("1");    let txtRef = useRef(txt);        useEffect(()=>{           console.log(txtRef.current,txt);    },[txt]);    return {                   setTxt(target.value)            }}        />}export default Child

浏览器反馈

在这里插入图片描述
我们这个时候已经可以获取到值了,但是每次我们修改完txt,也就是我们的新值出现后,我们的txtRef.current也就是老值是不会发生改变的
浏览器反馈
在这里插入图片描述
4. 所以我们还需要最后一步,将新值输出后,存储在老值内,已达成下一次输出时老值是上一个新值新值是修改后的值

...useEffect(()=>{   	console.log(txtRef.current,txt);	txtRef.current = txt;},[txt]);...

浏览器反馈

在这里插入图片描述

自定义hooks

Hooks使用规则

  1. 只在顶层调⽤Hooks Hooks的调⽤,尽量只在顶层作⽤域进行调用不要在循环,条件或者是嵌套函数中调⽤Hook,否则可能会⽆ ,确保每次组件渲染时都以相同的顺序调⽤Hook。
  2. 只在函数组件调⽤Hooks,React Hooks目前只支持函数组件,所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
  3. React Hooks的应用场景在函数组件,自定义hooks

在自定义Hooks中还有一条规则,就是定义时,名字必须以use开头

案例

//自定义hooks组件import React,{   useState} from 'react';function useTitle(title){       return document.title = title}export {   useTitle};// 显示页面import React,{   useState} from 'react';import {   useTitle} from './hooks'function App(){     let [tit,setTit] = useState('App');    useTitle(tit)  return {           setTit(target.value)        target.value = ''      }}    />}export default App;

转载地址:http://hlwiz.baihongyu.com/

你可能感兴趣的文章
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时,offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复(update,delete忘加where条件)
查看>>
MySQL 调优/优化的 101 个建议!
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
mysql 锁机制 mvcc_Mysql性能优化-事务、锁和MVCC
查看>>
MySQL 错误
查看>>
mysql 随机数 rand使用
查看>>
MySQL 面试题汇总
查看>>
MySQL 面试,必须掌握的 8 大核心点
查看>>
MySQL 高可用性之keepalived+mysql双主
查看>>
MySQL 高性能优化规范建议
查看>>
mysql 默认事务隔离级别下锁分析
查看>>