为何要使用React Hooks?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为何要使用React Hooks?相关的知识,希望对你有一定的参考价值。

参考技术A 在了解React Hooks之前,我们必须先知道React的函数组件性质以及的函数组件为什么要用Hooks。

大伙儿都知道,无组件不React,而React的组件又分为类式组件和函数式组件,为什么函数式组件大受React开发者的推广?

首先我们从源码的角度来简单谈一下类式组件和函数式组件的区别:

定义类组件时,我们必须继承React.Component

同时,它具有一个render函数

咱们见好就收,毕竟具体操作需要涉及源码,不是一时半会解释的清的。那么render加载组件时,发生了什么?

1.根据组件标签,找到组件

2.由于是类式组件,创建新的实例,并通过该实例调用到原型上的render方法

3.将虚拟Dom转化为真实DOM

类式组件被定义为复杂的组件,这不是React所希望的,React想要的组件是纯函数组成的管道,那么便引出了作为简单组件的函数组件。

而函数组件作为一个函数,是没有继承React.Component的,他只需要两步 1.找到组件 2.渲染组件 ,所以也就 不存在生命周期,以及状态及this。

这就意味着,函数组件实现有关state的管理,需要借助redux,秉承redux能不用就不用的准则(其实有的时候还蛮香的,全局管理方便),往往会另功能简单的React组件变得笨重。

于是React团队自16.8版本以来,推出了稳定的React HOOKS来解决上述问题。

React约定钩子的前缀为use,所以需要自定义钩子时,一般使用use为前缀创建钩子。除此之外,React默认提供了四种钩子:

1)useState

相当于一种静态声明,目的是引入状态,此时的钩子保存状态。useState()接收函数状态的初始值,具有两个参数,第一个为状态变量,第二个为改变状态的方法,比如const [number,setNumber] = useState(0)

2)useEffect

副作用钩子,用来替代生命周期,最常见是向服务器请求数据

useEffect()作为常用的钩子之一,接收两个参数,第一个参数是函数,第二个参数是一个数组,给出依赖项,数组里的值代表需要监测的对象。

问题来了,生命周期那里体现?

当组件参数发生改变时,useEffect()就会执行。组件第一次渲染时,useEffect()也会执行。是不是相当于生命周期中的 componentDidMount() 呢?而useEffect()下的return,一般写在第一个参数的异步操作后,相当于 componentWillUnmount() ,在组件卸载前执行,做收尾工作。

3)useReducer

属于action钩子,useReducer()将算出新的state,返回一个数组。例如const [state, dispatch] = useReducer(ReducerFunc, initState)

第一个值是当前状态值,第二个值是发送action的dispatch。与Redux的Reducer一样,能够共享状态,但是不同之处是没法提供中间件和时间旅行(time travel)。

4)useContext

共享状态的一个钩子,在组件外部建立一个Context,包裹组件时,可以将被包裹组件的状态共享给组件内部调用的其他组件,即:

1.外部建立Context()

2.包裹含有状态的组件1

3.在其他函数组件内部调用该Context()时,可以将组件1的状态共享

但是有一点需要注意的是,使用useContext进行的数据流管理,每当context更新时,所有 使用 到该context的组件都会重新渲染。所以需要方法对useContext()进行优化,减少不必要的更新,优化方法可以参考: 如何优雅地处理使用React Context 导致的不必要渲染问题?

除此之外还有一些自带的钩子,比如:

5)useCallback和useMemo

可以用做React性能优化

react很烦,一但更新数据,render依次diff刷新节点,拦都拦不住。useCallback和useMemo就是拦住他刷新的方法。

假设React组件中有个button,同时声明了click方法,每次render时,button和click方法都会重新render。于是可以使用useCallback(),避免组件重复无意义的渲染。

比如:

原因是缓存了相同的引用,以此避免了无效render。

useMemo参数用法一致,不过useCallback一般用于缓存函数,useMemo用于缓存计算结果之类。

useCallback(fn, deps)相当于useMemo(()=>fn, deps)

*可以推出,使用useCallback实现useMemo的方法:

useMemo(fun,...deps)  

useCallback(fun(...deps), [...deps])

这两者是等价的。

React Hooks用法与实战

