ReactHook RefHook 短命女 2021-07-24 21:49 335阅读 0赞 (1)除了可以进行ref操作以外,还能进行数据存储的操作,即相当于在函数式组件中拥有了this (2)ref的改变不会引起组件的重新渲染 1、引入 import React, { Component,useRef } from 'react'; 2、使用ref const xx=useRef(任意内容); 在标签上: ref={xx} 3、操作ref xx.current.dom操作 4、若使用ref容器存储数据,即当作this来使用 const xx=useRef(初始数据); 改变数据:xx.current=数据; 获取数据:xx.current 代码示例: import React, { Component,useState,useEffect,useRef } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { state={ count:1 } updateCount=()=>{ this.setState({ count:this.state.count+1}) } render() { return ( <div className="App"> <button onClick={ this.updateCount}>更新</button> <Example></Example> </div> ); } } function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState({ data:1,msg:'好后'}); const [name,setName]=useState('jeff'); console.log(name); useEffect(()=>{ let timer=setInterval(function(){ setCount({ data:count.data+1}); document.title=count.data; },1000) return ()=>{ clearInterval(timer); } },[]) const inputEL=useRef('输入框'); return ( <div> { count.data} { name} <input type="text" ref={ inputEL}/> <button onClick={ ()=>{ setCount({ data:count.data+1});}}>设置state</button> <button onClick={ ()=>{ setName((name)=>{ return 1})}}>设置effect</button> <button onClick={ ()=>{ console.log(inputEL.current.value='hh')}}>设置ref</button> </div> ); } export default App;
还没有评论,来说两句吧...