[React]Hook初探

栏目: IT技术 · 发布时间: 4年前

内容简介:Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用stateHook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render prop和高阶组件产生的代码结构复杂的问题Hook可以解决在class中因为组件在生命周期函数内分散处理导致的逻辑混乱。

Hook是什么

Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用state

Hook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render prop和高阶组件产生的代码结构复杂的问题

Hook可以解决在class中因为组件在生命周期函数内分散处理导致的逻辑混乱。

Hook可以解决在class中this的复杂问题。

Hook的结构

State Hook

在通过state进行状态管理时,我们会使用contructor()构造器来初始化state,使用setState()更新state的状态

在Hook里,不再使用以上的两种方法,将会使用

const [name,setName]=useState(defaultValue);

这样的方法进行对状态进行管理。

UseState将会被调用来为函数组件添加state,一个useState方法将会返回一对值(一个数组),一个当前状态和更新这个当前状态的函数,可以在组件的其他地方调用这个更新函数。

这对返回值使用数组解构。

一个useState语句将会创造一个状态。

Effect Hook

我们可以把useEffect看作是componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect的第二个可选参数是判断是否执行该函数,如果第二个参数在重渲染的时候没有发生改变,将会跳过这个当前的useEffect。

如果第二个参数是一个空数组([]),effect将只会在组件挂载和卸载时执行,然而这种操作存在风险,具体的见文档中的 Hook/FAQ :在依赖列表中省略函数是否安全?

一个简单的例子

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

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

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

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

在这个例子中,声明了一个名为count的状态,在每次点击button时,通过事件处理将会使count+1,在useEffect函数中,使用浏览器的API将count显示。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深度学习

深度学习

[美]特伦斯·谢诺夫斯基(Terrence Sejnowski) / 姜悦兵 / 中信出版集团 / 2019-2 / 88

全球科技巨头纷纷拥抱深度学习,自动驾驶、AI医疗、语音识别、图像识别、智能翻译以及震惊世界的AlphaGo,背后都是深度学习在发挥神奇的作用。深度学习是人工智能从概念到繁荣得以实现的主流技术。经过深度学习训练的计算机,不再被动按照指令运转,而是像自然进化的生命那样,开始自主地从经验中学习。 本书作者特伦斯·谢诺夫斯基是全球人工智能十大科学家之一、深度学习先驱及奠基者,亲历了深度学习在20世纪......一起来看看 《深度学习》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换