热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

reacthook有用的用法和技能剖析

reacthook宣布也已有几个月了,置信有部份人已开始运用了,另有些人在犹疑要不要用,能够更多人安于现状,没有要用的盘算,以至另有许多公司的react版本是15或以下的,迫于晋级

react hook宣布也已有几个月了,置信有部份人已开始运用了,另有些人在犹疑要不要用,能够更多人安于现状,没有要用的盘算,以至另有许多公司的react版本是15或以下的,迫于晋级的难度没有运用。以我个人的看法,要不要运用react hook呢?

发起用的的人

  1. 项目react版本已是react16了
  2. 新建的项目
  3. 一向对新技术坚持关注,摩拳擦掌的人
  4. 对函数式编程兴趣的人
  5. 对react的componentDidMount,componentWillReceiverProps,componentDidUpdate讨厌,以至由于从新衬着成天在头疼的人

不发起用的人

  1. 对react hook极为讨厌,对react生命周期编程黑白兴趣的人。
  2. 只需你想,没有不发起用的人,包含第一类人。

这只是我个人的发起,我现在用的周期也不长,我们的项目是react 16的,而且团队里只要我本身在写ract hook。幸亏react hook和生命周期编程体式格局是完整兼容的。

那末实在react hook的特性和长处实在也显露出来了。

1. 没有了显性的生命周期,一切衬着后的实行要领都在useEffect内里统一治理
2. 函数式编程,你不须要定义constructor,render,定义class
3. 某一个组件,要领需不须要衬着,从新实行完整取决于你,而且非常轻易治理
4. 一定另有我没挖掘的长处

针对以上的特性长处我一一申明,关于迥殊基本的用法我就不大篇长论了,发起参考官网的申明文档:
react官网

1. 没有了显性的生命周期,一切衬着后的实行要领都在useEffect内里统一治理

上代码(伪):

function getData(id) {
const [data, setData] = useState({});
useEffect(() => {
const data = api.getData(id);
setData(data);
}, [id]);
return

{data.name}

}

这是依据id猎取数据显现name的组件。
由于这个id是外部传入的,在之前你须要再didMount,willReceiverProps内里去推断是不是传入的和当前的不一样,然后去猎取数据,然则这里就不必了。直接集成在useEffect内里。最症结的是第二个参数[id]。这个参数的意义是id变了才进入内里的要领实行,方然第一次必实行。固然我说的不周全,大抵是这个意义,另有更庞杂的场景,横竖这类体式格局类似于监听id,id变了就实行,这不就是我们的终究目标吗?react之前分那末多周期实在就是处置惩罚这一件事变

2. 函数式编程,你不须要定义constructor,render,定义class

这个就不必多说了吧

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


{count}


)
}

no生命周期,no class,一切都是函数式编程

3. 某一个组件,要领需不须要衬着,从新实行完整取决于你,而且非常轻易治理

这里主要讲两个要领,useMemo和useCallback
先看useCallback
之前假如我们在render中定义了一个要领:

render() {
const {data} = this.state;
const filter = data.filter(e => e.id !== 5);
...
}

那末我们晓得每次render都邑实行filter这个要领,实在你是不是是觉妥当data没变这个要领只需实行一次就好了,看看react hook怎样做的

function demo() {
...
const filter = useCallback(() => {
data.filter(e => e.id !== 5)
}, [data])
...
}

看懂了吗?这个完整就是我之前提出来的思绪啊,它把这个要领实行的效果缓存起来了!!!背面的[data]就是当data稳定,也不会多实行。
一样的原理,关于一个组件,用useMemo就好啦

const mainInfoMemo = useMemo(() => {
return MAIN_INFO.map(e => (

{e.label}
{curSubject[e.key]}

));
}, [curSubject]);

当curSubject稳定,当你用这个组件的时刻一向不会再次衬着。

4. 一定另有我没挖掘的长处

纸上得来终觉浅,绝知此事要躬行
用了才挖掘更多东西,理解下前端的发展方向,转变之前react的编程习气
记得珍藏哦^^


推荐阅读
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • IOS Run loop详解
    为什么80%的码农都做不了架构师?转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • 重要知识点有:函数参数默许值、盈余参数、扩大运算符、new.target属性、块级函数、箭头函数以及尾挪用优化《深切明白ES6》笔记目次函数的默许参数在ES5中,我们给函数传参数, ... [详细]
  • 在Delphi7下要制作系统托盘,只能制作一个比较简单的系统托盘,因为ShellAPI文件定义的TNotifyIconData结构体是比较早的版本。定义如下:1234 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
  • 本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先,介绍了如何正确引入必要的脚本文件,如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着,通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交,包括数据的发送、接收和处理。此外,还讨论了该方法在不同场景下的应用,如文件上传、表单验证和动态更新页面内容等,提供了丰富的代码示例和最佳实践建议。 ... [详细]
  • 利用 PHP APICommonUrl 中转实现 jQuery JSONP 请求优化 ... [详细]
  • 设计实战 | 10个Kotlin项目深度解析:首页模块开发详解
    设计实战 | 10个Kotlin项目深度解析:首页模块开发详解 ... [详细]
  • 如何在ES6中实现Promise的完整流程
    在ES6中,Promise是一种用于处理异步操作的数据结构,它代表了一个现在、将来或永远可能可用的结果。本文将详细介绍如何在ES6中实现Promise的完整流程,包括创建、链式调用、错误处理等关键步骤,帮助开发者更好地理解和应用这一重要的异步编程工具。 ... [详细]
  • JVM钩子函数的应用场景详解
    本文详细介绍了JVM钩子函数的多种应用场景,包括正常关闭、异常关闭和强制关闭。通过具体示例和代码演示,帮助读者更好地理解和应用这一机制。适合对Java编程和JVM有一定基础的开发者阅读。 ... [详细]
  • Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 本文介绍了如何利用 Delphi 中的 IdTCPServer 和 IdTCPClient 控件实现高效的文件传输。这些控件在默认情况下采用阻塞模式,并且服务器端已经集成了多线程处理,能够支持任意大小的文件传输,无需担心数据包大小的限制。与传统的 ClientSocket 相比,Indy 控件提供了更为简洁和可靠的解决方案,特别适用于开发高性能的网络文件传输应用程序。 ... [详细]
author-avatar
寒空动烟雪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有