0%

2021-01-17 React Hooks 初步学习心得

2021-01-17 React Hooks 初步学习心得

参考:

官方文档:https://react.docschina.org/

Hooks 文档:https://react.docschina.org/docs/hooks-intro.html

关于 Hooks 是什么我就不多作介绍了,可以直接看文档,我下面就提一下我自己的心得和看法。

首先是第一点:Hooks 会多次执行

这一点其实是非常直接的,因为你很容易就能注意到组件每次渲染的时候 Hooks 都会执行一次。

在这里引用官方的例子说明一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>
);
}

该组件每次渲染时都会执行一次 useState ,但是取出来的值却不一样。这也就是 hooks 最大的神奇之处。

如果调用了 setCount 则会导致重渲染,也就是重新执行一次函数 。

因此,在使用 Hooks 的时候,需要时刻记住 Hooks 是会多次执行的,因此需要用 useEffect、 useCallback 、useMemo 等函数进行优化性能。

原因就是 Hooks 会多次执行。由于函数的闭包性,在函数内部声明的变量都是局部变量,每次执行都是不一样的。

如果有需要保存状态的变量,除了全局变量外就只有借助 React Hooks。而全局变量对于函数的迁移和重构都是相当不利的,因此使用 React Hooks 保存状态就成了唯一的选择。

接下来要谈的则是对比 Vue 3.0 Composition Api

由于本人先前主要的技术栈是 Vue ,因此实际上我是先学习了 Vue 3.0 的 Composition Api ,然后回过头来学习了 React Hooks 。

在这个过程中,我也确实感受到了两者的相似之处,和类似的逻辑抽取能力。

但是,正如我前面所说,要时刻记住 React Hooks 会多次执行,而与之相反的是 Composition Api 只会执行一次。相比较之下在心智负担上 Composition Api 确实轻了一些。

不过,这也并不意味着 React Hooks 就没有可取之处,否则全球那么多开发者也就不会为 React Hooks 而欣喜若狂了。

React Hooks 确实是一项非常伟大的设计,让开发者可以用更加清晰的方法来复用自己的逻辑。对比 class 组件,函数式组件 + React Hooks 让逻辑抽离变得轻而易举。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 还是官方文档,上面那个例子的等价 class 组件,相比较之下确实麻烦一些
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}

虽然要踩的坑还有很多,但是熟练掌握之后还是有很大用处的,所以,还是要学习一下 React Hooks。

最后呢,要我总结一下我的心得呢,那就是:

React Hooks,针不戳~

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/c5ebcae0.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!