如何快速提升网站流量,客户拒绝做网站的理由,广州市官网网站建设价格,在网站文字上做笔记一、先简单介绍一下闭包:
闭包是 JavaScript 中的重要概念#xff0c;它指的是一个函数可以“记住”并访问其词法作用域#xff0c;即使在这个函数的外部被执行。简单来说#xff0c;闭包是由函数及其相关的环境组合而成的。
闭包的特性
函数内部可以访问外部变量:
闭包…一、先简单介绍一下闭包:
闭包是 JavaScript 中的重要概念它指的是一个函数可以“记住”并访问其词法作用域即使在这个函数的外部被执行。简单来说闭包是由函数及其相关的环境组合而成的。
闭包的特性
函数内部可以访问外部变量:
闭包允许一个函数访问其外部作用域中的变量即使这个函数在外部被调用。
保持状态:
闭包可以用来保持状态因为它可以“记住”外部变量的值。
私有变量:
通过闭包可以创建私有变量这些变量不能被外部代码直接访问只能通过闭包内部的函数进行访问和修改。
简单示例:
匿名函数持久化存储了外部count的值(保持状态)
function createCounter() {let count 0; // count 是一个私有变量return function() {count 1; // 访问外部变量 countreturn count; // 返回当前的 count 值};
}const counter createCounter();console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3
二、在React中使用useState产生闭包:
import React, { useState } from react;const Counter () {const [count, setCount] useState(0);const increment () {setCount(count 1); // 这里使用了捕获的 count 值setCount(count 1); // 这次仍然使用的是同样的捕获值};return (divpCount: {count}/pbutton onClick{increment}Increment/button/div);
};export default Counter;
当你点击按钮时increment 函数会调用 setCount 两次但由于 count 是在函数创建时捕获的值这导致 count 只增加 1而不是 2。(内部访问外部变量,由于内部两次访问的count的值是一样的,所以无论调用多少次,这只导致count只能增加一次) 解决方法:函数式的更新
所以为了避免这个问题,React采用函数形式的更新方式,以此来访问最新的状态值:
import React, { useState } from react;const Counter () {const [count, setCount] useState(0);const increment () {setCount(count 1); // 这里使用了捕获的 count 值setCount(count 1); // 这次仍然使用的是同样的捕获值};return (divpCount: {count}/pbutton onClick{increment}Increment/button/div);
};export default Counter;
三、 useCallback的依赖项:
创建一个外部的useState:
const [todoList, setTodoList] useState([]);为什么要添加todolist的依赖项?
使用了依赖项:
const openCheckModal useCallback((id) {setCurrentData(() todoList.filter(item item.id id));setShowCheckModal(true);
}, [todoList]); 查看定义: useCallback缓存函数: 它确保只有在依赖项变化时才重新创建函数从而避免子组件不必要的重新渲染。 解释:
由于闭包的问题,内部使用了外部变量(todolist),当外部变量更新的时候需要更新到最新的状态,换句话说,在初始化的时候 const openCheckModal 这个变量只加载了一次,由于闭包的问题,todolist存储的一直是初始化的todolist,当todolist改变的时候,此时也应该去动态更新当前这个const 变量 这样不会导致闭包的出现也可以使得内部引用到的是外部最新的数据 在下面的例子中也使用了todolist,为什么只有第一个要添加todolist的依赖项呢? 不使用依赖项
const addItem useCallback((value) {const dataItem {id: new Date().getTime(),content: value,completed: false};setTodoList((todoList) [...todoList, dataItem]);setInputShow(false);
}, []);
由于todolist形参传递,引用来自useState定义的变量,无关与addItem这个变量,也不会产生闭包,所以不需要传递todolist依赖项
总结:
当你将外部变量放入依赖数组中时有几个要点需要理解
保持一致性: 如果在回调函数内部使用了某个外部变量例如 props 或 state将这个变量放入依赖数组中可以确保你使用的是最新的值。这避免了闭包问题即在回调函数中引用的变量是旧值。不必要的重新调用: 如果依赖数组中的变量发生变化但回调函数并没有被调用例如函数没有被某个事件触发那么不会造成逻辑错误。只有在实际调用这个回调函数时内部逻辑会基于最新的依赖值执行。
要想使用最新的值,就需要动态更新当前useCallback,添加外部变量的依赖项,以便获取最新的数据
