React入门--第四天--useState原理

最新推荐文章于 2024-08-19 21:36:26 发布

王大锤_code

最新推荐文章于 2024-08-19 21:36:26 发布

阅读量1.3k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/weixin_44809439/article/details/109704578

版权

本文解析了React Hooks中的useState原理，通过分析源码探讨了useState如何工作，包括其与组件渲染的关系、如何处理多个useState的情况以及遇到的问题和解决方案。最后，文章总结了useState的工作机制和在组件状态管理中的作用。

摘要由CSDN通过智能技术生成

Hooks原理解析

分析useState原理和源码
useRef的作用
useContext的作用
Vue3对比React

function App() {
   
  const [n, setN] = React.useState(0);
  return (
    <div className="App">
      {
   n}
      <button onClick={
   ()=>setN(n+1)}>+1<button>
    </div>
  );
}

React.render(<App />, rootElement);

首次渲染 render<App />—>调用App()—>得到虚拟div—>创建真实div—>用户点击button，调用setN(n+1)—>再次render<App />—>再次调用App()—>得到虚拟div—>DOM diff—>更新真的div
每次调用App()，都会运行useState(0)
但是每次运行useState得到的n是变化的，就是正确的n
执行setN的时候n不会变，App()会重新渲染

这个useState做了啥

分析

setN

setN一定会改变数据x(中间变量)，将n+1存入x
setN一定会触发<App />重新渲染
useState
useState肯定会从x读取n的最新的值
x
每个组件有自己的数据x，我们将其命名为state

尝试实现React.useState

const  myUseState = initialValue => {
   
  var state = initialValue;
  const setState = newState {
   
    state = newState;
    render();
  }
  return [state, setState];
}

//不用在意render的实现
const render = () => ReactDOM.render(<App