React Hooks

3,171 阅读4分钟

从React 16.8.0, React 添加了Hooks功能

对比之前的优点

之前组件的形式主要有两种,一种是我觉得比较常用的class形式的Component,另外一种是纯函数方式的函数式组件,这种一般我会在组件里面并不需要交互的情况下使用,就当做静态的组件来使用了,对于这两种方式的组件也存在一定的问题

  • class Component:
    • 当结构比较复杂的时候,比较难拆分,难拆分当然在组件的基础上做其他事情也比较麻烦
    • 组件之间数据的传递使用props,在组件层次比较深的情况下很难受
    • 有时候会出现在多个组件里面都出现重复的逻辑代码的情况,我好像遇到这种情况比较多的是在ComponentDidMount生命周期函数里面,有时候需要拿异步的数据或者其他的一些状态会在各个组件里面重复写。
  • function Compon
    • 这种方式的组件看起来很干净,只做组件渲染,当然也有自身的限制,因为是无状态组件,所以不能使用state或者其他的生命周期函数,但是在只需要做展示的时候,函数式组件相当友好啊

Hooks解决了什么

那自然就是解决上面两种方式带来的一些不够方便的地方

  • reuse stateful logic without changing compnent hierarchy

  • could split component based on what pieces are related

  • less class to use react features

    中文版

  • 更容易复用

  • 代码量少了

  • 更容易拆分组件

  • 函数式编程(这个算不算优点呢。。。。)

四种常用Hooks

一般hooks以use作为前缀进行命名,一般常用的4个hook为useState,useContext,useReducer,useEffect

useState

跟我们之前使用的state相关,还是用一开始学react的时候做的计数器为例子吧,

如果是使用class Component,大概是这样的吧

然后,如果用hook的useState,我们就可以

使用const [count, setCount] = useState(0) 定义名为count的state,setCount相当于setState,但是只给count自己用啦,然后再useState(0)添加初始值。

组件里面直接调用count变量或者setCount方法就好了

并且,就把函数式组件跟state结合在一起了~

useContext()

刚才的useState只能让我们在一个组件内部使用,如果需要两个或者多个组件都共享一个值的话,就可以使用useContext了

这里比如有两个Context组件,都需要name变量的值,那么就通过createContext方法先定义一个useContext叫做AppContext,可以直接在里面添加defaultValue,也可以在引用的时候再添加。

比如我们在App.js文件里面使用这一套组件

这里需要给AppContext提供Provider,这样数据才能传递下去~

UseReducer

跟以前的reducer一样,原理也是(state,action) => newState

这里也是一样的,可以const [state,dispatch] = useReducer(reducer, initialState)

还是用计数器举个栗子

假惺惺的添加一套action,根据action的type进行不同的dispatch,这里在点击Add的Button的时候进行dispatch

<button onClick={() => dispatch({ type: 'Add' })}>Add +</button>

这样子就好啦~

useEffect()

据说是副作用的钩子,一般在向服务器请求数据的时候可以用,也就相当于以前ComponentDidMount的时候去发请求。

基本用法:

useEffect( () => {

​ 在这里写异步请求

},[depencies])

这里的depencies是Effect的依赖项,数组里面的内容发生变化的时候,useEffect()就得执行了

如果depencies没有设置,那就在每次组件渲染的时候调用useEffect()

这里灭有例子!因为我还没用到!

等我用了再来补上

//TODO

Hook缺点

夸完hooks,那有什么缺点嘛,那当然还是有的

个人觉得有些情况下为了方便,会在全局放比较多的state,当然这个是不应该的,但是放了之后会感觉很污染

还看到一些说法是关于useEffect的,会造成状态不同步的问题,啥是状态不同步嘞,因为每一个函数都独立运行,每个函数又有自己的父级作用域

然后在处理比较复杂的逻辑的时候,就会遇到状态不同步的问题了

emmmm我还没理解啥意思,我还是好好学习。。。。。。