2019-08-24 07:00:00 文摘资讯 阅读数 1364  收藏
 
 

之前我们已经掌握了useState的使用,在 class 中,我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0

  1.  
    class Example extends React.Component {
  2.  
    constructor(props) {
  3.  
    super(props);
  4.  
    this.state = {
  5.  
    count: 0
  6.  
    };
  7.  
    }

在函数组件中,我们没有 this,所以我们不能分配或读取 this.state。我们直接在组件中调用 useState Hook:

  1.  
    import React, { useState } from 'react';
  2.  
     
  3.  
     
  4.  
    function Example() {
  5.  
    // 声明一个叫 “count” 的 state 变量
  6.  
    const [count, setCount] = useState(0);

既然我们知道了 useState 的作用,那么掌握 useEffect 就更容易,函数组件中没有生命周期,那么可以使用 useEffect 来替代。如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMountcomponentDidUpdate 和 componentWillUnmount 这三个函数的组合。

  1.  
    class Example extends React.Component {
  2.  
    constructor(props) {
  3.  
    super(props);
  4.  
    this.state = {
  5.  
    count: 0
  6.  
    };
  7.  
    }
  8.  
    componentDidMount() {
  9.  
    document.title = `You clicked ${this.state.count} times`;
  10.  
    }
  11.  
    componentDidUpdate() {
  12.  
    document.title = `You clicked ${this.state.count} times`;
  13.  
    }
  14.  
    render() {
  15.  
    return (
  16.  
    <div>
  17.  
    <p>You clicked {this.state.count} times</p>
  18.  
    <button onClick={() => this.setState({ count: this.state.count + 1 })}>
  19.  
    Click me
  20.  
    </button>
  21.  
    </div>
  22.  
    );
  23.  
    }
  24.  
    }

使用 Hook 的示例

  1.  
    import React, { useState, useEffect } from 'react';
  2.  
     
  3.  
     
  4.  
    function Example() {
  5.  
    const [count, setCount] = useState(0);
  6.  
     
  7.  
     
  8.  
    useEffect(() => {
  9.  
    document.title = `You clicked ${count} times`;
  10.  
    });
  11.  
     
  12.  
     
  13.  
    return (
  14.  
    <div>
  15.  
    <p>You clicked {count} times</p>
  16.  
    <button onClick={() => setCount(count + 1)}>
  17.  
    Click me
  18.  
    </button>
  19.  
    </div>
  20.  
    );
  21.  
    }

默认情况下,它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念,不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。

数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。有些副作用可能需要清除,所以需要返回一个函数,比如挂载时设置定时器,卸载时取消定时器。

  1.  
    class Example extends Component {
  2.  
    constructor (props) {
  3.  
    super(props);
  4.  
    this.state = {
  5.  
    count: 0
  6.  
    }
  7.  
    }
  8.  
    componentDidMount() {
  9.  
    this.id = setInterval(() => {
  10.  
    this.setState({count: this.state.count + 1})
  11.  
    }, 1000);
  12.  
    }
  13.  
    componentWillUnmount() {
  14.  
    clearInterval(this.id)
  15.  
    }
  16.  
    render() {
  17.  
    return <h1>{this.state.count}</h1>;
  18.  
    }
  19.  
    }

使用 Hook 的示例

  1.  
    function Example() {
  2.  
    const [count, setCount] = useState(0);
  3.  
     
  4.  
     
  5.  
    useEffect(() => {
  6.  
    const id = setInterval(() => {
  7.  
    setCount(c => c + 1);
  8.  
    }, 1000);
  9.  
    return () => clearInterval(id);
  10.  
    }, []);
  11.  
     
  12.  
     
  13.  
    return <h1>{count}</h1>
  14.  
    }

你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可,如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值,所以它永远都不需要重复执行。

通过跳过 Effect 进行性能优化,在某些情况下,每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中,我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决:

  1.  
    componentDidUpdate(prevProps, prevState) {
  2.  
    if (prevState.count !== this.state.count) {
  3.  
    document.title = `You clicked ${this.state.count} times`;
  4.  
    }
  5.  
    }

这是很常见的需求,所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可:

  1.  
    useEffect(() => {
  2.  
    document.title = `You clicked ${count} times`;
  3.  
    }, [count]); // 仅在 count 更改时更新

你已经学习了 State Hook 和 Effect Hook,将它们结合起来你可以做很多事情了。它们涵盖了大多数使用 class 的用例。

 

React中useEffect使用的更多相关文章

  1. React中useEffect的简单使用

    学习hooks 在 React 的世界中, 组件有函数组件和类组件 UI 组件我们可以使用函数,用函数组件来展示 UI. 而对于容器组件,函数组件就显得无能为力. 我们依赖于类组件来获取数据,处理数据 ...

  2. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  3. 哪种方式更适合在React中获取数据?

    作者:Dmitri Pavlutin 译者:小维FE 原文:dmitripavlutin.com 国外文章,笔者采用意译的方式,以保证文章的可读性. 当执行像数据获取这样的I/O操作时,你必须发起获取 ...

  4. React的useEffect与useLayoutEffect执行机制剖析

    引言 useEffect和useLayoutEffect是React官方推出的两个hooks,都是用来执行副作用的钩子函数,名字类似,功能相近,唯一不同的就是执行的时机有差异,今天这篇文章主要是从这两 ...

  5. 解读vue-server-renderer源码并在react中的实现

    前言 ​ 在博客开发的过程中,有这样一个需求想解决,就是在SSR开发环境中,服务端的代码是是直接通过webpack打包成文件(因为里面包含同构的代码,就是服务端与客户端共享前端的组件代码),写到磁盘里 ...

  6. react中使用截图组件Cropper组件

    --最近项目用react,学习react并使用cropper组件裁剪图片. (这里开发组件不够统一有用tsx(TypeScript + xml/html)写的组件,有用jsx(javascript+x ...

  7. React报错之React Hook useEffect has a missing dependency

    正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...

  8. React报错之React Hook 'useEffect' is called in function

    正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...

  9. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

随机推荐

  1. QT--动态人流量监测系统

    QT--动态人流量监测系统 简介: 本项目使用了百度AI的动态人流量监测api,以人体头肩为主要识别目标,适用于低空俯拍,出入口场景,可用于统计当前图像的锁定人数和经过的人数 项目功能 本项目分为相机 ...

  2. ORA-27090: Unable to reserve kernel resources for asynchronous disk I/O

    2019-08-19T09:27:33.225584+08:00Slave encountered ORA-27090 exception during crash recoveryRecovery ...

  3. Java面试准备基础篇_11.24

    Java类加载机制 Java内存模型JMM 为什么 Redis 单线程能支撑高并发? 高并发下的接口幂等性解决方案! 面试官问:平常你是怎么对 Java 服务进行调优的? JAVA虚拟机(JVM)六: ...

  4. nodejs攻略——第一章 配置

    nodejs这玩意吧,我也是心血来潮的学习,所以啊.看这篇文章之前请大家有以下技能,如果没有..我不确定你能看得懂,毕竟我文采水平实在有限. 前置技能要求: c#或java 熟练+ JavaScrip ...

  5. 《Netty Redis Zookeeper 高并发实战》声明

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 这里, 对疯狂创客圈 <Netty Redis Zookeeper 高并发实战> 一书,进行一些必要说明. ...

  6. 跨域问题,解决方案-Nginx反向代理

    跨域问题,解决之道 跨域问题,在日常开发过程中,是一个非常熟悉的名词.今天的话题,结合我之前的项目场景,讨论下<跨域问题,解决之道>. 跨域是什么 跨域问题,是由于JavaScript出于 ...

  7. java8-新的日期API

    背景 java的日期和时间API设计不理想,java8引入新的时间和日期API就是为了解决这个问题. 老的日期API的核心类 缺点 Date 月从0开始,年最小从1900年开始,没有时区的概念 Cal ...

  8. Hyperledger Fabric相关文件解析

    1相关文件说明 这一部分涉及相关配置文件的解析, 网络的启动涉及到多个文件,本文按以下顺序进行分析: . ├── base │   ├── docker-compose-base.yaml #1 │  ...

  9. 超级简单的数组加单链表实现Map

    /** * 超级简单的数组加单链表实现Map * @author jlj * */ public class MyHashMap { public MyList[] lists; public int ...

  10. Linux平台 Oracle 19c RAC安装Part3:DB配置

    Linux平台 Oracle 19c RAC安装Part3:DB配置 四.DB(Database)配置 4.1 解压DB的安装包 4.2 DB软件配置 4.3 ASMCA创建磁盘组 4.4 DBCA建 ...