15 - react-hooks

useState

state Hook 让函数组件也可以有state状态,并进行状态数据的读写操作

import React from 'react'

function Demo () {
  const [count, setCount] = React.useState(0)  // 调用会返回一个数组 俩个元素,1是状态 2是用于更新状态的方法.传入initValue 初始值
  function add() {
    setCount(count + 1)
  }
  return (
    <div>
      <h2>当前求和为:{count} </h2>
       <button onClick={add}>点我</button>
    </div>
  ) 
}

export default Demo

useEffect

effectHook 可以让你在函数组件中执行副作用操作(用于操作类组件中的生命周期钩子)
React中的副作用操作(声明周期都做什么):
发送ajax请求
订阅消息/ 启动定时器
手动操作真实dom

可以吧useEffect Hook看下如下三个函数的组合
compontDidMount()
compontDidUpdate()
compontWillUnMount()

 React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    // 相当于componentDidMount  可以挂载定时器
    return () => {
      clearInterval(timer)
      // 相当于compontWillUnMount
    }
  }, []) // 如果没有穿第二个参数 相当于监听所有人(compontDidUpdate),有改变有调用 空数组是谁也不坚持 [count] 监听count   
  // 参数1返回的函数相当于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解析丢掉