40行代码把Vue3的响应式集成进React做状态管理_vue.js

来源:脚本之家  责任编辑:小易  

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!--响应式导航部分--> <header role="banner"> <nav role="navigation" class="navbar navbar-static-top navbar-default"> <div class="container "> <div class="navbar-header"> <!--设置手风琴式的navbar,然后类navbar-toggle包装在屏幕大于992px,隐藏--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <!--这里的span.icon-bar 是用来在按钮中画三条线--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html" rel="external nofollow" rel="external nofollow" ><img src="img/logo.png" alt="Bootstrappin'" width="120"></a> <!--这里的商标图一定要设置宽度--> </div> <!--这里的类collapse保证默认包裹的菜单是隐藏的,如果 替换为 in 则显示--> <div class="navbar-collapse collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html" rel="external nofollow" rel="external nofollow" > <span class="icon fa fa-home "></span> Home</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <span class="icon fa fa-desktop"></span> Portfolio</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <span class="icon fa fa-group "></span> Team</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <span class="icon fa fa-envelope "></span> Contact</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container --> </nav> </header> 这是我跟着做的一个实例,看上面第一个注释,button定义了类navbar-toggle。navbar-toggle其中的一个样式是媒体查询。 //bootstrap.css @media (min-width: 992px) { .navbar-toggle { display: none; } } 然后我又查看了下navbar.less文件。发现 //navbar.less .navbar-toggle { position: relative; float: right; margin-right: @navbar-padding-horizontal; padding: 9px 10px; .navbar-vertical-align(34px); background-color: transparent; border: 1px solid transparent; border-radius: @border-radius-base; // Bars .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .icon-bar + .icon-bar { margin-top: 4px; } @media (min-width: @grid-float-breakpoint) { //@grid-float-breakpoint display: none; } } //variables.less @grid-float-breakpoint: @screen-sm-min; //想要改成992px这里就要用这个 @grid-float-breakpoint: @screen-md-min; //-------- @screen-sm: 768px; @screen-sm-min: @screen-sm; @screen-md: 992px; @screen-md-min: @screen-md; @screen-desktop: @screen-md-min; // Large screen / wide desktop // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; @screen-lg-desktop: @screen-lg-min; 所以,如果你想修改默认的折叠断点,就将上面的媒体查询变量 @grid-float-breakpoint:     @screen-sm-min; 修改为其他Bootstrap定义的断点,当然也可以自定义一个断点变量。然后重新编译为css文件即可。 注:最好把 variables.less 复制一份为 _variables.lss。navbar.less 复制一份 _navbar.less。然后在复制的文件上修改。最后将 bootstrap.less 复制一份 __bootstrap 将其中的导入 //__bootstrap.less //@import "navbar.less"; @import "_navbar.less"; //@import "variables.less"; @import "_variables.less"; 修改完,编译自定义的 __bootstrap.less 即可。 以上所述是小编给大家介绍的Bootstrap响应式导航由768px变成992px的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!www.zgxue.com防采集请勿采集本网。

前言

vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中。

第二个是上下居中 如果图片本身不够大,可以再加颜色值来衬托,及时显示器再大两侧也能有颜色垫底。 上述是居中的方法,如果再想做成轮播,我这里有现成代码,如有需求可以

如果我们想把它集成到React中,可行吗?来试一试吧。

媒体查询,在不同的屏幕宽度范围下使用不同的容器宽度。

使用示例

话不多说,先看看怎么用的解解馋吧。

你去下载个bootstrap,然后按照他的使用手册一步一步的来,也许你就能找到点感觉了。在他的框架下按照手册来,你自己写的东西也都是响应的。

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

// store.tsimport { reactive, computed, effect } from '@vue/reactivity';export const state = reactive({ count: 0,});const plusOne = computed(() => state.count + 1);effect(() => { console.log('plusOne changed: ', plusOne);});const add = () => (state.count += 1);export const mutations = { // mutation add,};export const store = { state, computed: { plusOne, },};export type Store = typeof store;

响应式布局,里面基本不能出现px,宽度改为100%,px替换为rem

