React Hook使用大全，新手入门看这篇够了！

一、useState

useState的出现使我们在函数组件中也能够使用类组件的state特性

useState接受一个参数，也就是定义state的初始值，然后会返回一个数组，这个数组存储了state的值和更改state的方法。通过数组解构的方式我们能够拿到它们，名称可以随便取，但实际中还是要符合规范。

下面是个简单的例子:

我们初始化一个状态value，点击按钮实现value加一的效果

import React, { useState } from 'react'
​
function App() {
  //const [state, setState] = useState(initState)
  const [value, setValue] = useState(0)
  return (
    <div>
      <h1>当前值：{value}</h1>
      <button onClick={() => setValue(value + 1)}>
        点击加一
      </button>
    </div>
  );
}
​
export default App;
复制代码

运行效果：页面会随着按钮的点击更新当前的值

需要注意的是:

1、 修改了数据但是页面没有更新,下面是一个例子

我们维护一个person，并定义了一个方法用来更改person的属性值，点击按钮却发现页面没有更新

import React, { useState } from 'react'
​
function App() {
  const [person, setPerson] = useState({name: '张三', age: 20})
  function updatePerson(name, age) {
    person.name = name
    person.age = age
    setPerson(person)
  }
  return (
    <div>
      <h1>我的名字是:{person.name}</h1>
      <button onClick={() => updatePerson('李四', 21)}>更新person</button>
    </div>
  );
}
​
export default App;
复制代码

这是因为对于对象类型的数据，React会进行浅比较，如果我们没有更改state的引用地址，只更改其内部属性值，React就认为我们没有更新这个state，解法办法就是重新赋值一个新对象。这和在类组件中使用React.PureComponent是一样的。

  function updatePerson(name, age) {
    // person.name = name
    // person.age = age
    // 使用展开运算符
    setPerson({...person, name, age})
  }
复制代码

这样就正常工作了!

像这样还有个典型的例子就是对数组的操作，这里就不演示了。

二、useEffect

通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。

useEffect接收两个参数，第一个参数是一个函数，每次渲染就会执行这个函数，第二个参数（非必须）是一个依赖数组，用来控制useEffect的执行，我们稍后会讲解。

先来看个简单的例子：

import React, { useEffect, useState } from 'react'
​
export default function App() {
  const [count, setCount] = useState(0)
  const [time, setTime] = useState(+new Date())
  useEffect(() => {
    console.log('组件更新了')
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击加一</button>
      <button onClick={() => setTime(+new Date())}>更新时间戳</button>
    </div>
  )
}
复制代码

我们使用两个按钮来触发组件更新，useEffect就会执行，控制台就会打印组件更新。

来看下效果：

可以看到只要组件渲染，就会触发useEffect的执行。

现在我们有一个小需求，就是只打印我们点击按钮触发组件更新的情况。

现在我们就要请出useEffect的第二个参数了，第二个参数是一个数组，用来存储依赖，只要当中的依赖发生了变化，React就会帮我们执行这个useEffect。所以，刚刚那个小需求就很简单了，我们只依赖于count，所以把它放进这个数组里就可以了！

代码：

import React, { useEffect, useState } from 'react'
​
export default function App() {
  const [count, setCount] = useState(0)
  const [time, setTime] = useState(+new Date())
  useEffect(() => {
    console.log('count触发组件更新了')
  }, [count])
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击加一</button>
      <button onClick={() => setTime(+new Date())}>更新时间戳</button>
    </div>
  )
}
复制代码

效果：

可以看到不论点击了多少次更新时间戳，控制台都不会打印组件更新

当然，如果数组里什么都不加，那么就只有组件初次渲染会触发useEffect的执行，通常我们会在这里进行页面的初次渲染，例如网络请求获取数据，这相当于类组件里面的componentDidMount。

看到这里有小伙伴会想到既然能模仿componentDidMount，那能模仿componentWillUnmount吗？

当然可以！

useEffect还可以返回一个函数，当组件卸载的时候，就会触发这个函数执行，跟componentWillUnmount一样，我们通常在这里做一些收尾工作，例如清除定时器。

好了effect这个hook差不多讲完了，主要的使用方法就是下面这串代码：

  useEffect(() => {
    //do something when component update
    return () => {
      //do something when component unmount
    }
  }, [])
复制代码