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

简介: 前端学习案例-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"));
相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
78 9
|
1月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
115 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
36 1
|
1月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
66 2
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
41 2
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
39 2
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
1月前
|
前端开发 Android开发 开发者
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第26天】近年来,React Native凭借其跨平台开发能力在移动应用开发领域迅速崛起。本文将探讨React Native的优势与挑战,并通过示例代码展示其应用实践。React Native允许开发者使用同一套代码库同时构建iOS和Android应用,提高开发效率,降低维护成本。它具备接近原生应用的性能和用户体验,但也面临平台差异、原生功能支持和第三方库兼容性等挑战。
46 0