// Index.tsximport { Provider, useStore } from 'rxv'import { mutations, store, Store } from './store.ts'function Count() { const countState = useStore((store: Store) => { const { state, computed } = store; const { count } = state; const { plusOne } = computed; return { count, plusOne, }; }); return ( <Card hoverable style={{ marginBottom: 24 }}> <h1>计数器</h1> <div className="chunk"> <div className="chunk">store中的count现在是 {countState.count}</div> <div className="chunk">computed值中的plusOne现在是 {countState.plusOne.value}</div> <Button onClick={mutations.add}>add</Button> </div> </Card> );}export default () => { return ( <Provider value={store}> <Count /> </Provider> );};

Vue的响应式系统 Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅 就会导致页面更新的时候 computed 值为旧数据。 这里我们只看其中一部分代码 functi

可以看出,store的定义只用到了@vue/reactivity,而rxv只是在组件中做了一层桥接,连通了Vue3和React,然后我们就可以尽情的使用Vue3的响应式能力啦。

盒子里面再从左至右摆放,严格控制高度宽度不出现超出和错位。这样可以最大避免在进行响应式处理的时候出现各种问题,增加代码量,代码的精简和最开始从布局入手直接决定

预览

可以看到,完美的利用了reactive、computed的强大能力。

以live800的为例,是需要管理员后台进行配置管理操作,选择相应的图片和代码安装在网站上的

分析

从这个包提供的几个核心api来分析:

源码下载(一) 响应式 什么是响应式设计,这里我就不描述了。在hwSlider中,我们通过CS .arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line

effect(重点)

'rgba(151,187,205,1)', data: [60, 10, 40, 30, 80, 30, 20] }] } 设置全局选项 在代码中我已 在下面的例子中,第一行是将第一个数据集的第二个柱形的数值设为 60。如果你在这时

effect其实是响应式库中一个通用的概念:观察函数,就像Vue2中的Watcher,mobx中的autorun,observer一样,它的作用是收集依赖。

千际软件的网站都用响应式框架, 代码一对对都很清楚, 改起来也很方便

它接受的是一个函数,它会帮你执行这个函数,并且开启依赖收集,

响应式web就是在基本html基础上添加自适应浏览器宽度样式 以达到网页自适应各种分辨率屏幕的目的

这个函数内部对于响应式数据的访问都可以收集依赖,那么在响应式数据被修改后,就会触发更新。

混乱啊按照格式写呢改起比较麻烦错或者期修改形增自身工作量

最简单的用法

。应该不需要响应式。 不过先考虑一下你的图片的最小尺寸是多少。比如你的希望的最小分辨率是800x600的,而图片正好是800以内,那你直接把图片当作背景来处理就行了。

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

