初识useState、useEffect、useRef

useState

React.useState 让函数组件也可以有state状态，并进行状态数据的读写操作
React.useState(0) 返回一个数组，里面有两个属性 第一个是状态初始值 第二个是改变初始值的方法
使用：

//  数组的解构赋值按照顺序就行  不用像对象解构赋值那样一定要名字一样
  const [count,setCount] = React.useState(0)
  
  const [name,cahngeName] = React.useState('tom')

使用第二个参数(回调函数)

function changName(){
    cahngeName((name)=> name='jack') 
  }

dom层调用

<h2 className='title'>当前名字为：{name}</h2>
      <button onClick={changName}>换名</button>

useEffect

React.useEffect 执行副作用操作，用于模拟类组件的生命周期钩子
第一个参数是个回调函数。
第二个参数不写。表示监测所有的状态，无论哪个状态更新，第一个参数回调都会再执行的。
第二个参数写空数组。表示所有状态都不监测。第一个参数函数只执行1次(即组件挂载完毕后执行1次)。
第二个参数写有值的数组。表示第一个参数回调执行 1+n 次，1表示组件挂载完毕，n表示数组里要监测的状态更新时第一个参数回调又要执行次数

如果第一个参数函数return一个函数，那么返回的这个函数就是在组件销毁前执行。执行时机相当于类组件的componentWillUnmount生命周期钩子
一个具有注脚的文本。
可以把 useEffect Hook 看做如下 三个生命周期钩子的组合
componentDidMount() 组件挂载完毕
componentDidUpdate() 状态更新后
componentWillUnmount() 组件将要销毁

 React.useEffect(()=>{ 
    // 在此可以执行任何带副作用的操作(比如数据交互，启动定时器，手动更改真实dom)
    let timer = setInterval(()=>{
      setCount((count)=>{return count+1})
    },2000)

    return ()=>{// return 的函数在组件卸载前执行
      // 在此做一些收尾工作,比如清除定时器/取消订阅
      clearInterval(timer)
    }
  },[])

useRef

React.useRef() 调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器只能存储一个节点

作用：保存标签对象节点，功能与React.createRef一样

const myref = React.useRef()
function show(){
    console.log(myref.current.value);
  }```
return (
    
      <>
      <input type="text" ref={myref}/>
      <button onClick={destroy}>卸载组件</button>
      <button onClick={show}>提示input的ref信息</button>
      </>
  )