众所周知,JavaScript
中的闭包(Closures
)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT
也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React
代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编写复杂且性能很好的 React
应用,就必须了解闭包。所以,今天我们一起来学习以下几点:
- 什么是闭包,它们是如何出现的,为什么我们需要它们。
- 什么是过期的闭包,它们为什么会出现。
- React 中导致过期闭包的常见场景是什么,以及如何应对它们。
警告:如果你从未接触过 React
中的闭包,本文可能会让你脑浆迸裂,在阅读本文时,请确保随身携带足够的巧克力来刺激你的脑细胞。
一个常见的问题
比如现在有这样一个场景:你正在实现一个带有几个输入字段的表单。其中一个字段是来自某个外部的组件库。你无法访问它的内部结构,所以也没办法解决它的性能问题。但你确实需要在表单中使用它,因此你决定用 React.memo
封装它,以便在表单中的状态发生变化时尽量减少它的重新渲染。类似这样:
const HeavyComponentMemo = React.memo(HeavyComponent);
const Form = () => {
const [value, setValue] = useState();
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo />
</>
);
};
这个 Heavy
组件只接受一个字符串 props
(比如 title
)和一个 onClick
回调。当你点击该组件中的 "完成" 按钮时,就会触发这个回调。如果你想在点击时提交表单数据。这也很简单:只需将 title
和 onClick
这两个 props
传递给它即可。
const HeavyComponentMemo = React.memo(HeavyComponent);
const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// submit our form data here
console.log(value);
};
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};
现在,你又会面临一个新的问题。我们知道,React.memo
封装的组件上的每个 props
都必须是原始值,或者在重新渲染时是保持不变的。否则,memoization
就是不起作用的。所以,从技术上讲,我们需要将 onClick
包装为 useCallback
:
const onClick = useCallback(() => {
// submit data here
}, []);
但我们也知道,useCallback
钩子应在其依赖关系数组中声明所有依赖关系。因此,如果我们想在其中提交表单数据,就必须将该数据声明为依赖项:
const onClick = useCallback(() => {
// submit data here
console.log(value);
// adding value to the dependency
}, [value]);
现在的难题是:即使我们的 onClick
被 memo
化了,但每次表单有重新输入时,它仍然会发生变化。因此,我们的性能优化毫无用处。
下面让我们寻找一下其他的解决方案。React.memo
有一个叫做比较函数的东西,它允许我们对 React.memo
中的 props
比较进行更精细的控制。通常,React
会自行比较前后的 props
。如果我们提供这个函数,它将依赖于其返回的结果。如果返回结果为 true
,那么 React
就会知道 props
是相同的,组件就不应该被重新渲染,听起来正是我们需要的。我们只需要更新一个 props
,那就是我们的 title
,所以不会很复杂:
const HeavyComponentMemo = React.memo(
HeavyComponent,
(before, after) => {
return before.title === after.title;
},
);
这样,完整的代码就是这样的:
const HeavyComponentMemo = React.memo(
HeavyComponent,
(before, after) => {
return before.title === after.title;
},
);
const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// submit our form data here
console.log(value);
};
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};
起作用了,我们在输入框中输入内容,Heavy
组件不会重新渲染,性能也不会受到影响。
但是我们又遇到了新的问题:如果在输入框中输入内容,然后按下按钮,我们在 onClick
中打印的值是 undefined
。但它不可能是 undefined
,如果我在 onClick
之外添加 console.log
,它就会正确打印。
// those one logs it correctly
console.log(value);
const onClick = () => {
// this is always undefined
console.log(value);
};
这是怎么回事呢?
这就是所谓的 "过期闭包 "问题。为了解决这个问题,我们首先需要了解一下 JavaScript
中最令人恐惧的话题:闭包及其工作原理。
JavaScript、作用域和闭包
让我们从函数和变量开始,当我们在 JavaScript
中声明一个普通函数或者尖头函数会发生什么呢?
function something() {
//
}
const something = () => {};
通过这样的操作,我们创建了一个局部作用域:代码中的一个区域,其中声明的变量从外部是不可见的。
const something = () => {
const value = 'text';
};
console.log(value); // not going to work, "value" is local to "something" function
每次我们创建函数时都会发生这种情况。在另一个函数内部创建的函数将具有自己的局部作用域,对于外部函数不可见。
const something = () => {
const inside = () => {
const value = 'text';
};
console.log(value); // not going to work, "value" is local to "inside" function
};
然而,在相反的方向就不一样了,最里面的函数可以访问到外部声明的所有变量。
const something = () => {
const value = 'text';
const inside = () => {
// perfectly fine, value is available here
console.log(value);
};
};
这就是通过创建所谓的“闭包”来实现的。内部函数“闭包”了来自外部的所有数据,它本质上就是所有“外部”数据的快照,这些数据被冻结并单独存储在内存中。如果我们不是在 something
函数内创建该值,而是将其作为参数传递并返回内部函数呢:
const something = (value) => {
const inside = () => {
// perfectly fine, value is available here
console.log(value);
};
return inside;
};
我们会得到这样的行为:
const first = something('first');
const second = something('second');
first(); // logs "first"
second(); // logs "second"
我们调用 something
函数时传入值 first
,并将结果分配给一个变量。结果是对内部声明的函数的引用,形成闭包。从现在开始,只要保存这个引用的第一个变量是存在的,我们传递给它的值 “first”
就会被冻结掉,并且内部函数将可以访问它。
第二次调用也是同样的情况:我们传递了一个不同的值,形成一个闭包,返回的函数也将永远可以访问该变量。
在 something
函数中本地声明的任何变量都是如此:
const something = (value) => {
const r = Math.random();
const inside = () => {
// ...
};
return inside;
};
const first = something('first');
const second = something('second');
first(); // logs random number
second(); // logs another random number
这就像拍摄一些动态场景的照片一样:只要按下按钮,整个场景就会永远 “冻结” 在照片中。下次按下按钮不会改变之前拍摄的照片中的任何内容。
在 React
中,我们一直都在创建闭包,甚至没有意识到,组件内声明的每个回调函数都是一个闭包:
const Component = () => {
const onClick = () => {
// closure!
};
return <button onClick={onClick} />;
};
useEffect
或 useCallback
钩子中的所有内容都是一个闭包:
const Component = () => {
const onClick = useCallback(() => {
// closure!
});
useEffect(() => {
// closure!
});
};
它们都可以访问组件中声明的 state
、props
和局部变量:
const Component = () => {
const [state, setState] = useState();
const onClick = useCallback(() => {
// perfectly fine
console.log(state);
});
useEffect(() => {
// perfectly fine
console.log(state);
});
};
组件内的每个函数都是一个闭包,因为组件本身只是一个函数。
过期闭包的问题
但是,以上所有的内容,如果你之前没有接触过闭包的话会觉得挺新奇的,但其实还是挺简单的,你多创建几个函数,就会变得很自然了。我们写了这么久的 React
甚至也不需要理解 “闭包” 的概念。
那么问题出在哪里呢?为什么闭包是 JavaScript
中最可怕的东西之一,并让如此多的开发者感到痛苦?
因为只要引起闭包的函数存在引用,闭包就会一直存在。而函数的引用只是一个值,可以赋给任何东西。
比如这个函数,它返回一个完全无辜的闭包:
const something = (value) => {
const inside = () => {
console.log(value);
};
return inside;
};
问题是每次调用都会重新创建内部函数,如果我决定尝试缓存它,会发生什么情况呢?类似这样:
const cache = {};
const something = (value) => {
if (!cache.current) {
cache.current = () => {
console.log(value);
};
}
return cache.current;
};
从表面上看,这段代码并没有什么问题。我们只是创建了一个名为 cache
的外部变量,并将内部函数分配给 cache.current
属性。然后,我们就不会再每次都重新创建这个函数了,而是直接返回已经保存的值。
但是,如果我们尝试多调用几次,就会发现一个奇怪的现象:
const first = something('first');
const second = something('second');
const third = something('third');
first(); // logs "first"
second(); // logs "first"
third(); // logs "first"
无论我们用不同的参数调用多少次 something
函数,记录的值始终是第一个参数!
我们刚刚就创建了一个所谓的 "过期闭包"。每个闭包在创建时都是冻结的,当我们第一次调用 something
函数时,我们创建了一个值变量中包含 "first"
的闭包。然后,我们把它保存在 something
函数之外的一个对象中。
当我们下一次调用 something
函数时,我们将返回之前创建的闭包,而不是创建一个带有新闭包的新函数。这个闭包会与 "first"
变量永远冻结在一起。
为了修复这种问题,我们可以在每次值发生变化时重新创建函数及其闭包,类似这样:
const cache = {};
let prevValue;
const something = (value) => {
// check whether the value has changed
if (!cache.current || value !== prevValue) {
cache.current = () => {
console.log(value);
};
}
// refresh it
prevValue = value;
return cache.current;
};
将值保存在变量中,以便我们可以将下一个值与前一个值进行比较。如果变量发生了变化,则刷新 cache.current
闭包。现在,它就会正确打印变量,如果我们比较具有相同值的函数,比较结果将返回 true
:
const first = something('first');
const anotherFirst = something('first');
const second = something('second');
first(); // logs "first"
second(); // logs "second"
console.log(first === anotherFirst); // will be true
React 中的过期闭包:useCallback
我们刚刚实现了与 useCallback
钩子几乎一模一样的功能!每次使用 useCallback
时,我们都会创建一个闭包,并缓存传递给它的函数:
// that inline function is cached exactly as in the section before
const onClick = useCallback(() => {
}, []);
如果我们需要访问此函数内的 state
或 props
,我们需要将它们添加到依赖项数组中:
const Component = () => {
const [state, setState] = useState();
const onClick = useCallback(() => {
// access to state inside
console.log(state);
// need to add this to the dependencies array
}, [state]);
};
这个依赖关系数组会让 React
刷新缓存的闭包,就像我们在比较 value !== prevValue
时所做的一样。如果我忘记了这个数组,我们的闭包就会过期:
const Component = () => {
const [state, setState] = useState();
const onClick = useCallback(() => {
// state will always be the initial state value here
// the closure is never refreshed
console.log(state);
// forgot about dependencies
}, []);
};
每次我们触发该回调时,所有将被打印的内容都是 undefined
。
React 中的过期闭包:Refs
在 useCallback
和 useMemo
钩子之后,引入过期闭包问题的第二个最常见的方法是 Refs
。
如果我尝试对 onClick
回调使用 Ref
而不是 useCallback
钩子,会发生什么情况呢?有些文章会建议通过这样做来 memoize
组件上的 props
。从表面上看,它确实看起来更简单:只需将一个函数传递给 useRef
并通过 ref.current
访问它,没有依赖性,不用担心。
const Component = () => {
const ref = useRef(() => {
// click handler
});
// ref.current stores the function and is stable between re-renders
return <HeavyComponent onClick={ref.current} />;
};
然而,组件内的每个函数都会形成一个闭包,包括我们传递给 useRef
的函数。我们的 ref
在创建时只会初始化一次,并且不会自行更新。这基本上就是我们一开始创建的逻辑,只是我们传递的不是值,而是我们想要保留的函数。像这样:
const ref = {};
const useRef = (callback) => {
if (!ref.current) {
ref.current = callback;
}
return ref.current;
};
因此,在这种情况下,一开始(即组件刚刚初始化时)形成的闭包将会被保留,永远不会刷新。当我们试图访问存储在 Ref
中的函数内部的 state
或 props
时,我们只能得到它们的初始值:
const Component = ({ someProp }) => {
const [state, setState] = useState();
const ref = useRef(() => {
// both of them will be stale and will never change
console.log(someProp);
console.log(state);
});
};
为了解决这个问题,我们需要确保每次我们试图访问的内容发生变化时,ref
值都会更新。本质上,我们需要实现 useCallback
钩子的依赖数组所做的事情。
const Component = ({ someProp }) => {
// initialize ref - creates closure!
const ref = useRef(() => {
// both of them will be stale and will never change
console.log(someProp);
console.log(state);
});
useEffect(() => {
// update the closure when state or props change
ref.current = () => {
console.log(someProp);
console.log(state);
};
}, [state, someProp]);
};
React 中的过期闭包:React.memo
最后,我们回到文章的开头,回到引发这一切的谜团。让我们再来看看有问题的代码:
const HeavyComponentMemo = React.memo(
HeavyComponent,
(before, after) => {
return before.title === after.title;
},
);
const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// submit our form data here
console.log(value);
};
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};
每次点击按钮时,都会打印 "undefined
" 。我们在 onClick
中的值从未更新过,你能告诉我为什么吗?
当然,这又是一个过期闭包。当我们创建 onClick
时,首先使用默认状态值(undefined
)形成闭包。我们将该闭包与 title
属性一起传递给我们的 Memo
组件。在比较函数中,我们只比较了标题。它永远不会改变,它只是一个字符串。比较函数始终返回 true
,HeavyComponent
永远不会更新,因此,它保存的是对第一个 onClick
闭包的引用,并具有冻结的 undefined
值。
既然我们知道了问题所在,那么该如何解决呢?说起来容易做起来难...
理想情况下,我们应该在比较函数中对每个 props
进行比较,因此我们需要在其中加入 onClick
:
(before, after) => {
return (
before.title === after.title &&
before.onClick === after.onClick
);
};
不过,在这种情况下,这意味着我们只是重新实现了 React
的默认行为,做的事情与不带比较函数的 React.memo
完全一样。因此,我们可以放弃它,只保留 React.memo(HeavyComponent)
。
但这样做意味着我们需要将 onClick
包装为 useCallback
。但这取决于 state
,我们又回到了原点:每次状态改变时,我们的 HeavyComponent
都会重新渲染,这正是我们想要避免的。
我们还可以尝试很多其他方法,但我们不必进行任何大量的重构就能摆脱闭包陷阱,有一个很酷的技巧可以帮助我们。
使用 Refs 逃离闭包陷阱
让我们暂时摆脱 React.memo
和 onClick
实现中的比较函数。只需一个具有 state
和 memo
化 HeavyComponent
的 pure component
即可:
const HeavyComponentMemo = React.memo(HeavyComponent);
const Form = () => {
const [value, setValue] = useState();
return (
<>
<input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
<HeavyComponentMemo title="Welcome to the form" onClick={...} />
</>
);
}
现在我们需要添加一个 onClick
函数,该函数在重新渲染的时候会保持稳定,但也可以访问最新状态而无需重新创建。我们将把它存储在 Ref
中,所以我们暂时添加一个空的:
const Form = () => {
const [value, setValue] = useState();
// adding an empty ref
const ref = useRef();
};
为了让函数能够访问最新状态,每次重新渲染时都需要重新创建函数,这是无法避免的,这也是闭包的本质,与 React
无关。我们应该在 useEffect
中修改 Ref
,而不是直接在渲染中修改 Ref
,所以我们可以这样做:
const Form = () => {
const [value, setValue] = useState();
// adding an empty ref
const ref = useRef();
useEffect(() => {
// our callback that we want to trigger
// with state
ref.current = () => {
console.log(value);
};
// no dependencies array!
});
};
不带依赖数组的 useEffect
会在每次重新渲染时触发。这正是我们想要的,所以现在在我们的 ref.current
中,我们有一个每次重新渲染都会重新创建的闭包,因此打印的 state
始终是最新的。
但我们不能把 ref.current
直接传递给 memoized
组件。每次重新渲染时,这个值都会不同, memoization
将无法工作。
const Form = () => {
const ref = useRef();
useEffect(() => {
ref.current = () => {
console.log(value);
};
});
return (
<>
{/* Can't do that, will break memoization */}
<HeavyComponentMemo onClick={ref.current} />
</>
);
};
所以,我们创建一个封装在 useCallback
中的空函数,并且不依赖于此函数。
const Form = () => {
const ref = useRef();
useEffect(() => {
ref.current = () => {
console.log(value);
};
});
const onClick = useCallback(() => {
// empty dependency! will never change
}, []);
return (
<>
{/* Now memoization will work, onClick never changes */}
<HeavyComponentMemo onClick={onClick} />
</>
);
};
现在,memoization
可以完美地工作,因为 onClick
从未改变。但有一个问题:它什么也会不做。
这里有一个神奇的窍门:我们只需在 memoized
回调中调用 ref.current
即可:
useEffect(() => {
ref.current = () => {
console.log(value);
};
});
const onClick = useCallback(() => {
// call the ref here
ref.current();
// still empty dependencies array!
}, []);
注意到 ref
并不在 useCallback
的依赖关系中吗?ref
本身是不会改变的。它只是 useRef
钩子返回的一个可变对象的引用。但是,当闭包冻结周围的一切时,并不会使对象不可变或被冻结。对象存储在内存的不同部分,多个变量可以包含对完全相同对象的引用。
const a = { value: 'one' };
// b is a different variable that references the same object
const b = a;
如果我通过其中一个引用更改对象,然后通过另一个引用访问它,更改就会出现:
a.value = 'ConardLi';
console.log(b.value); // will be "ConardLi"
在我们的案例中,这种情况并没有发生:我们在 useCallback
和 useEffect
中拥有完全相同的引用。因此,当我们更改 useEffect
中 ref
对象的 current
属性时,我们可以在 useCallback
中访问该属性,这个属性恰好是一个捕获了最新状态数据的闭包。完整代码如下:
const Form = () => {
const [value, setValue] = useState();
const ref = useRef();
useEffect(() => {
ref.current = () => {
// will be latest
console.log(value);
};
});
const onClick = useCallback(() => {
// will be latest
ref.current?.();
}, []);
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="你好 code秘密花园"
onClick={onClick}
/>
</>
);
};
现在,我们获得了两全其美的结果:Heavy
组件被适当地 memoization
,不会因为每次状态变化而重新渲染。它的 onClick
回调可以访问组件中的最新数据,而不会破坏 memoization
。现在,我们可以安全地将所需的一切发送到后端!
最后
下面我们再总结一下本文中提到的知识点:
- 每次在另一个函数内部创建一个函数时,都会形成闭包。
- 由于
React
组件只是函数,因此内部创建的每个函数都会形成闭包,包括useCallback
和useRef
等钩子。 - 当一个形成闭包的函数被调用时,它周围的所有数据都会被 "冻结",就像快照一样。
- 要更新这些数据,我们需要重新创建 "闭包 "函数。这就是使用
useCallback
等钩子的依赖关系允许我们做的事情。 - 如果我们错过了依赖关系,或者没有刷新分配给
ref.current
的闭包函数,闭包就会 "过期"。 - 在
React
中,我们可以利用Ref
是一个可变对象这一特性,从而摆脱 "过期闭包" 的问题。我们可以在过期闭包之外更改ref.current
,然后在闭包之内访问它,就可以获取最新的数据。
React
太复杂了,还是用 Vue
吧 ... 你怎么看?唤应在评论区留言。
本文译自:https://www.developerway.com/posts/fantastic-closures