从原理上解读useState钩子函数
发布网友
发布时间：2024-10-02 20:26
共1个回答
热心网友
时间：2024-11-04 09:44
返回一个数组，数组的第一个参数值是状态值，第二个参数值是设置状态的方法。
useState会判断传入的state是初始值还是已存在的值。
useState可能被多次调用
调用设置状态的方法后需要重新渲染组件。
手写useState第一步：用不同的数组来分别存放状态值和设置状态的方法letstates=[];letsetters=[];letstateId=0;第二步：判断useState传入的初始状态值是否已经存在存在用以前的，不存在则使用初始状态值
states[stateId]=states[stateId]?states[stateId]:initialState;第三步：通过状态的id来返回设置状态的方法，然后加入到设置方法的数组中注意：自定义的渲染函数必须能够操作全局的状态id.
setters.push(createSetter(stateId));functioncreateSetter(stateId){returnfunction(newState){states[stateId]=newState;myRender();}}functionmyRender(){stateId=0;ReactDOM.render(<App/>,document.querySelector('#root'));}第四步：返回第i个状态值和操作状态的方法，并对stateId+1letvalue=states[stateId];letsetter=setters[stateId];stateId++;return[value,setter]完整代码importReactfrom'react'importReactDOMfrom'react-dom'//自定义Hook/***@description:手写useState*@param{*}*@return{*}*/letstates=[];letsetters=[];letstateId=0;functioncreateSetter(stateId){returnfunction(newState){states[stateId]=newState;myRender();}}functionmyRender(){stateId=0;ReactDOM.render(<App/>,document.querySelector('#root'));}functionmyUseState(initialState){//判断state是否存在，存在则使用以前的，不存在则使用初始值states[stateId]=states[stateId]?states[stateId]:initialState;setters.push(createSetter(stateId));letvalue=states[stateId];letsetter=setters[stateId];stateId++;return[value,setter]}functionApp(){const[count,setCount]=myUseState(0);const[name,setName]=myUseState('张三');return(<div><h1>当前求和为：{count}</h1><buttononClick={()=>setCount(count+1)}>点我+1</button><h1>当前姓名为：{name}</h1><buttononClick={()=>setName('李四')}>点我切换姓名</button></div>)}ReactDOM.render(<App/>,document.querySelector('#root'));CodeSandBox在线实现地址在线实现
参考资料官方文档：useState
从源码剖析useState的执行过程
