React Hooks

image.png

set state using hooks:
不想state那样要给一个对象，直接使用hooks的useState来进行。

Change state using hooks:使用第二个参数

image.png

当你有多个值的时候，比如count，answer，分开写，分写去改变state

image.png

useEffect（）类似于componentDidMount,这里实现了每次数字增加改变颜色：
useEffect的第二个参数是条件限制，代码解读：

import React, {useState, useEffect} from "react"
import randomcolor from "randomcolor"

function App() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState("")
    
    function increment() {
        setCount(prevCount => prevCount + 1)
    }
    
    function decrement() {
        setCount(prevCount => prevCount - 1)
    }
    
    useEffect(() => {
        setColor(randomcolor())
    }, [count])   //当count发生改变时，执行randomcolor进行颜色改变。每次render完都会执行useEffect，如果不加第二个参数进行限制，则会无限制set color
    
    return (
        <div>
            <h1 style={{color: color}}>{count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    )
}

export default App