React Hooks

Hooks

一、Hooks/Hook是什么？

Hooks本质上是将类式组件中的特征进行了封装，通过hooks在函数中调用，在函数内部生成自己的状态、生命周期等。

Hooks不能在类似组件中使用，因为类式组件有自己的生命周期。

Hooks是函数式组件。


Hook是react16.8新增的特征和语法，它可以让你钩入react的特性。

Hook是一个特殊的函数。

什么时候会用到Hook？

如果说你在编写函数组件，并且意识到需要用到state或者this等类式组件中的一些特性，以前的做法是将它转换为class，那么现在你就可以在函数组件中使用Hook。

三个常用的Hook：

(1)State Hook ——React.useState()

(2)Effect Hook ——React.useEffect()

(3)Ref Hook ——React.useRef()

二、使用

1.State Hook

（1）State Hook 让函数组件也可以有组件的State状态，并进行状态数据的读写操作。
（2）语法:
       const[xxx,setXxx] = React.useState(initValue)

（3）useState说明:
       参数：第一次初始化指定的值在内部做缓存。
       返回值：包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态值的函数。

（4）setXxx()的2中写法：
       setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
         setXxx(value => newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

代码如下（示例）：

import React from 'react';

function App(){

  const [count,setcount] = React.useState(0)
  console.log(count,setcount)
  //加的回调
  function add(){
  /*   setcount(count+1) */  //第一种写法
    setcount(count => count+1)
  }

  return (
    <div>
      <h2>当前求和为：{count}</h2>
  {/*     <h2>我的名字是：{name}</h2> */}
      <button onClick={add}>点我+1</button>
      {/* <button onClick={changeName}>点我改名</button> */}
    </div>
  )
} 
export default App

2.Effect Hook

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

(2)React中的副作用操作：
             发ajax请求数据获取
             设置订阅/启动定时器
             手动更改真实DOM

(3)语法和说明：

       useEffect(() => {
           //在此可以执行任何带副作用的操作
            Renturn() => { //在组件卸载前执行
               //在此做一些收尾工作，比如清楚定时器/取消订阅等
              }
       },[statevalue]) //如果指定的是[],回调函数只会在第一次render()后执行

(4)可以把useEffect Hook 看成如下三个函数的组合：

                        componentDidMount()

                        componentDidUpdata()

                        componentWillUnmount()

代码如下（示例）：

import React from 'react';
import ReactDom from 'react-dom'


function App(){

  const [count,setcount] = React.useState(0)

  React.useEffect(()=>{
    let timer = setInterval(() => {
      setcount(count => count+1)
    },1000)
    return ()=>{
      clearInterval(timer)
    }
  },[])

  function add(){
    ReactDom.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div id="root">
      <h2>当前求和为：{count}</h2>
      <button onClick={add}>点我卸载</button>
    </div>
  )
} 
export default App

3.Ref Hook

(1)Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其他数据。
(2)语法：const refContainer = useRef()
(3)作用：保存标签对象，功能与React.createRef()一样

代码如下（示例）：

import React from 'react';


function App(){

  const myRef = React.useRef()

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

  return (
    <div id="root">
      <input type="text" ref={myRef}></input>
      <button onClick={show}>点我提示数据</button>
    </div>
  )
} 
export default App

---