作者:寒空动烟雪 | 来源:互联网 | 2023-10-12 08:26
reacthook宣布也已有几个月了,置信有部份人已开始运用了,另有些人在犹疑要不要用,能够更多人安于现状,没有要用的盘算,以至另有许多公司的react版本是15或以下的,迫于晋级
react hook宣布也已有几个月了,置信有部份人已开始运用了,另有些人在犹疑要不要用,能够更多人安于现状,没有要用的盘算,以至另有许多公司的react版本是15或以下的,迫于晋级的难度没有运用。以我个人的看法,要不要运用react hook呢?
发起用的的人
- 项目react版本已是react16了
- 新建的项目
- 一向对新技术坚持关注,摩拳擦掌的人
- 对函数式编程兴趣的人
- 对react的componentDidMount,componentWillReceiverProps,componentDidUpdate讨厌,以至由于从新衬着成天在头疼的人
不发起用的人
- 对react hook极为讨厌,对react生命周期编程黑白兴趣的人。
- 只需你想,没有不发起用的人,包含第一类人。
这只是我个人的发起,我现在用的周期也不长,我们的项目是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的编程习气
记得珍藏哦^^