一、为什么要发明hooks?

1.在组件之间复用状态逻辑很难

在class组件中,我们如果复用状态逻辑,可以使用比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使你的代码难以理解。而hooks可以简单的去实现状态逻辑的复用。

2.复杂组件变得难以理解

class组件的每个生命周期常常包含一些不相关的逻辑,完全不相关的代码却在同一个方法中组合在一起,如此很容易产生 bug,并且导致逻辑不一致。

3.难以理解的 class

class 是学习 React 的一大屏障,还必须去理解 JavaScript 中 this 的工作方式。还不能忘记绑定事件处理器。没有稳定的语法提案,这些代码非常冗余。

二、常用的hook及其用法

1.useState:让函数组件具有维持状态的能力

state(在一个函数组件的多次渲染之间,这个 state 是共享的) 是 React 组件的一个核心机制,useState 这个 Hook 就是用来管理 state 的,下面我分别用hooks组件和class组件来对比一下两种写法。
class组件:

import React from "react";

class Demo extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      num: 1
    ;
  
  handleAdd = () => 
    const newNum = this.state.num + 1;
    this.setState( num: newNum );
  ;
  render() 
    return (
      <div>
        this.state.num
        <button onClick=this.handleAdd>增加</button>
      </div>
    );
  

export default Demo;

hooks组件:

import React,  useState  from "react";
const Demo = () => 
  const [num, setNum] = useState(1);
  const handleAdd = () => 
    const newNum = num + 1;
    setNum(newNum);
  ;
  return (
    <div>
      num
      <button onClick=handleAdd>增加</button>
    </div>
  );
;
export default Demo;

useState(initialState) 的参数 initialState 是创建 state 的初始值;返回值是一个有着两个元素的数组,第一个元素用来读取 state 的值,第二个则是用来设置这个 state 的值;如果要创建多个 state,那么我们就需要多次调用 useState。

useState 应该算最简单的一个 Hooks,但在使用中,也有很多技巧可循,如果严格按照以下几点,代码可维护性直接翻倍:

重点:
1.能用其他状态计算出来就不用单独声明状态。一个 state 必须不能通过其它 state/props 直接计算出来,否则就不用定义 state。
2.保证数据源唯一。在项目中同一个数据,保证只存储在一个地方。不要既存在 redux 中,又在组件中定义了一个 state 存储;不要既存在父级组件中,又在当前组件中定义了一个 state 存储;不要既存在 url query 中,又在组件中定义了一个 state 存储。
3.useState 适当合并。useState 拆分过细,导致代码中一大片 useState,最终使得项目bug多多难以维护。

2.useEffect:执行副作用(副作用是指一段和当前执行结果无关的代码)

对应到 Class 组件,那么 useEffect 就涵盖了 ComponentDidMount、componentDidUpdatecomponentWillUnmount 三个生命周期方法。

useEffect接收两个参数,第一个为要执行的函数 callback,第二个是可选的依赖项数组 dependencies,其中依赖项是可选的,如果不指定,那么 callback 就会在每次函数组件执行完后都执行;如果指定了,那么只有依赖项中的值发生变化的时候,它才会执行。

1.有依赖项时,只有当依赖项发生变化时才执行。例如:

const [state, setState] = useState(0);
useEffect(() => 
  // state改变之后才会执行
  console.log('state-changed');
, [state]);

2.没有依赖项,则每次 render 后都会重新执行。例如:

useEffect(() => 
  // 每次 render 完一定执行
  console.log('re-rendered');
);

3.空数组作为依赖项,则只在首次执行时触发,对应到 Class 组件就是 componentDidMount。例如:

useEffect(() => 
  // 组件首次渲染时执行,等价于 class 组件中的 componentDidMount
  console.log('did mount');
, [])

4.useEffect 还允许你返回一个函数,用于在组件销毁的时候做一些清理的操作,类似于componentWillUnmount,例如:

useEffect(() => 
  return () => 
    // 组件卸载时执行,等价于 class 组件中的 componentWillUnmount
    clearInterval(timer1);
  
, [])

useEffect使用需注意:

