useState

state Hook 讓函數(shù)組件也可以有state狀態(tài),并進行狀態(tài)數(shù)據(jù)的讀寫操作

import React from 'react'

function Demo () {
  const [count, setCount] = React.useState(0)  // 調(diào)用會返回一個數(shù)組 倆個元素,1是狀態(tài) 2是用于更新狀態(tài)的方法.傳入initValue 初始值
  function add() {
    setCount(count + 1)
  }
  return (
    <div>
      <h2>當前求和為:{count} </h2>
       <button onClick={add}>點我</button>
    </div>
  ) 
}

export default Demo

useEffect

effectHook 可以讓你在函數(shù)組件中執(zhí)行副作用操作(用于操作類組件中的生命周期鉤子)
React中的副作用操作(聲明周期都做什么):
發(fā)送ajax請求
訂閱消息/ 啟動定時器
手動操作真實dom

可以吧useEffect Hook看下如下三個函數(shù)的組合
compontDidMount()
compontDidUpdate()
compontWillUnMount()

 React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    // 相當于componentDidMount  可以掛載定時器
    return () => {
      clearInterval(timer)
      // 相當于compontWillUnMount
    }
  }, []) // 如果沒有穿第二個參數(shù) 相當于監(jiān)聽所有人(compontDidUpdate),有改變有調(diào)用 空數(shù)組是誰也不堅持 [count] 監(jiān)聽count   
  // 參數(shù)1返回的函數(shù)相當于compontWillUnMount  可以卸載定時器 

useFed

React.useRef

const myRef = React.useRef()

function show () {
    alert(myRef.current.value)
}
<input type="text"  ref={myRef} />

<button onClick={show}></button>

Fragment 空標簽會被react解析丟掉