Hooks的常用Api

Ref Hook

• Ref Hook可以在函数组件中存储/查找组件内的标签或其他数据
• 语法：const refContainer = useRef()
• 获取值 refContainer .current.value
• 作用：保存标签对象，功能与React.creatRef()一样

Effect Hook

1. Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

2. React中副作用操作:

(1). 发ajax请求数据获取 
(2). 设置订阅/启动定时器 
(3). 手动更改真实DOM

3. 语法和说明

useEffect(()=>{
  //在此可以执行任何带副作用操作
  return()=>{
    // 在组件卸载前执行
  }
},[stateVlaue])  //如果指定的是[],回调函数只会在第一次render()后执行

4. 可以把 useEffect Hook 看做如下三个函数的组合

componentDidMount()
componentDidUpdate()
conponentWillUnmount()

State Hook

• 作用： State Hook让函数组件也可以有state状态，并进行状态数据的读写操作
• 语法：const [xxx, setXxx] = React.useState(initValue)
• useState()说明：
  参数：第一次初始值指定的值在内部作缓存
  返回值：包含2个元素的数组，第一个为内部当前状态值，第2个为更新状态值的函数
• setXxx()2种写法：
  setXxx(newValue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
  setXxx(vlaue=>newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值
• 【补】setXxx列子 ——注意复合数据类型的引用，引用未更新，不会渲染。
  const [num, setNum] = useState({a:1})
setNum({ ...num, ...{arr:[4,5,6]}}) 扩展运算符修改值
  setNum(Object.assign({},num,{arr:[3,4,5]}))Object.assign()

示例

import React,{Fragment} from 'react';
import ReactDom from 'react-dom';

//Fragment问答ing碎片 只有一个key属性
function Demo() {
  console.log('我执行了')
  const [count, setCount] = React.useState(0);

  const myRef = React.useRef()

  // React.useEffect(() => {
  //   // 数组中不写东西就相当于DidMount
  //   let time = setInterval(() => {
  //     setCount(count => count + 1)
  //   }, 1000)
  //   return () => {
  //     // return里相当于WillUnmount
  //   clearInterval(time)
  //   }
  // },[])
  
  function add(){
    setCount(count + 1)
    // setCount(count=>count+1)
  }

  function show() {
    alert(myRef.current.value)
  }

  function unMount() {
    ReactDom.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      <input type="text" ref={myRef} /><button onClick={show}>提示</button>
      <br />
      <button onClick={add}>加一</button>{count}
      <button onClick={unMount}>卸载组件</button>
      <hr />
    </div>
  )
}

export default Demo