热门标签 | 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的编程习气
记得珍藏哦^^


推荐阅读
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社区 版权所有