行业资讯

hook如何正确的在react中使用

发布时间：2020-12-11 14:13:38 作者：Leah
来源：亿速云 阅读：203

hook如何正确的在react中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

hook

首先介绍关于hook的含义，以及其所要去面对的一些场景

含义：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。简单来说就是可以使用函数组件去使用react中的一些特性

所要解决的问题：

那么接下来所要介绍的部分就是如何去使用hook

state hook

对于使用过class组件的同学，相信对于state肯定有很深的印象，对于一些需要用到的全局变量，在class组件中我们常常采用的方式是this.state = {}，但是在hook中我们采用的方式就是使用useState这个hook，然后就可以对这种全局变量进行引用，在引用时只需要用其变量名即可，这里就拿官网的例子来举例：
import React, { useState } from 'react';

import React, { useState } from 'react';

function Example() {
 // 声明一个叫 "count" 的 state 变量
 const [count, setCount] = useState(0);

 return (
 <div>
  <p>You clicked {count} times</p>
  <button onClick={() => setCount(count + 1)}>
  Click me
  </button>
 </div>
 );
}

在上面的这个例子中，我们设置变量方式采用的就是const [count, setCount] = useState(0)这种方式，其中的0就是给count赋初值为0，如果想要给count赋值为一个空对象，那么只需要const [count, setCount] = useState({})，这样的方式就行了，那么这样你在用count时，此时获取到的值就为一个空对象。

作用：返回一个state，以及更新state的函数

  1. 函数式更新：新的state需要通过使用先前的state计算得出，将函数传递给setState,该函数将接收先前的state，并返回一个更新后的值

  2. 惰性初始state，initialState参数只会在组件的初始渲染中起作用，如果初始化state需要通过一个复杂计算来获取，则可以传入一个函数，在函数中计算并返回初始的state，此函数只在初始渲染时被掉用，如下所示：

 const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
 })

在hook中如何给全局变量设置值

在class组件中我们给放在state中的变量赋值时，通常采用的方式就是this.setState(）这种方式，那么在hook中所要采用的就是set+变量名这种方式，如

const [count, setCount] = useState(0)

在这里通过上面我们已经知道的就是count能够获取到值，那么其所对应的setCount(值)，这种赋值的方式就是给count变量赋值的，然后通过count就能够获取到值。

hook中设置多个全局变量的方式

在hook中，如果我们需要去设置多个类似于上面所说的count，那么就需要多次使用useState这个hook，当然你也可以设置一个变量在hook的最外部，即在hook这个函数组件的外部。需要注意的是别在整个hook这个函数的全局设置，因此在hook的运行机制中，在每次加载时，都会从新去加载里面的变量，因此你是不能够去获取到在整个函数内部中使用该变量所改变的值的，能够获取到的就只是这个变量的初始值*

useEffect hook

对于useEffect hook，其用途类似于class组件中的生命周期函数，用来处理在一些特定时刻需要去做的事情，这种事情常被叫做副作用。在使用useEffect这个hook时，需要注意的一点就是其不能够被包含在循环，判断语句中，否则项目会出现报错，这也是hook的一种设置机制

对于useEffect的初步认识只需要了解上面的即可。接下来就来介绍一个官网的实例，来说明useEffect

import React, { useState, useEffect } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 // Similar to componentDidMount and componentDidUpdate:
 useEffect(() => {
  // Update the document title using the browser API
  document.title = `You clicked ${count} times`;
 });

 return (
  <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
    Click me
   </button>
  </div>
 );
}

在上面的这段代码中，就使用到了useEffect这个hook，在每次count值改变时，就会在页面中去打印“You clicked ${count} times”这段文字，当然count肯定对应的就是其所对应的值。

useEffect去取代calss中的生命周期函数的方式

react中有状态组件中，其生命周期函数的各个阶段

  1. 在Mounting阶段

    1. constructor()

    2. static getDerivedStateFromProps()

    3. render()

    4. componentDidMount()

  2. Updating

    1. static getDerivedStateFormProps

    2. shouldComponentUpdate()

    3. render()

    4. getSnapshotBeforeUpdate()

    5. componentDidUpdate()

  3. UnMouting

    1. componentWillUnmount()

使用hook去代替生命周期函数的方式

这里就介绍了关于useEffect这个hook的使用，有一些生命周期函数就是通过该hook来实现的，这里推荐一篇文章https://blog.logrocket.com/guide-to-react-useeffect-hook/，可以参考下。这里是在参考了一些文章后写的，具体介绍如下：

constructor: 可以通过useState来初始化state

componentDidMount(),在hook中需要使用下面的这种方式去取代，在useEffect中传递第二个参数，该参数为一个空数组，只会去执行一次，如下面所示

useEffect(() => {

},[])

componentDidUpdate(),有两种方式去解决

在每次渲染的时候都去调用hooks，解决的方式如下面所示

  useEffect(() => {

  })

用一个特殊变量的去触发hook,如下面所示,count指的就是这个特殊的变量，该hook触发，只会是count的值改变时

  useEffect(() => {

  },[count])

componentWillUnmount(),用hook来代替，需要去return一个callback(回调函数)，如下面的形式所示

  useEffect(() => {
    return () => {
      //执行的为componentWillUnmount
    }
  },[])

shouldComponentUpdata()，常使用React.memo来代替,在默认情况下，它将对props对象中的复杂对象进行浅层比较，如果想要去控制比较，可以去提供一个自定义的比较函数作为第二个参数。代替hook的方式如下所示

  import React from 'react'
  function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
  }
  const Weather = ({weather}) => {
    return (<div>
        <p>{weather.city}</p>
        <p>{weather.temperature}</p>
        {console.log('Render')}
        </div>
    )
  }

  export default React.memo(Weather, areEqual)

自定义hook

通常在实际的项目开发中少不了使这种自定义的hook，前提是在整个项目中使用了hook的情况下。通常情况下就是去使用useState，useEffect这种系统已经定义好的hook去实现，在调用时你就可以直接调用当你自定义好的hook来实现你所需要的功能。下面就以自定义useReducer这个hook为例

import React, { useEffect } from 'react'

function useReducer(reducer, initialState) {
 const [state, setState] = useState(initialState);

 function dispatch(action) {
  const nextState = reducer(state, action);
  setState(nextState);
 }

 return [state, dispatch];
}
export default useReducer

在上面的这个实际例子中，我们封装了一个自定义的useReducerhook，我们可以调用这个hook去完成与reducer一样的功能了，在调用是就需要我们去传入两个参数，一个就是reducer，另外一个就是initialState，然后就能够取得state,以及dispatch方法。注意这里的返回值使用的是一个数组，这样的好处就是我们在获取其返回值时，可以采用数组结构这种方式来获取。具体关于数组的结构可以去看看es6中的部分，就能够明白了。那么接下来就是使用这个自定义好的useReducer。使用方式如下

import useReducer form '你封装useRecuer的组件中'
function Todos() {
const todosReducer = ( state, dispatch) => {
	if(dispatch.type == "") { //type值为什么时去执行
		const newState == "" //执行一些操作，去更新state
		return newState //返回新的neState
	}
}
 const [todos, dispatch] = useReducer(todosReducer, []);
 function handleAddClick(text) {
  dispatch({ type: 'add', text });
 }

 return (
	<div></div>
)
}

这里并没有把实际的使用情况给写完，剩余的可以自己去补充，其使用方式就和redux的使用方式相同。这就是整个自定义hook以及去使用的过程，在实际的开发中可以去体验体验。

额外的hook

useReducer，能给那些会出发深更新的组件做性能优化，因为可以向子组件去传递dispatch而不是回调

useReducer这个hook的封装，整个封装的方法如下：

//reducer hook封装
  import { useState } from 'react';
  export default useReducer function(reducer, initialState) {
    const [state, setState] = useState(initialState);
    function dispatch(action){
      const nextState = reducer(state, action);
      return setState(nextState);
    }
    return [state, dispatch]
  }
//实际例子使用
  import useReducer from '';
  const initialState = {count: 0};
  function reducer(state, action) {
  switch (action.type) {
    case 'increment':
    return {count: state.count + 1};
    case 'decrement':
    return {count: state.count - 1};
    default:
    throw new Error();
  }
  }
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'devrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </div>
  )

useReducer的惰性初始化，可以选择惰性地创建初始化state。因此需要设置一个初始化函数作为useReducer的第三个参数传入，这样初始化state将设置为init(initialArg)，如下所示，就是一个实际的案例在useReducer中去传递第三个参数

function init(initialCount) {
 return {count: initialCount};
}

function reducer(state, action) {
 switch (action.type) {
  case 'increment':
   return {count: state.count + 1};
  case 'decrement':
   return {count: state.count - 1};
  case 'reset':
   return init(action.payload);
  default:
   throw new Error();
 }
}

