React Hooks实践

更新日期: 2019-12-01阅读: 2.2k标签: Hooks

9月份开始,使用了react16.8的新特性React Hooks对项目进行了重构,果然,感觉没有被辜负,就像阮一峰老师所说的一样,这个 api 是 React 的未来。

Hooks

React Hooks是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

说是新的特性,但是与其他的版本的迭代不同,它不只是加一点api减一点api的改变。而是完整的一套解决方案。


一个简单的Hook

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>
  );
}

这是React官网关于react使用的第一个例子,使用Hooks的方式实现了一个计数器功能。
useState是什么?在这里我们认为useState就是一个Hook。
下面介绍 React 2个最常用的钩子,useState,useEffect。

useState

这个Hook,应该是我们使用最多的一个Hook了。通过在函数组件里调用它来给组件添加一些内部 state。
useState方法会返回一个包含2个值的数组,第一个值是当前状态。第二个值更新这个状态的函数,它类似 class 组件的 this.setState,但是它不会把新的 state 和旧的 state 进行合并。我们一般会通过解构的方式获取其值。

使用

import { useState } from 'react';

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

这里我们将内部状态count初始化为0,在count发生变化时,会引起组件的会重新渲染。同时,我们通过解构的方式,给该状态进行了赋值。

更新

<button onClick={() => setCount(count + 1)}>
        Click me
      </button>

直接调用useState返回值的第二个参数,即可完成更新。


useEffect

我在写React ,类组件的时候,最不愿意写的就是生命周期方法,一方面是因为生命周期方法比较多,另一方面其实也比较容易出bug。比如说,我们想要实现一个监听props的某个值的变化,进而进行一些特殊操作,就可能需要两种生命周期的方法配合。但是在Hooks里,我们只需要用到useEffect就可以实现了。

使用

import { useState, useEffect } from 'react';

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

  // 类似于componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 更新文档的标题
    document.title = `You clicked ${count} times`;
  });

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

useEffect方法接受2个参数,第一个参数是一个函数,是在第一次渲染以及之后更新渲染之后会进行的副作用,强调一点,该函数可以有返回值,但是该返回值必须是一个函数,会在组件被销毁时执行。
第二个参数是可选的,是一个数组,数组中存放的是需要监听的属性。即当数组中的属性发生变化时,第一个参数的函数会被调用,如果是空数组,则在第一次渲染时会被调用。
基于以上两个最主要的Hook,我们基本上可以满足于我们大部分的需求。但是如果想要对组件进行优化,则需要另外两个Hook。useCallback和useMemo。


useCallback

useCallback接收一个内联回调函数参数和一个依赖项数组(子组件依赖父组件的状态,即子组件会使用到父组件的值) ,useCallback 会返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新。

useMemo

useMemo把创建函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

基于以上的Hook我们基本上可以完成大部分的功能了,除了上文重点介绍的useState和useEffect,react还给我们提供来很多有用的hooks useContext useReducer useRef useImperativeMethods useMutationEffect useLayoutEffect,这里就不一一介绍了,如果想要使用Hooks,这些api也是需要了解的,具体使用可以参考下面的文档。

参考文档:React 官网

原文:https://segmentfault.com/a/1190000021445588

链接: https://fly63.com/article/detial/7106

React将引入Hooks,你怎么看?

近日,据 MIT Technology Review 报道,一位名为“Repairnator”的机器人在 GitHub 上“卧底”数月,查找错误并编写和提交修复补丁,结果有多个补丁成功通过并被采纳,这位 Repairnator 到底是如何拯救程序员于水火的呢?

精通React今年最劲爆的新特性——React Hooks

你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗?你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗?你在还在为组件中的this指向而晕头转向吗?这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张。

使用react hooks实现自己的context-redux

我们将userReducer函数返回的原始dispath命名为origin_dispatch,自定义dispatch函数,当action为函数的时候,我们执行action函数,并将origin_dispatch当作参数传进去;action不是函数,直接调用origin_dispatch,不做处理

useEffect Hook 是如何工作的?

使用useEffect 就像瑞士军刀。它可以用于很多事情,从设置订阅到创建和清理计时器,再到更改ref的值。与 componentDidMount、componentDidUpdate 不同的是,在浏览器完成布局与绘制之后,传给 useEffect 的函数会延迟调用。

React Hooks 你真的用对了吗?

从 React Hooks 正式发布到现在,我一直在项目使用它。但是,在使用 Hooks 的过程中,我也进入了一些误区,导致写出来的代码隐藏 bug 并且难以维护。这篇文章中,我会具体分析这些问题,并总结一些好的实践,以供大家参考

如何用 Hooks 来实现 React Class Component 写法?

Hooks 的 API 可以参照 React 官网。本文主要是结合 Demo 详细讲解如何用 Hooks 来实现 React Class Component 写法,让大家更深的理解 Hooks 的机制并且更快的入门。 注意:Rax 的写法和 React 是一致的

React-Hooks

以下是上一代标准写法类组件的缺点,也正是hook要解决的问题,型组件很难拆分和重构,也很难测试。业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。

React Hooks与setInterval

Hooks出来已经有段时间了,相信大家都用过段时间了,有没有小伙伴们遇到坑呢,我这边就有个 setInterval 的坑,和小伙伴们分享下解决方案。写个 count 每秒自增的定时器,如下写法结果,界面上 count 为 1 ?

React Hooks 底层解析[译]

对于 React 16.7 中新的 hooks 系统在社区中引起的骚动,我们都有所耳闻了。人们纷纷动手尝试,并为之兴奋不已。一想到 hooks 时它们似乎是某种魔法,React 以某种甚至不用暴露其实例

用React hooks实现TDD

由于篇幅所限文章中并没有给出demo的所有代码,大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程,配合文章来看会比较清晰,从进公司前认识了TDD,到实践TDD

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!