useEffect补充与自定义hooks

最新推荐文章于 2024-04-25 06:30:00 发布

原创最新推荐文章于 2024-04-25 06:30:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文详细介绍了如何在React中使用useEffect Hook来监听状态变化，并获取旧值与新值，同时展示了如何利用useRef实现值的持久化。此外，文章还提供了自定义Hook的示例，展示如何创建并使用自定义的useTitle Hook。

useEffect

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

准备一组数据可以被监听到

	import React,{useState} from 'react';
	
	function Child(props){
		let [txt,setTxt] = useState("1");
	    
	   return <input 
	            type="text" 
	            value={txt} 
	            onChange={({target})=>{
	                setTxt(target.value)
	            }}
	        />
	}
	
	export default Child

通过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 <input 
            type="text" 
            value={txt} 
            onChange={({target})=>{
                setTxt(target.value)
            }}
        />
}

export default Child

通过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 <input 
            type="text" 
            value={txt} 
            onChange={({target})=>{
                setTxt(target.value)
            }}
        />
}

export default Child

浏览器反馈
在这里插入图片描述
我们这个时候已经可以获取到值了，但是每次我们修改完txt，也就是我们的新值出现后，我们的txtRef.current也就是老值是不会发生改变的
浏览器反馈

4. 所以我们还需要最后一步，将新值输出后，存储在老值内，已达成下一次输出时老值是上一个新值，新值是修改后的值

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

浏览器反馈
在这里插入图片描述

自定义hooks

Hooks使用规则

只在顶层调⽤Hooks Hooks的调⽤，尽量只在顶层作⽤域进行调用不要在循环，条件或者是嵌套函数中调⽤Hook，否则可能会⽆，确保每次组件渲染时都以相同的顺序调⽤Hook。
只在函数组件调⽤Hooks，React Hooks目前只支持函数组件，所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
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 <input 
      type="text"
      placeholder="输入一个值决定你title是什么"
      onBlur={({target})=>{
        setTit(target.value)
        target.value = ''
      }}
    />
}

export default App;