react的hook 即为"钩子", 是 react 16.8 的新特性, 你可以在不写 class 的情况下使用 state 和其他的 react 特性。

1.react的注意事项

1. 只能在函数内部的最外层调用 Hook，不要在循环、条件判断或者子函数中调用
2. 只能在 React 的函数组件中调用 Hook，不要在其他 JavaScript 函数中调用  3.useEffect第二个参数传空数组，就相当于didMount

2.useState模拟实现初级版本

用一个变量来存全局变量state

import React from "react";
import ReactDOM from "react-dom";


const Hook = () => {
  const [num, setNum] = useState(0);
  const [hieght, setHeight] = useState(170);
  const handelAdd = () => {
    setNum(num + 1);
  };
  const handelAddH = () => {
    setHeight(hieght + 1);
  };


  return (
    <>
      <p>数字{num}</p>
      <p>身高{hieght}</p>
      <button onClick={handelAdd}>点击+1</button>
      <button onClick={handelAddH}>身高+1</button>
    </>
  );
};
export default Hook;

useState的 hook 编写

let state: any;
function useState<T>(initalState: T): [T, (newState: T) => void] {
  state = state || initalState;
  function setState(newState: T) {
    state = newState;
    render(); // 重新渲染页面 伪代码
  }
  return [state, setState];
}

会出现一个问题就是，只能使用一次 多次使用会出现问题，值会被覆盖掉

2.useState模拟实现升级版本

解决初级版本的问题，数组来存储数据，指针存储state下标（数组+下标的形式） 用单链表来实现的，原理一样

 const Hook = () => {
 cursor = 0; // 下标归0
 ............... // 代码同上面一样

  return (
    <>
     ............// 代码同上面一样
    </>
  );
};
export default Hook;

 

let stateArray: any = [];
let cursor: number = 0;
function useState<T>(initalState: T): [T, (newState: T) => void] {
  let currentCursor = cursor;
  stateArray[currentCursor] = stateArray[currentCursor] || initalState;
  function setState(newState: T) {
    stateArray[currentCursor] = newState;
    render(); // 重新渲染页面
  }
  ++cursor; //下标前移，提供给一个的调用
  return [stateArray[currentCursor], setState];
}

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。