const data = reactive({ count: 0 })effect(() => { // 就是这句话 访问了data.count // 从而收集到了依赖 console.log(data.count)})data.count = 1// 控制台打印出1

那么如果把这个简单例子中的

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

() => { // 就是这句话 访问了data.count // 从而收集到了依赖 console.log(data.count)}

这个函数,替换成React的组件渲染,是不是就能达成响应式更新组件的目的了?

reactive(重点)

响应式数据的核心api,这个api返回的是一个proxy,对上面所有属性的访问都会被劫持,从而在get的时候收集依赖(也就是正在运行的effect),在set的时候触发更新。

ref

对于简单数据类型比如number,我们不可能像这样去做:

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

let data = reactive(2)// 😭oopsdata = 5

这是不符合响应式的拦截规则的,没有办法能拦截到data本身的改变,只能拦截到data身上的属性的改变,所以有了ref。

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

const data = ref(2)// 💕okdata.value= 5

computed

计算属性,依赖值更新以后,它的值也会随之自动更新。其实computed内部也是一个effect。

拥有在computed中观察另一个computed数据、effect观察computed改变之类的高级特性。

实现

从这几个核心api来看,只要effect能接入到React系统中,那么其他的api都没什么问题,因为它们只是去收集effect的依赖,去通知effect触发更新。

effect接受的是一个函数,而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数,如果我们把这个schedule替换成对应组件的更新呢?要知道在hook的世界中,实现当前组件强制更新可是很简单的:

useForceUpdate

export const useForceUpdate = () => { const [, forceUpdate] = useReducer(s => s + 1, 0); return forceUpdate;};

这是一个很经典的自定义hook,通过不断的把状态+1来强行让组件渲染。

而rxv的核心api: useStore接受的也是一个函数selector,它会让用户自己选择在组件中需要访问的数据。

那么思路就显而易见了:

    把selector包装在effect中执行,去收集依赖。 指定依赖发生更新时,需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。

这样不就实现了数据变化,组件自动更新吗?

简单的看一下核心实现

useStore和Provider

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

import React, { useContext } from 'react';import { useForceUpdate, useEffection } from './share';type Selector<T, S> = (store: T) => S;const StoreContext = React.createContext<any>(null);const useStoreContext = () => { const contextValue = useContext(StoreContext); if (!contextValue) { throw new Error( 'could not find store context value; please ensure the component is wrapped in a <Provider>', ); } return contextValue;};/** * 在组件中读取全局状态 * 需要通过传入的函数收集依赖 */export const useStore = <T, S>(selector: Selector<T, S>): S => { const forceUpdate = useForceUpdate(); const store = useStoreContext(); const effection = useEffection(() => selector(store), { scheduler: forceUpdate, lazy: true, }); const value = effection(); return value;};export const Provider = StoreContext.Provider;

这个option是传递给Vue3的effectapi,

scheduler规定响应式数据更新以后应该做什么操作,这里我们使用forceUpdate去让组件重新渲染。

lazy表示延迟执行,后面我们手动调用effection来执行

{ scheduler: forceUpdate, lazy: true,}

再来看下useEffection和useForceUpdate

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

import { useEffect, useReducer, useRef } from 'react';import { effect, stop, ReactiveEffect } from '@vue/reactivity';export const useEffection = (...effectArgs: Parameters<typeof effect>) => { // 用一个ref存储effection // effect函数只需要初始化执行一遍 const effectionRef = useRef<ReactiveEffect>(); if (!effectionRef.current) { effectionRef.current = effect(...effectArgs); } // 卸载组件后取消effect const stopEffect = () => { stop(effectionRef.current!); }; useEffect(() => stopEffect, []); return effectionRef.current};export const useForceUpdate = () => { const [, forceUpdate] = useReducer(s => s + 1, 0); return forceUpdate;};

也很简单,就是把传入的函数交给effect,并且在组件销毁的时候停止effect而已。

流程

    先通过useForceUpdate在当前组件中注册一个强制更新的函数。 通过useContext读取用户从Provider中传入的store。 再通过Vue的effect去帮我们执行selector(store),并且指定scheduler为forceUpdate,这样就完成了依赖收集。 那么在store里的值更新了以后,触发了scheduler也就是forceUpdate,我们的React组件就自动更新啦。

就简单的几行代码,就实现了在React中使用@vue/reactivity中的所有能力。

优点:

    直接引入@vue/reacivity,完全使用Vue3的reactivity能力,拥有computed, effect等各种能力,并且对于Set和Map也提供了响应式的能力。后续也会随着这个库的更新变得更加完善的和强大。 vue-next仓库内部完整的测试用例。 完善的TypeScript类型支持。 完全复用@vue/reacivity实现超强的全局状态管理能力。 状态管理中组件级别的精确更新。 Vue3总是要学的嘛,提前学习防止失业!

缺点:

由于需要精确的收集依赖全靠useStore,所以selector函数一定要精确的访问到你关心的数据。甚至如果你需要触发数组内部某个值的更新,那你在useStore中就不能只返回这个数组本身。

举一个例子:

普通网站只有后台只有一套网站,排版等没有变化,在手机等其他设备中浏览,响应式网页在服务器中有多套,根据反馈的不同的设备显示不同的一套代码,建网站用.top域名

function Logger() { const logs = useStore((store: Store) => { return store.state.logs.map((log, idx) => ( <p className="log" key={idx}> {log} </p> )); }); return ( <Card hoverable> <h1>控制台</h1> <div className="logs">{logs}</div> </Card> );}

这段代码直接在useStore中返回了整段jsx,是因为map的过程中回去访问数组的每一项来收集依赖,只有这样才能达到响应式的目的。

源码地址:https://github.com/sl1673495/react-composition-api

到此这篇关于40行代码把Vue3的响应式集成进React做状态管理的文章就介绍到这了,更多相关Vue3 响应式集成React状态管理内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

五月盛夏的汴京的一个早晨,昨夜刚下过雨,闷热非常,很潮湿,主人刚醒;嗅到昨夜消溽用的沉香残味,听到周围的鸟叫,更显静寂,并起身看鸟儿那可爱的动作。屋外荷花雨后正盛,在曰出之后,荷叶上的雨珠渐蒸干。清平的水面上挺立着一枝枝荷花在风中摇摆……之后作者陷入回忆,思念故乡,梦回故乡……内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue3 的响应式和以前有什么区别,proxy 无敌?
  • 稍微学一下vue的数据响应式(vue2及vue3区别)
  • 茶余饭后聊聊vue3.0响应式数据那些事儿
  • vue3.0 响应式系统源码逐行分析讲解
  • vue3.0数据响应式原理详解
  • 你了解vue3.0响应式数据怎么实现吗
  • vue + vuex todolist的实现示例代码
  • vue.js 动态为img的src赋值方法
  • 在vue-cli搭建的项目中增加后台mock接口的方法
  • vue点击切换颜色的方法
  • vue组件之间的数据传递方法详解
  • 巧妙运用v-model实现父子组件传值的方法示例
  • vue插槽原理与用法详解
  • 通过vue手动封装on、emit、off的代码详解
  • vue绑定的点击事件阻止冒泡的实例
  • 详解mpvue开发小程序小总结
  • 帮我把这段html代码改成响应式布局,采纳100分
  • Bootstrap响应式导航由768px变成992px的实现代码
  • 响应式网站是用相同的代码不同的css吗
  • 响应式布局代码怎么写
  • css的图片响应式代码
  • 响应式代码的原理规范是什么
  • 如何实现html响应式网页?代码如何实现?(求给关键代码)
  • 响应式网站与普通网站的区别在哪里?
  • html代码改成响应式布局,同事支持PC和手机
  • vue响应式系统之observe、watcher、dep的源码解析
  • 响应式网页设计怎么学习 怎么提高学习效率
  • 怎么样制作响应式“在线客服”悬浮图片 ,需要可以响应式的代...
  • jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下...
  • 使用Chart.js图表库制作漂亮的响应式表单
  • 响应式网站有人会做吗?代码编写条理清晰的!
  • 响应式Web设计和非响应式Web设计 在代码上有什么区别吗?
  • 改下面的网页代码为响应式如可修改 电脑上要求居中显示2行3...
  • Dreamweaver中响应式网页代码如何写
  • 我用代码写的网页,需要加入响应式布局,可是在电脑上排版是正...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.jsvue3 的响应式和以前有什么区别,proxy 无敌?稍微学一下vue的数据响应式(vue2及vue3区别)茶余饭后聊聊vue3.0响应式数据那些事儿vue3.0 响应式系统源码逐行分析讲解vue3.0数据响应式原理详解你了解vue3.0响应式数据怎么实现吗vue + vuex todolist的实现示例代码vue.js 动态为img的src赋值方法在vue-cli搭建的项目中增加后台mock接口的方法vue点击切换颜色的方法vue组件之间的数据传递方法详解巧妙运用v-model实现父子组件传值的方法示例vue插槽原理与用法详解通过vue手动封装on、emit、off的代码详解vue绑定的点击事件阻止冒泡的实例详解mpvue开发小程序小总结vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue调用高德地图实例代码解决vue a对象赋值给b对象,修改b属性会影详解vue.js 2.0 如何使用axiosvue-better-scroll 的使用实例代码详解vue-router启用history模式下的开发及非根vue基于vuex、axios拦截器实现loading效果iview upload组件多个文件上传的示例代码详解element-ui设置下拉选择切换必填和非五分钟搞懂vuex实用知识(小结)vue--vuex详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved