Hooks

最新推荐文章于 2024-05-09 11:03:36 发布

䒕闫

最新推荐文章于 2024-05-09 11:03:36 发布

阅读量365

点赞数

分类专栏：知识总结文章标签： react

本文链接：https://blog.csdn.net/y_z_z/article/details/108989899

版权

本文详细介绍了React Hooks中的useState、useEffect、useContext、useReducer的使用，包括它们如何替代经典的React Class组件中的生命周期方法、状态管理和组件间通信。通过实例展示了如何用Hooks实现状态管理，以及如何优化性能，包括useMemo和useRef。最后，还介绍了一个自定义Hook用于监听浏览器窗口变化。

摘要由CSDN通过智能技术生成

目录
useState
userEffect
userEffect实现componentWillUnmont
父子组件传值
userContext
userReducer
useReducer替代Redux案例
useMemo
useRef
useCallBack
自定义函数

一：useState

在组件中，我们难免使用state来进行数据的实时响应，这是react框架的一大特性，只需更改state，组件就会重新渲染，试图也会响应更新。

不同于react在class可以直接定义state，或者是在constructor中使用this.state来直接定义state值，在hooks中使用state需要useState函数，如下：

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

function Hooks() {
   
  const [count, setCount] = useState(0);
  const [age] = useState(16);
  useEffect(() => {
   
    console.log(count);
  });
  return (
    <div>
      <p>小女子芳年{
   age}</p>
      <p>计数器目前值为{
   count}</p>
      <button type="button" onClick={
   () => {
    setCount(count + 1); }}>点击+1</button>
      <button type="button" onClick={
   () => {
    setCount(count - 1); }}>点击-1</button>
    </div>
  );
}

export default Hooks;

在上面的例子中，我们使用了useState定义了两个state变量，count和age，其中定义count的时候还定义了setCount，就是用来改变count值的函数。在class类中，改变state是使用setState函数，而在hooks中是定义变量的同时定义一个改变变量的函数。

userState是一个方法，方法返回值为当前state以及更新state的函数，所以，在上面的例子中，我们用const [count, setCount] = useState(0);将count和setCount解构出来，而userState方法的参数就是state的初始值。当然count和与之对应的改变函数名称并不一定非得是setCount，名称可以随便起，只要是一块解构出来的即可。

在class组件中，我们可以用setState一次更改多个state值而只渲染一次，同样的，在hooks中，我们调用多个改变state的方法，也只是渲染一次。

二：userEffect 回目录

在class组件中，有生命周期的概念，最常用的，我们通常会在componentDidMount这个生命周期中做数据请求，偶尔，我们也会用一些其它的生命周期，像是componentDidUpdata，componentWillReceiveProps等。在hooks中，没有生命周期的概念，但是，有副作用函数useEffect。

使用useEffect，和使用useState相同，必须得先引入import React, { useState, useEffect } from ‘react’;,默认情况下，useEffect会在第一次和每次更新之后都会执行，useEffect函数接受两个参数，第一个参数是一个函数，每次执行的就是函数中的内容，第二个函数是个数组，数组中可选择性写state中的数据，代表只有当数组中的state发生变化是才执行函数内的语句。如果是个空数组，代表只执行一次，类似于componentDidUpdata。所以，向后端请求可以写成下面这种方式：

// 页面进来只调用一次
useEffect(()=>{
   
    axios.get('/getYearMonth').then(res=> {
   
        console.log('getYearMonth',res);
        setValues(oldValues => ({
   
            ...oldValues,
            fileList:res.data.msg
        }));
    })
},[]);

effect函数会在浏览器完成画面渲染之后延迟调用

在一个hooks函数中，可以同时存在多个effect函数，所以，当有需求每次更新都执行useEffect中的代码时，可以用一个useEffect请求数据，用其他的useEffect做另外的事情。只需根据第二个参数即可区别不同作用。

//官方示例性能优化
useEffect(() => {
   
  document.title = `You clicked ${
     count} times`;
}, [count]); // 仅在 count 更改时更新

三：userEffect实现componentWillUnmount 回目录

部分情况下，需要在组件卸载是做一些事情，例如移除监听事件等，在class组件中，我们可以在componentWillUNmount这个生命周期中做这些事情，而在hooks中，我们可以通过useEffect第一个函数参数中返回一个函数来实现相同效果。

// 官方示例
useEffect(() => {
   
    // ...
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
   
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
});

个人示例：

import React, {
    useState, useEffect } from 'react';
import {
    Switch, Route, Link } from 'react-router-dom';

function Index() {
   
  useEffect(() => {
   
    console.log('useEffect:come-index');
    return () => {
   
      console.log('useEffect:leave-index');
    };
  }, []);
  return <div>这是首页</div>;
}

function List() {
   
  useEffect(() => {
   
    console.log('useEffect:come-list');
    return () => {
   
      console.log('useEffect:leave-list');
    };
  }, []);
  return <div>这是列表页</div>;
}

function HooksEffect() {
   
  const [count, setCount] = useState(0);
  useEffect(() => {
   
    console.log(count);
    return () => {
   
      console.log('-------------------');
    };
  }, [count]