以下是一个简化版的 useState
的源码示例,用于演示其基本实现原理:
let state; // 用于存储状态值
let listeners = []; // 用于存储状态变化时的监听函数数组
function useState(initialValue) {
state = state || initialValue; // 如果状态值还未初始化,则使用初始值进行初始化
function setState(newState) {
state = newState; // 更新状态值
// 触发状态变化时的监听函数
for (let i = 0; i < listeners.length; i++) {
listeners[i]();
}
}
function getState() {
return state; // 返回当前状态值
}
// 注册状态变化时的监听函数,并返回当前状态值及状态更新函数
listeners.push(() => {
const value = getState();
setState(value);
});
return [getState(), setState]; // 返回当前状态值及状态更新函数
}
上述代码中,我们使用了闭包来保存状态值 state
和状态变化时的监听函数数组 listeners
。useState
函数接收一个初始值 initialValue
,并返回一个由当前状态值和状态更新函数组成的数组。
在 setState
函数中,我们更新了状态值 state
,并遍历 listeners
数组,触发每个监听函数,以通知组件的状态发生了变化。
在组件中使用 useState
的示例代码:
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
这是一个简化版的 useState
实现,仅用于演示其基本原理。实际的 React 源码中还包含了更多的优化和处理,例如处理多个状态值、批量更新等。这个简化版的实现可以帮助你更好地理解 useState
的基本工作原理。