重点:
React 会使用浅比较来对比依赖项是否发生了变化,所以要特别注意数组或者对象类型。如果你是每次创建一个新对象,即使和之前的值是等价的,也会被认为是依赖项发生了变化。

3.useCallback:缓存回调函数

在 React 函数组件中,每一次 UI 的变化,都是通过重新执行整个函数来完成的。你不妨思考下面代码的执行在这里插入代码片过程。每次组件状态发生变化的时候,函数组件实际上都会重新执行一遍。在每次执行的时候,实际上都会创建一个新的事件处理函数 handleIncrement。

function Counter() 
  const [count, setCount] = useState(0);
  const handleIncrement = () => 
    setCount(count + 1)
  ;
  return <button onClick=handleIncrement>count</button>

因此,我们需要做到的是:只有当 count 发生变化时,我们才需要重新定一个回调函数,这就是useCallback这个hook的作用。

function Counter() 
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => 
    setCount(count + 1)
  , [count]);
  return <button onClick=handleIncrement>count</button>

4.useMemo:缓存计算的结果

useMemo和用法和作用与useCallback很相似,有助于避免在每次渲染时进行高开销的计算。开发中我们经常需要根据某些状态计算出我们需要的值进行渲染。

export default function Index(type) 
  const [count, setCount] = useState(0);
  const getType = () => 
    console.log('渲染了')
    if (type === 1) 
      const a = 1;
      return a + 1;
     else 
      return 3;
    
  
  return (
    <span>
      <span>这是type值:getType()</span>
      <button onClick=() => setCount(count + 1)>count</button>
    </span>
  )

上面的例子中,每当页面有状态改变时,getType函数就会去执行,打印出来“渲染了”,这样就耗费了很多不必要的开销。因为getType里面依赖的是type这个状态,所以可以写成下面的代码来进行优化性能。

export default function Index(type) 
  const [count, setCount] = useState(0);
  const getType = useMemo(() => 
    console.log('渲染了')
    if (type === 1) 
      const a = 1;
      return a + 1;
     else 
      return 3;
    
  , [type]);
  return (
    <span>
      <span>这是type值:getType</span>
      <button onClick=() => setCount(count + 1)>count</button>
    </span>
  )

5.useRef:在多次渲染之间共享数据

useRef这个hook主要有两个功能:
1.结合 React 的 ref 属性和 useRef 这个 Hook,我们就可以获得真实的 DOM 节点,并对这个节点进行操作。
2.我们可以把 useRef 看作是在函数组件之外创建的一个容器空间,在函数组件的多次渲染之间共享这个值。使用 useRef 保存的数据一般是和 UI 的渲染无关的,因为当 ref 的值发生变化时,是不会触发组件的重新渲染的
获取dom节点的功能比较简单,就不做代码展示了,下面来看一下如何用useRef来实现跨周期共享数据。

import React,  useState, useRef, useCallback  from 'react';
export default function Index() 
  const [time, setTime] = useState(0);

  const timer = useRef(null);
  const handleStart = useCallback(() => 
    timer.current = setInterval(() => 
      setTime((time) => time + 1);
    , 1000);
  , []);

  const handlePause = useCallback(() => 
    clearInterval(timer.current);
    timer.current = null;
  , [])
  return (
    <span>
      time<br />
      <button onClick=handleStart>开始计时</button>
      <button onClick=handlePause>停止计时</button>
    </span>
  )

6.useContext:定义全局状态

我们都知道react父组件传递数据给子组件,子组件用props接收,但是父组件传递给孙子组件甚至曾孙子组件,这个过程就会变的很繁琐。那useContext这个hook就是解决这个问题的,需要React的createContext的API来配合完成,一起来看实现代码。

//父组件
import React from 'react';
export const UserContext = React.createContext(null);
import Son from './Son';
export default function Father() 
  const userInfo = 
    name: 'Tom',
    id: 1,
    email: '111222333@163.com',
  ;
  return (
    <UserContext.Provider value=userInfo>
      父组件
      <Son />
    </UserContext.Provider>
  )

//子组件
import React,  useContext  from 'react';
import  UserContext  from './Father';
export default function Son() 
  const userInfo = useContext(UserContext);
  console.log(userInfo)
  return (
    <span>
      子组件
    </span>
  )

