React函数式组件值之useEffect()

跳進海裡躲雨 發表於 2020-12-23 14:33:00

Effect Hook 可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找 dom。
　　可以这样说，在使用了useState或是useEffect这样的hooks之后，每次组件在render的时候都生成了一份本次render的state、function、effects，这些与之前或是之后的render里面的内容都是没有关系的。而对于class component来说，state是一种引用的形式。这就造成了二者在一些表现上的不同。
<h1>一、基础用法</h1>
　　定义一个函数和一个数组。函数体为组件初始化或变化时执行的代码，返回值为组件销毁前执行的代码。数组参数中放的是触发此函数的依赖项数据。
<div class="cnblogs_code">
<pre>1 useEffect(() => {
2 // 相当于 componentDidMount、componentDidUpdate
3 console.log("code");
4 return () => {
5 // 相当于 componentWillUnmount
6 console.log("code");
7 }
8 }, [/*依赖项*/])</pre>
</div>
<h1>二、监听参数</h1>
　　类组件在绑定事件、解绑事件、设定定时器、查找 dom 的时候，是通过 componentDidMount、componentDidUpdate、componentWillUnmount 生命周期来实现的，而 useEffect 会在组件每次 render 之后调用，就相当于这三个生命周期函数，只不过可以通过传参来决定是否调用。
　　其中注意的是，useEffect 会返回一个回调函数，作用于清除上一次副作用遗留下来的状态，如果该 useEffect 只调用一次，该回调函数相当于 componentWillUnmount 生命周期。
决定useEffect中各部分代码角色的是第二个参数：
<ul>
<li>什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate</li>
<li>传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount</li>
<li>传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行</li>
</ul>
<div class="cnblogs_code">
<pre> 1 function App () {
 2 const [ count, setCount ] = useState(0)
 3 const [ width, setWidth ] = useState(document.body.clientWidth)
 4 const onChange = () => {
 5 setWidth(document.body.clientWidth)
 6 }
 7 //最简单用法
 8 useEffect(() => {
 9 //只有方法体，相当于componentDidMount和componentDidUpdate中的代码
10 document.title = count;
11 })
12 //加返回值用法
13 useEffect(() => {
14 //添加监听事件，相当于componentDidMount和componentDidUpdate中的代码
15 window.addEventListener('resize', onChange, false);
16 //返回的函数用于解绑事件，相当于componentWillUnmount中的代码
17 return () => {
18 window.removeEventListener('resize', onChange, false)
19 }
20 })
21 //加空数组参数用法
22 useEffect(() => {
23 // 相当于 componentDidMount
24 window.addEventListener('resize', onChange, false)
25 return () => {
26 // 相当于 componentWillUnmount
27 window.removeEventListener('resize', onChange, false)
28 }
29 }, []);
30 //加监听值用法
31 useEffect(() => {
32 //只有当count的值发生变化，此函数才会执行
33 console.log(`count change: count is ${count}`)
34 }, [ count ]);
35 return (
36 <div>
37 页面名称: { count }
38 页面宽度: { width }
39 <button onClick={() => { setCount(count + 1)}}>点我</button>
40 </div>
41 )
42 }</pre>
</div>
　　其实Function Component 不存在生命周期，把 Class Component 的生命周期概念搬过来试图对号入座只是一种辅助记忆手段，Function Component 仅描述 UI 状态，React 会将其同步到 DOM，仅此而已。
<h1>三、使用优化</h1>
　　我们在使用useState的时候，经常碰到capture value的问题，比如下面代码会输出5而不是3：
<div class="cnblogs_code">
<pre> 1 const App = () => {
 2 const = React.useState(5);
 3 const printTime = () => {
 4 setTimeout(() => console.log(temp), 3000);
 5 };
 6 return (
 7 <div onClick={() => {
 8 printTime();
 9 setTemp(3);
10 }}
11 >clickMe</div>
12 );
13 };</pre>
</div>
　　在printTime函数执行的那个 Render 过程里，temp 的值可以看作常量 5，执行 setTemp(3) 时会交由一个全新的 Render 渲染，所以不会执行printTime函数。而 3 秒后执行的内容是由 temp 为 5 的那个 Render 发出的，所以结果自然为 5。
　　原因就是 temp、printTime 都拥有 Capture Value 特性。而useEffect 也一样具有 Capture Value 的特性。
　　利用 useRef 就可以绕过 Capture Value 的特性。可以认为 ref 在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。也可以简洁的认为，ref 是 Mutable 的，而 state 是 Immutable 的。
<div class="cnblogs_code">
<pre> 1 function Example() {
 2 const = useState(0);
 3 const latestCount = useRef(count);
 4 useEffect(() => {
 5 //设置最新变量的引用
 6 latestCount.current = count;
 7 setTimeout(() => {
 8 //读取引用指向的最新值
 9 console.log(`You clicked ${latestCount.current} times`);
10 }, 3000);
11 });
12 return (
13 <div>
14 You clicked {count} times
15 <button onClick={() => setCount(count + 1)}>Click me</button>
16 </div>
17 );
18 }</pre>
</div>
  
来源：https://www.cnblogs.com/guanghe/p/14178482.html

頁: [1]

琼殿技术论坛's Archiver

React函数式组件值之useEffect()