【React全解3】原理详解，一次性搞懂useState

时间：2024-11-11 13:11:09

目录

  • useState简介
  • useState的简单使用
  • 手写实现useState
  • 总结
  • 参考

一、useState 简介

返回一个有状态值和一个函数来更新它。在初始渲染期间，返回的状态（状态）与作为第一个参数（initialState）传递的值相同。setState 函数用于更新状态。它接受一个新的状态值，并排队等待重新渲染该组件。

在后续重新渲染期间，useState 返回的第一个值将始终是应用更新后的最新状态。

注意： React 保证 setState 函数身份是稳定的，并且在重新渲染时不会改变。这就是为什么可以安全地从 useEffect 或 useCallback 依赖项列表中省略的原因。

useState 相当于我们在原生 JS 中定义变量。而只有使用这种方法定义变量，React 才能知道相应的变量。

二、useState 的简单使用

注意：在组件的定义中，首字母必须大写。

1、在类组件中使用 useState
class Classes extends  {
  constructor(props) {
    super(props);
     = {
      n: 0,
    };
  }
  add() {
    ({ n:  + 1 });
  }
  render() {
    return (
      <div className="son">
        类组件--n:{}
        <button onClick={() => ()}>+1</button>
        <Functions />
      </div>
    );
  }
}
2、在函数组件中使用 useState
const Functions = () => {
  const [n, setN] = (0);
  return (
    <div className="grandson">
      函数组件--n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};
3、App 组件

使用 ()渲染 App。

function App() {
  return (
    <div className="app">
      useState的简单使用
      <Classes />
    </div>
  );
}
(<App />, ("root"));
4、最终效果呈现

在这里插入图片描述

三、手写实现 useState

1、分析

  • useState 有两个状态，一个是 n，另外一个是 setN。

  • setN 是修改数据 n 的，将修改后的 n 存入 state。

  • setN 修改数据后一定会触发<App/>的重新渲染（re-render）。

  • useState 一定会从 state 读取最新的 n 值。

  • 每个组件都有自己的数据 state。

2、尝试实现
  • 第1次写myUseState
function myUseState(initialValue) {
  let state = initialValue;
  const setState = (newValue) => {
    state = newValue; //更新state值，
    render(); //触发重新渲染
  };
  return [state, setState];
}
/* 粗糙的渲染 */
const render = () => {
  (<App />, ("root"));
};
// 使用myUseState
const App = () => {
  const [n, setN] = myUseState(0);
  return (
	  <div classNam="App">
		 <p>n:{n}</p>
		 <button onClick={()=>{setN(n+1)}}>n+1</button> 
	  </div>
	  );
};
(<App />, ("root"));

第一次总结

运行第一次写的myUseState时发现，页面完全没有变化。n值也没有发生改变。经分析，是因为每次调用myUseState时会重置state的值。经过改进，必须将state写在函数的外面。

  • 第2次写myUseState
let _state;
function myUseState(initialValue) {
  _state = _state===undefined? initialValue:_state;
  const setState = (newValue) => {
    _state = newValue; //更新state值，
    render(); //触发重新渲染
  };
  return [_state, setState];
}
/* 粗糙的渲染 */
const render = () => {
  (<App />, ("root"));
};
// 使用myUseState
const App = () => {
  const [n, setN] = myUseState(0);
  return (
	  <div classNam="App">
		 <p>n:{n}</p>
		 <button onClick={()=>{setN(n+1)}}>n+1</button> 
	  </div>
	  );
};
(<App />, ("root"));

第二次总结

运行成功，页面中的n发生了变化！

但是问题又来了，如果一个组件用了两个useState怎么办？_state的值不是会发生冲突吗？继续改进完善myUseState。将_state做成数组。

  • 第3次写myUseState
let _state=[];
let index=0;
function myUseState(initialValue) {
  int currentIndex=index;	//引入中间变量currentIndex就是为了保存当前操作的下标index。
  _state[currentIndex] = _state[currentIndex]===undefined? initialValue:_state[currentIndex];
  const setState = (newValue) => {
    _state[currentIndex] = newValue; 
    render(); 
  };
  index+=1;// 每次更新完state值后，index值+1
  return [_state[currentIndex], setState];
}
const render = () => {
  index=0;	//重要的一步，必须在渲染前后将index值重置为0，不然index会一种增加1
  (<App />, ("root"));
};
// 使用myUseState
const App = () => {
  const [n, setN] = myUseState(0);
  const [m, setM] = myUseState(0);
  return (
	  <div classNam="App">
		 <p>n:{n}</p>
		 <button onClick={()=>{setN(n+1)}}>n+1</button> 
		 <p>m:{m}</p>
		 <button onClick={()=>{setM(m+1)}}>n+1</button> 
	  </div>
	  );
};
(<App />, ("root"));

第三次总结

运行成功！n,m值都能单独的发生变化。

四、总结

本次我只是简单分析了React实现useState的思想和代码。至于React真正实现useState的方式肯定是比我手写的myUseState更加高级和高效的。

  • useState调用顺序

若第一次渲染的时候，n是第一个数据，m是第二个数据，k是第三个。…

则第二次渲染的时候必须保证完全的一致。

React不允许出现以下类似的代码，否则会出现报错信息：React Hook "" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks

译：有条件地调用React Hook“ ”。在每个组件中，必须以完全相同的顺序调用React Hooks来渲染react-hooks / rules-of-hooks

let n=2;
if(n%2){
	const [m,setM]=(0);
}
/* 以上代码React会直接报错 */

在这里插入图片描述

  • 每个组件命名的问题

App用了_state和index,那其他组件用什么？放在全局作用域重名了怎么办？

解决办法1：每个组件都创建一个_state和index。

解决办法2：放在组件对应的虚拟节点对象上

注意：

React的节点应该是FiberNode,_state的真实名称为memorizedState,index的实现使用了链表。

五、参考

React Hooks原理

React官网

相关文章