React Hooks的使用

一个简单的例子 

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

const App = (props) => {
    let [ num, setDate ] = useState(0)
    return (
        <div>
            <button onClick={() => {setDate(++num)}}> 增加数量{num}</button>
        </div>
    )
}
export default App

点击button调用定义的setDate函数，传递一个值，就能改变num的值，并且使得组件重新渲染，试图也会跟着改变。

增加useEffect的使用

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

const App = (props) => {
    let [ num, setDate ] = useState(0)
    useEffect(() => {
        console.log('component')
    })
    return (
        <div>
            <button onClick={() => {setDate(++num)}}> 增加数量{num}</button>
        </div>
    )
}
export default App

刷新页面会发现打印了一次，这里相当于componentDidMount，点击按钮，每次点击都会打印，说明这个函数// Similar to componentDidUpdate。

给它传递第二个参数空数组

  useEffect(() => {
        console.log('component')
    },[])

发现只有第一次加载的时候会打印，这时相当于 componentDidMount函数

增加状态

不传递第二个参数的情况下，页面加载执行一次（componentDidMount），每个按钮点击都会触发副作用函数，相当于componentDidUpdate

 

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

const App = (props) => {
    let [ num, setDate ] = useState(0)
    let [ name, changeNmme ] = useState('麦乐')
    useEffect(() => {
        console.log('component')
    })
    return (
        <div>
            <button onClick={() => {setDate(++num)}}> 增加数量{num}</button>
            <button onClick={() => {changeNmme('maile')}}> 增加数量{name}</button>
        </div>
    )
}
export default App

数组中加入了name，加载时调用一次（componentDidMount），，然后就只有当name改变时才会调用副作用函数。这就相当于componentShouldUpdate;

  useEffect(() => {
        console.log('component')
    },[name])

如果在一个函数中，同时该变两个状态，副作用函数只会执行一次。

import React, { useEffect, useState } from 'react'
 
const App = (props: any) => {
    let [num, setDate] = useState(0)
    let [name, changeNmme] = useState('麦乐')
    function handleClick() { 
        setDate(++num);
        changeNmme('maile')
    }
    useEffect(() => {
        console.log('component')
    })
    return (
        <div>
            <button onClick={handleClick}> 增加数量{num}</button>
            <button > 增加数量{name}</button>
        </div>
    )
}
export default App

 

有时我们还需要用到componentWillUnMound周期函数,用hooks可以这样处理

 useEffect(() => {
        console.log('component')
        return () => {
            console.log('status clear')
        }
    },[name])

返回一个函数，就会在组件销毁的时候调用返回的函数，可以在这里进行状态的清理。

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。