Reactjs 当React功能组件重新渲染时,是否重新分配分配的值&;功能?
如果像这样的代码通过Reactjs 当React功能组件重新渲染时,是否重新分配分配的值&;功能?,reactjs,use-effect,rerender,Reactjs,Use Effect,Rerender,如果像这样的代码通过useffect的依赖项重新呈现 /。。。 常数测试=()=>{ // ... const value1=“test1” 常量func1=()=>{ //做点什么 } useffect(()=>{ const value2=“test2” 常量func2=()=>{ //做点什么 } }(某物) 返回( // ... ) }根据文件: Useffect做什么?通过使用这个钩子,您可以告诉React组件在渲染后需要执行某些操作。React将记住您传递的函数(我们将其称为“ef
useffect
的依赖项重新呈现
/。。。
常数测试=()=>{
// ...
const value1=“test1”
常量func1=()=>{
//做点什么
}
useffect(()=>{
const value2=“test2”
常量func2=()=>{
//做点什么
}
}(某物)
返回(
// ...
)
}
根据文件:
Useffect做什么?通过使用这个钩子,您可以告诉React组件在渲染后需要执行某些操作。React将记住您传递的函数(我们将其称为“effect”),并在执行DOM更新后调用它。在这种情况下,我们设置了文档标题,但也可以执行数据获取或调用其他命令式API
此外,它不会重新呈现代码,而是在传递给它的依赖项更改时再次运行代码
描述如何解决由于每次渲染后清理或应用效果而导致的性能问题
此外,您还可以使用释放分配的内存(如果不是自动释放的话)或在运行代码(setTimeOut等)
后运行一些副作用。
基本上,在返回函数中执行useEffect之后要运行的所有操作:
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
简短的回答,是的。每次函数运行时,旧值将被垃圾收集,新的原语值将被分配到内存中,新的引用将被创建到函数和对象 但真正的问题是,答案“不是那么短”是“它是否在很大程度上影响性能?”。答案是。。。视情况而定。在大多数情况下,它不会()。但在某些情况下,您需要进行一些更改,以便使用
useCallback
和usemo
进行性能优化
还值得一提的是(如中所述),useffect
中的触发器不一定会导致重新渲染(DOM绘制),因为此过程首先发生在虚拟DOM上,并且只有在必要时才会在真实DOM中持久化
我将在这里留下一些关于这次讨论的其他参考资料
(另请看回复)
value1&value2&func1&func2是否重新分配给内存
简言之,答案是肯定的
如果你看看它是什么,就会更清楚:Test
是一个函数,所以每次调用该函数时,函数范围内的所有变量(花括号)都会被重新声明和赋值
让我们深入了解一下细节:
value1
和func1
位于函数体中,因此每次调用函数时都会声明和分配它们,它们根本不相关,只有相同的名称
value2
和func2
在一个useffect钩子中声明,并且声明了一个依赖项(sth
),这意味着这两个变量仅在第一次渲染之后和每一次其他渲染之后重新声明和分配,前提是sth
变量相对于上一次渲染更改了其值
如果要优化value1
,使其在每次渲染时都不会更改,可以通过以下方式使用usemo
挂钩:
const value1 = React.useMemo(() => {
return "test1"; //here you might have a more complicate way to determine value1
}, []); //array of dependencies like for `useEffect`, so `value1` will be recalculated only if any of the values provided in here change. by leaving it empty value1 will always be the **same** variable
您也可以使用useCallback
hook对函数进行类似的优化