React知识-----③

五、函数式组件

函数式组件也叫hooks（钩子函数）

hook创建快捷键：rfc

import React from 'react'

export default function Hooks() {
  return (
    <div>Hooks</div>
  )
}

在React16.8版本以前，函数式组件是没有状态的，功能有限，当useState推出以后，hooks开始出现在人们视线里。

----- useState -----

跟类组件不同，hooks一般通过useState这个钩子函数对状态进行管理

import React from 'react'
import { useState } from 'react'

export default function Hooks() {
    //第一个参数是状态名，第二个是修改状态的方法名
    const[number,setnumber] = useState(0)  
    
    var add = ()=>{
        setnumber(number+1)
    }
    return (
    <div>
        <div>{number}</div>
        <button onClick={()=>add()}>+1</button>
    </div>
  )
}

----- useEffect -----

useEffect一般是用来写事件处理的函数，组件初始化渲染后会自动调用一次

import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

export default function Hooks() {
    const[number,setnumber] = useState(0)  
    
    var add = ()=>{
        setnumber(number+1)
    }

    useEffect(()=>{
       console.log('触发了useEffect')
    },[number])

    return (
    <div>
        <div>{number}</div>
        <button onClick={()=>add()}>+1</button>
    </div>
  )
}

可以看到useEffect里有两个参数，第一个就是执行的方法体，第二个参数规定了当某个（或某些）状态改变后，会再次执行这个useEffect函数。这里每当add函数触发后，number+1，自然useEffect就会触发一次
如果不传递第二个参数（不是空数组），那么每次更新都会调用
如果传递空数组，那么只有初始化和销毁时候才会调用

import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

export default function Hooks() {
    const[number,setnumber] = useState(0)  
    const[age,setage] = useState(0)
    
    var add = ()=>{
        setnumber(number+1)
    }

    useEffect(()=>{
       console.log('触发了useEffect1')

       return ()=>{
        console.log('销毁了1')
       }
    },[number])

    useEffect(()=>{
        console.log('触发了useEffect2')
 
        return ()=>{
         console.log('销毁了2')
        }
     },[age])

    return (
    <div>
        <div>{number}</div>
        <button onClick={()=>add()}>+1</button>
    </div>
  )
}

还可以写一个return 调用时机是当组件销毁时，useEffect每次调用前都会先销毁自己再创建一个
这里第二个useEffect就只会执行一次，每次执行add函数，都会先打印“销毁了1”，在打印“触发了useEffect1”
同时useEffect可以使用多次