react hooks学习

1. useState
useState让函数组件可以使用state
?：

  function App(){
    const [ count, setCount ] = useState(0)
    return (
        <div>
            <div>次数：{count}</div>
            <button onClick={() => { setCount(count + 1) }}>点击增加</button>
        </div>
    )
  }

useState使用十分简单，传入的是state的默认值（支持传入函数，该函数只会执行一次，不会随着渲染多次执行），返回的是一个数组，第一位是state，第二位为操作函数用来修改state。
useState修改state，传入相同的值，不会触发渲染。
修改state时，如果需要上一轮该state的值的话，在修改时改为传入一个函数，函数的参数就是上一轮的state
?：

    setCount(count => count + 1)

2. useEffect
useEffect让我们可以在函数组件中处理副作用代码，比如发起ajax、处理事件、获取dom等，在类组件写在生命周期函数钩子中，比如componentDidMount、componentDidUpdate，componentWillUnmount中，现在useEffect就相当于这三个生命周期函数组合。
?在渲染完成后更改document.title：

    function App() {
        const [ count, setCount ] = useState(0)
        useEffect(() => {
            document.title = count
        })
        return (
            <div>
                <div>次数：{count}</div>
                <button onClick={() => { setCount(count + 1) }}>点击增加</button>
            </div>
        )
    }

useEffect会return一个函数，这个函数用于清除上一轮副作用遗留的状态。
useEffect只调用一次的话，相当于componentDidMount，return返回的函数相当于componentWillUnmount。
useEffect的第二个参数，有三种情况

• 不传，每次render后都会调用useEffect，相当于componentDidMount和componentDidUpdate
• 传空数组[]，只有首次渲染执行，相当于componentDidMount和componentWillUnmount
• 传state数组，只有当这些状态改变时，才会触发useEffect

看大神文章的学习笔记
文章原文：https://juejin.im/post/5d985d...