React hooks

React hooks

React-hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。
参考：https://reactjs.org/docs/hooks-intro.html
React Hooks 优势：

• 简化组件逻辑
• 复用状态逻辑
• 无需使用类组件编写

常用 hook：

• useState
  const [state, setState] = useState(initialState);
• useEffect
  类组件 componentDidMount、componentDidUpdate 和 componentWillUnmount
  需要清除的副作用
• useRef

注：UseState useEffect useRef 三个都需要从react中引入。

UseState的使用:

import React,{useState} from 'react'
在函数组件内使用，定义数据
/*
  let[状态的值，修改状态的方法]=useState(状态的初始值)
*/

let [data,setName]=useState({name:'浩克',age:18})
 let [show,setShow]=useState(true)
往子组件传数据
<Child data={data}></Child>
点击改变数据
<button onClick={()=>{
   setName({
      name:'疯狂浩克',
     age:data.age
   })
}}>点击变身</button>

useEffect的使用:

import React,{useState,useEffect} from 'react'
三种事件状态在一块的写法 中括号为触发函数的值
第一次加载会触发挂载和更新，然后改变数据三种状态都会触发(副作用)
// useEffect(()=>{
    //     console.log('挂载 更新')
    //     return()=>{
    //         console.log('卸载')
    //     }
// },[age])
三种事件状态分开写 
挂载阶段 页面初次渲染触发
useEffect(()=>{
        console.log('挂载')
},[])
卸载 点击卸载后触发
useEffect(()=>{
   return()=>{
         console.log('卸载')
        }
},[])
更新 数据发生改变时触发
useEffect(()=>{
      console.log('更新')
},[age])

useRef的使用:

import React,{useState,useEffect,useRef} from 'react'
在函数内定义
let ageP=useRef()
模板中使用ageP
<h2 ref={ageP}>age:{age}</h2>
挂载中使用ageP
useEffect(()=>{
        console.log(ageP)
 })

Hook 使用规则

• 只在最顶层使用 Hook
• 只在 React 函数中调用 Hook
  React 函数组件中
  React Hook 中 - 我自己定义 hook 时，可以调用别的hook
• 所有的 hook 必须 以 use