react hooks

一、react hooks的作用

react hooks 是react 16.8的功能，对函数型组件进行增强，让函数组件可以存储状态，可以拥有处理副作用的能力。让开发者在不使用类组件的情况下，实现相同的功能。

二、react hook要解决的问题

react hooks的产生是为了解决react 类组件的不足，react 类组件的不足主要表现在以下方面：

• 缺少逻辑复用机制：react 类组件中，为了实现逻辑复用机制，通常使用的是高阶组件和渲染属性，为了实现逻辑复用，增加了无实际渲染效果的组件，增加了组件层级，使整个组件显得很臃肿，同时增加了调试难度及组件运行时的效率。
• 类组件经常会变得很复杂并难以维护：将一组相干的业务逻辑拆分到了多个生命周期函数中，在一个生命周期函数中，会存在多个不相干的业务逻辑。
• 类成员函数不能不能保证this指向的正确性 

三、react hook的使用

react hooks是一些钩子函数，react通过这些钩子函数对函数型组件进行增强，并且不同的钩子函数提供了不同的功能。

3.1、useState()

作用：可以使一个函数型组件可以保存自己的状态，内部使用闭包实现。

使用细节：

1. 接收唯一的参数即状态初始值，初始值可以使任意js数据类型。
2. 返回值维数组.数组中存储状态和改变状态值的方法，方法名约定以set开头，再加上状态名。
3. useState()在同一个组件中可以被调用多次，用以存储不同的状态。
4. 参数还可以是一个函数，初始状态是函数返回值，函数只会被调用一次，适用于初始值是动态的情况。
5. 设置状态值方法的参数可以是一个值也可以是一个函数。
6. 设置状态值方法的方法本身是异步的。

import React, { useState } from 'react'

function App(props) {
  // const [count, setCount] = useState(0)
  const [count, setCount] = useState(() => {
     return props.count || 0  // 只会被调用一次
  })
  const [person, setPerson] = useState({name: 'zhangsan', age: 20})
  return (
    <div>
      <span>{count} {person.name} {person.age}</span>
      <button onClick={() => setCount(count &