ReactHook RefHook

(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;