前端学习案例-React Hooks『useState』实现

 第一步 安装环境

 npm init -y

 yarn add vite -D

 第二步 演示usestate的功能

const {useState}=React

function App(){
    const [count,setCount]=useState(0)
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={()=>setCount(count+1)}>＋1</button>
        </div>
    )
}

ReactDOM.render(
    <App/>,
    document.querySelector("#app")
)

第三步 手动封装替代

const MyReact = (() => {
  let _state;
  function useState(initialState) {
    debugger
    _state = _state == undefined ? initialState : _state;
    return [_state, _setState];
  }
  const _setState = (newState) => {
    _state = newState;
    render();
  };
  return {
    useState,
  };
})();
function render() {
  ReactDOM.render(<App />, document.querySelector("#app"));
}
const { useState } = MyReact;
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>＋1</button>
    </div>
  );
}
ReactDOM.render(<App />, document.querySelector("#app"));

实现-1操作

const { useState } = React;
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>＋1</button>
      <button onClick={()=>setCount(count=> count - 1)}>-1</button>
    </div>
  );
}
ReactDOM.render(<App />, document.querySelector("#app"));

手动封装替代

const MyReact = (() => {
  let _state;
  function useState(initialState) {
    _state = _state == undefined ? initialState : _state;
    return [_state, _setState];
  }
  const _setState = (newState) => {
    if(typeof newState==="function"){
        _state=newState(_state)
    }else{
        _state = newState;
    }
    render();
  };
  return {
    useState,
  };
})();
function render() {
  ReactDOM.render(<App />, document.querySelector("#app"));
}
const { useState } = MyReact;
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>＋1</button>
      <button onClick={()=>setCount(count=> count - 1)}>-1</button>
    </div>
  );
}
ReactDOM.render(<App />, document.querySelector("#app"));

实现判断操作

const { useState } = React;
function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  return (
    <div>
      <h1>{count}</h1>
      <h1>{flag ? "打开状态" : "关闭状态"}</h1>
      <button onClick={() => setCount(count + 1)}>＋1</button>
      <button onClick={() => setCount((count) => count - 1)}>-1</button>
      <button onClick={() => setFlag((flag) => (flag = !flag))}>
        {flag ? "关闭" : "打开"}
      </button>
    </div>
  );
}
ReactDOM.render(<App />, document.querySelector("#app"));

手动封装

const MyReact = (() => {
  const states = [],
    stateSetters = [];
  var stateIndex = 0;
  function createState(initialState, stateIndex) {
    return states[stateIndex] !== undefined ? states[stateIndex] : initialState;
  }
  function createStateSetter(stateIndex) {
    return function (newState) {
      if (typeof newState === "function") {
        states[stateIndex] = newState(states[stateIndex]);
      } else {
        states[stateIndex] = newState;
      }
      render();
    };
  }
  function useState(initialState) {
    states[stateIndex] = createState(initialState, stateIndex);
    if (!stateSetters[stateIndex]) {
      stateSetters.push(createStateSetter(stateIndex));
    }
    const _state = states[stateIndex];
    const _setState = stateSetters[stateIndex];
    stateIndex++;
    return [_state, _setState];
  }
  return {
    useState,
  };
  //   let _state=[]
  //   function useState(initialState) {
  //     _state = _state == undefined ? initialState : _state;
  //     return [_state, _setState];
  //   }
  //   const _setState = (newState) => {
  //     if(typeof newState==="function"){
  //         _state=newState(_state)
  //     }else{
  //         _state = newState;
  //     }
  //     render();
  //   };
  //   return {
  //     useState,
  //   };
  function render() {
    stateIndex = 0;
    ReactDOM.render(<App />, document.querySelector("#app"));
  }
})();

const { useState } = MyReact;
function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  return (
    <div>
      <h1>{count}</h1>
      <h1>{flag ? "打开状态" : "关闭状态"}</h1>
      <button onClick={() => setCount(count + 1)}>＋1</button>
      <button onClick={() => setCount((count) => count - 1)}>-1</button>
      <button onClick={() => setFlag((flag) => (flag = !flag))}>
        {flag ? "关闭" : "打开"}
      </button>
    </div>
  );
}
ReactDOM.render(<App />, document.querySelector("#app"));