需要注意的是 子组件获取的数据必须在自己的上层组件中定义才能够获取到,在一些小型项目中使用useContext还是非常方便的。

三、自定义hooks的用法

什么是自定义hooks:声明一个名字以 use 开头的函数,你可以传递任意参数给这个 Hook,也可以返回任何值,在函数内部使用其他hooks(也可以是自定义hooks)。

为什么要用自定义hooks:方便业务逻辑拆分,使代码简洁明了容易维护;代码复用,减少代码量;

典型的使用场景:
1.抽取业务逻辑。
2.封装通用逻辑。
3.监听浏览器状态。
4.拆分复杂组件。

下面用几个例子来帮助大家更深理解自定义hooks:

1.自定义hooks-实现强制渲染(forceUpdate)

主文件:

import React from 'react';
import useUpdate from './useUpdate';

const Test = () => 
  const [forceUpdate] = useUpdate();
  return <span>
    <button onClick=() => forceUpdate()>刷新</button>
    Date.now()
  </span>
;

export default Test;

hook文件:

import  useState  from 'react';
 
const useUpdate = () => 
  const [, setFlag] = useState();
  const update = () => 
      setFlag()
  ;

  return [update];

 
export default useUpdate;

2.自定义hooks-获取滚动条位置

主文件:

import React from 'react';
import useScroll from './useScroll';

const Test = () => 
  const x, y = useScroll();
  return <span>
    横向滚动条位置:x
    纵向滚动条位置:y
  </span>
;

export default Test;

hook文件:

import  useState, useEffect  from 'react';

const useScroll = () => 
  const [position, setPosition] = useState( x: window.scrollX, y: window.scrollY );
  useEffect(() => 
    const handler = () => 
      const obj = 
        x: window.scrollX,
        y: window.scrollY,
      
      setPosition(obj);
    ;
    window.addEventListener("scroll", handler);
    return () => 
      window.removeEventListener("scroll", handler);
    ;
  , []);
  return position;
;

export default useScroll;

3.自定义hooks-实现虚拟列表

主文件:

import React,  useMemo, useRef  from 'react';
import useVirtualList from './useVirtualList';

const Test = () => 
  const containerRef = useRef(null);
  const wrapperRef = useRef(null);

  const originalList = useMemo(() => Array.from(Array(100000).keys()), []);

  const [list] = useVirtualList(originalList, 
    containerTarget: containerRef,
    wrapperTarget: wrapperRef,
    //每条高度60px,未设置box-sizing属性,所以再加2px边框高度,为62px
    itemHeight: 62,
  );

  return (
    <div ref=containerRef style= height: '300px', width: '500px', overflow: 'auto', border: '1px solid' >
      <div ref=wrapperRef>
        list.map((ele) => (
          <div
            style=
              height: 52,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              border: '1px solid #e8e8e8',
              marginBottom: 8,
            
            key=ele
          >
            Row: ele
          </div>
        ))
      </div>
    </div>
  );


export default Test;

hook文件:

import  useEffect, useState  from 'react';

interface Options 
  containerTarget: any;
  wrapperTarget: any;
  itemHeight: number;


const useVirtualList = <T>(originalList: Array<T>, options: Options) => 
  const  containerTarget, wrapperTarget, itemHeight  = options;
  const [list, setList] = useState<T[]>([]);

  const handleScroll = () => 
    //向上滚动的高度和个数
    const scrollTop = Math.floor(containerTarget.current.scrollTop);
    const scrollNum = Math.floor(scrollTop / itemHeight);

    //可视区的高度和个数
    const viewHeight = containerTarget.current.clientHeight;
    const viewNum = Math.ceil(viewHeight/itemHeight);

    const totalHeight = originalList.length * itemHeight;
    wrapperTarget.current.style.height = totalHeight - scrollNum * itemHeight + 'px'<

以上是关于为何要使用React Hooks?的主要内容,如果未能解决你的问题,请参考以下文章

react自定义hooks-自动改变页面的title,Http请求hooks等..(持续更新)

React hooks实践

Hooks使用规则

Hooks使用规则

在 react 里写 vue3 ? 还写了自定义 hooks和 Hoc 构建了响应式 !

React函数类组件及其Hooks学习