function Counter({initialCount}) {
 const [state, dispatch] = useReducer(reducer, initialCount, init);
 return (
  <>
   Count: {state.count}
   <button
    onClick={() => dispatch({type: 'reset', payload: initialCount})}>
    Reset
   </button>
   <button onClick={() => dispatch({type: 'decrement'})}>-</button>
   <button onClick={() => dispatch({type: 'increment'})}>+</button>
  </>
 );
}

注意：如果reducer hook的返回值与当前state相同，react将跳过子组件的渲染及副作用的执行

useCallback

返回值：返回一个memoized回调函数，该回调函数仅在某给依赖项改变时才会更新。

含义：把内联回调函数及其依赖项数组作为参数传入useCallback，它将返回该回调函数传递给经过优化的并使用引用相等性去避免非必要渲染

useCallBack(fn, deps)相当与useMemo(() => fn,deps)

useMemo

使用方式：const memoziedValue = useMemo(() => computeExpensiveValue(a,b), [a, b])

返回值：返回一个memoized值,把创建函数和依赖项数组作为参数传入useMemo,仅在某个依赖项改变时才重新计算memoized值。

好处：这种优化有助于避免在每次渲染时都进行高开销的计算

渲染方式：传入useMemo的函数会在渲染期间执行，不要在这个函数内部执行与渲染无关的操作，如属于useEffect中的副作用。如果没有，那么新的值将会在每次渲染时被重新渲染

注意：依赖项数组不会作为参数传递给函数，概述来说，就是每一个出现在函数中的参数也应该出现在依赖项的数组中

useRef

使用方式： const refContainer = useref(initialValue);

返回值：返回一个可ref对象，其.current属性被初始化为传入的参数(initialValue)。这返回的的对象将在组件的整个生命周期中持续

含义： useRef就像是一个盒子可以将.current中得可变属性给保存起来

ref与useRef的区别在于，后者是创建的了一个普通的js对象，useRef和自建一个{current: …。}对象的唯一区别是，useRef会在每次渲染时，返回同一个ref对象

useImperativeHandle

作用：可以在使用ref时自定义暴露给赋组件的实例值，使用的形式如下：

useImperativeHandle(ref, createHandle, [deps])

useLayoutEffect

更新时机：在浏览器执行下一次绘制前去执行

与useEffect相同，会在所有的DOM变更之后同步调用effect

useDebugValue

作用：在react devTools中常被用于去当作展示标签，作为客户端的钩子

hooks中的性能优化

在hook中，其性能优化的点很多，这个可以在一些https://react.docschina.org/docs/hooks-faq.html#performance-optimizations去学习，下面是我看的一部分。

如何在更新时去跳过effect，可以采用条件式方式，即在useEffect中去传递第二个参数

由于某些原因，无法将一个函数移动到effect内部时，可采用下面方式

  1. 尝试将函数移动到当前组件的外部

  2. 如果所调用对策方法是一个纯计算等，此时可以在effect外面去写这个函数

  3. 如果要增加一个函数去依赖项，那么要明确使用useCallback外部的hook，如下面的例子所示

function ProductPage({ productId }) {
// Wrap with useCallback to avoid change on every render
const fetchProduct = useCallback(() => {
  // ... Does something with productId ...
}, [productId]); // All useCallback dependencies are specified

return <ProductDetails fetchProduct={fetchProduct} />;
}

function ProductDetails({ fetchProduct }) {
useEffect(() => {
  fetchProduct();
}, [fetchProduct]); // All useEffect dependencies are specified
// ...
}

实现shouldComponentUpdate的方式

  const Button = React.memo((props) => {
  // your component
  });

如上面所示，这种实现方式并不是使用了hooks，它相当于纯组件，但是仅仅能够比较的是props。可以去增加第二个参数，采用一种函数的方式去拿到新老的props，如果结果返回true，就跳过更新阶段

记住计算结果的方式

使用useMemo这个hook去记住之前的计算结果，从而在多个渲染之中缓存计算

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

上面的代码会调用computeExpensiveValue(a,b)这个函数，但是它们依赖的a,b没有改变，那么useMemo在直接去返回上一次结果的值

看完上述内容，你们掌握hook如何正确的在react中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

推荐阅读：
  1. 听说你还不懂React Hook？
  2. hook如何在react中使用

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

react hook

上一篇：怎样禁止WordPress评论存储IP地址

下一篇：css3实现尖角的方法

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号