React hooks(1)

1. 什么是hooks

A way to use state and other React features without writing a class.

React Hooks是React从v16.8引入的一种新的更简单更方便的编写组件的功能。hooks提供了一种可以不用写class而直接使用state和其他React特性的能力，而且自定义hooks可以将公共逻辑抽离，使之可以在多个组件之间共享。

2. hooks的由来

hooks主要是为了解决以下3个React问题

组件带状态变得难以复用
复杂逻辑不用跟随生命周期
解决难以理解的class

js中的this取值跟其他面向对象语言都不同，是在运行时决定的。为了解决这一痛点，才有了箭头函数的this绑定特性。另外何时使用class component 和 function component也是一件容易纠结的事，对于优化方面来说，class component在预编译和压缩方面也比普通函数困难得多，还容易出错。

3. 使用

state hook

import { useState } from 'react'

function Demo() {
  const [count, setCount] = useState(0)
  return (
      <div>
      <p>count: { count }</p>
          <button onClick={() => { setCount(count + 1) }}>点击</button>
    </div>
  )
}

useState只有一个参数，即count的初始值，可以是任意类型。如果count是对象，useState不会像setState自动合并原state，可以：

setState(preV => {
  return { ...preV, ...updateV }
  // Object.assign(preV, updateV)  
})

多个state变量只需要多次调用useState即可

...
function Demo2() {
 const [count, setCount] = useState(0)
 const [fruit, setFruit] = useState('apple')
 ...
}

Effect hook

我们希望组件在DOM挂载和更新后执行相同的操作，使用React Effect hooks写法：
```
import React, { useEffect } from 'react'

function Demo3() {
  const [count, setCount] = useState(0)
  
  useEffect(() => {
    document.title = `clicked ${count} times`
  })
}
```
传统class component写法：
```
import React from 'react'

class Demo3 extends React.Component{
  constrctor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  
  componentDidMount () {
    document.title = `clicked ${this.state.count} times`
  }
  compoenntDidUpdate () {
    document.title = `clicked ${this.state.count} times`
  }
  ...
}
```
传统class component，我们需要在两个生命周期中调用相同的函数，使用Effect特性React会保存传递的函数，并在DOM渲染后调用该函数。useEffect同时拥有componentDidMount,componentDidUpdate,componentWillUnmount三个生命周期的执行时机。但Effct并不会阻塞浏览的渲染，使应用看起来更加流畅。

有时候我们为了防止内存泄漏需要清除的Effct，class component中需要在componentDIdMount中注册并在componentWillUnmount中销毁，使用hooks只需要在useEffct中返回一个函数即可
```
function Demo4() {
  useEffct(() => {
    let timer = setInterval(() => {
      console.log(1)
    })
    return () => {
      clearInterval(timer)
    }
  })
}
```
当useEffct返回一个函数的时候，React会在下一次执行副作用之前调用一次清理函数。

组件挂载 —> 执行副作用 —>组件更新 —>执行清理函数—>执行副作用—>组件更新—>执行清理函数—>组件卸载

所以每次state更新我们都会重新渲染一次，如果state值没有改变的情况下（原来count是5改变后还是5），我们不想调用Effct，只需要在useEffct函数中传入第二个参数[count]即可。React会对前一次渲染的[5]和后一次渲染的[5]对比，数组内元素全部相等，React就会跳过这个Effct，同时实现了性能的优化。该参数为数组，可以传多个数组，一般会将Effct用到的props和state都传进去。清除函数同理。

如果useEffct传入的第二个参数是一个[]，等效于componentDidMount和componentWillUnmount

4. hooks规则

只能在React 函数式组件中调用Hook
只能在函数最外层调用Hook
只能用在函数最顶层
不能用在循环、条件判断语句，嵌套函数
ESLint插件eslint-plugin-react-hooks格式规范

...