React hooks是什么？

one_day
295 阅读3分钟

介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是

类组件

，一种是**

纯函数组件

，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。**。
但是我们知道，在以往开发中

类组件

和

纯函数组件

的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条

  • 纯函数组件没有状态

  • 纯函数组件没有生命周期

  • 纯函数组件没有this

  • 只能是纯函数

这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，你的代码会显得很重，并且每创建一个类组件，都要去继承一个React实例，至于Redux,更不用多说，很久之前Redux的作者就说过，“能用React解决的问题就不用Redux”,等等一系列的话。关于React类组件redux的作者又有话说

  • 大型组件很难拆分和重构，也很难测试。
  • 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
  • 组件类引入了复杂的编程模式，比如 render props 和高阶组件。

下面我们用类组件做一个简单的计数器

import React from 'react'
class AddCount extends React.PureComponent {
  constructor(props){
    super(props)
    this.state={
      count: 0
    }
  }
  addcount = () => {
    let newCount = this.state.count
    this.setState({
      count: newCount +=1
  })
  }
  render(){
    return (
      <>
        <p>{this.state.count}</p>
        <button onClick={this.addcount}>count++</button>
      </>
    )
  }
}
export default AddCount

可以看出来，上面的代码确实很重。
为了解决这种，

类组件功能齐全却很重，纯函数很轻便却有上文几点重大限制

，React团队设计了React Hooks
**

React Hooks就是加强版的函数组件，我们可以完全不使用 class，就能写出一个全功能的组件

**

什么是Hooks?

'Hooks'的单词意思为“钩子”。
**React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。**而React Hooks 就是我们所说的“钩子”。
那么Hooks要怎么用呢？“你需要写什么功能，就用什么钩子”。对于常见的功能，React为我们提供了一些常用的钩子，当然有特殊需要，我们也可以写自己的钩子。下面是React为我们提供的默认的四种最常用钩子

  • useState()
  • userContext()
  • userReducer()
  • useEffect()

不同的钩子为函数引入不同的外部功能，我们发现上面四种钩子都带有use前缀，React约定，钩子

一律使用

use前缀命名。所以，你自己定义的钩子都要命名为useXXX。

React Hooks的用法

下面介绍四种默认钩子的用法

一、userState():状态钩子

我们知道，纯函数组件没有状态，useState()用于为函数组件引入状态。
下面我们使用Hooks重写上面的计数器。

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } 
  return (
    <>
      <p>{count}</p>
      <button onClick={addcount}>count++</button>
    </>
  )
}
export default AddCount

通过上面的代码，我们实现了一个功能完全一样的计数器，代码看起来更加的轻便简洁，没有了继承，没有了渲染逻辑，没有了生命周期等。这就是hooks存在的意义。
在useState()中，它接受状态的初始值作为参数，即上例中计数的初始值，它返回一个数组，其中数组第一项为一个变量，指向状态的当前值。类似this.state,第二项是一个函数，用来更新状态,类似setState。该函数的命名，我们约定为set前缀加状态的变量名。

作者：Nosaj
链接：www.jianshu.com/p/d600f749b…
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。r

avatar
文章
阅读
粉丝