一、起因&思路不知不觉，已经好几天没写博客了。。。近来除了研究React，还做了公司官网。。。一直想写一个原生js拖拽效果，又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果。首先，其实拖拽效果的思路是很简单的。主要就是三个步骤：1.onmousedown的时候，启动可拖拽事件，记录被拖拽元素的原始坐标参数。2.onmousemove的时候，实时记录鼠标移动的距离，结合被拖拽元素第一阶段的坐标参数，计算并设置新的坐标值。...
1.引入Swiper(用的是4.5.0版本) import Swiper from ‘swiper‘; //引入样式，还可以加上自己的样式 import ‘../../style/swiper.min.css‘; 2.在页面加载后和获取完数据后new一个swiper(如果数据没加载完就new会出现不能滑动现象) new Swiper(‘.swiper-container‘, { direction: ‘horizontal‘, observer: true, //修改swiper自己或子元素时，自动初始化swiper observeParents: true, //修改swip...
Portal 提供了一种将子节点渲染到存在于父节点以外的DOM节点的优秀方案；尽管 portal 可以被放置在 DOM 树中的任何地方，但在任何其他方面，其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 React 树， 且与 DOM 树 中的位置无关，那么无论其子节点是否是 portal，像 context 这样的功能特性都是不变的。这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 React 树*的祖先，即便这些元素并不是 *DOM 树 中...
/*** @Author Niuxy* @Date 2020/6/10 9:42 下午* @Description 多 selector 多线程的 NIO 服务端* 使用 NIO 时一定要摒弃 BIO 的阻塞思维，我们的代码面向的是事件，而不是连接* 至于多次事件完成一个连接的情况，我们可以通过 attachment 记录该连接上次事件处理的结果。* 上面做法的前提是一个连接只允许注册一个感兴趣的事件。*/publicclass CurrentReactor implements Runnable {// CPU 核心数int cpuNums = Runtime.getRunti...
这个demo只有一个reducer 所以合并reducer这个demo用不到 ，但是我写出来这样大家以后可以用到，很好用，管理多个reducer，因为只要用到redux就不会只有一个reducer所以这个合并reducer很好用。 需要的技术：react-redux redux实现状态管理 装饰器：transform-decorators-legacy下载 第一步下载transform-decorators-legacynpm install transform-decorators-legacy --save 第二步配置 在package.json 配置如下。 第三步 写...
1 import React,{Component,Fragment} from ‘react‘2 3class App extends Component {4 constructor(){5 super() // 要想使用this必须使用super 6this.state = {7 postList:[8 ‘item1‘,9 ‘item2‘, 10 ‘item3‘ 11 ], 12 inputValue:"test" 13 } 14 } 15 render(){ 16// jsx语法17return ( 18 <Fragment> 19 <ul> 20 { 21this.state.postL...
在React当中，父组件通过props给子组件传递属性的，但是当组件的嵌套层次非常多的时候，使用props传参就不是很方便了，此时可以用context来实现。类似于Vue里的provide/inject这一对选项组，实现的效果是一样的。React里的context只能由class组件来提供，然后class组件内的子组件就可以获取了,React里的conetxt有两种使用方法:childContextType ;经典的用法，相比较第二种方法性能不是很好createContext ;React16提供的一...
本篇文章给大家带来的内容是关于H5使用react组件实现拍照、选择图片上传，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前段时间项目重构，改成SSR的项目，但之前用的图片选择上传组件不支持SSR（server-side-render）。遂进行了调研，发现很多的工具。但有的太大，有的使用麻烦，有的不满足使用需求。决定自己写一个h5移动端图片上传组件。图片上传是一个比较普遍的需求，PC端还好，移动端就不是特别好做了。下...
在react项目开发中有一个需求是，页面滚动到tab所在位置时，tab要固定在顶部。实现的思路其实很简单，就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时，将tab的position变为fixed。在react中，我在state中设置一个navTop属性，切换这个属性的值为true或者false，然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed。一开始我是这样写的：import cs from classnames;class FixedTab extends React....
最近公司给公司里架设了私有的npm仓库，相应地也需要一个用来发布react组件用的脚手架，在这个过程中又又又又复习了一下webpack，在这里分享下脚手架搭建的过程。 首先，我们预期的脚手架具有如下功能 开发组件时可以实时预览对组件各种资源进行打包(js/css/图片等)一键打包发布1.创建项目脚手架的名字暂时取react-simple-component-boilerplate。 首先创建一个新目录用于放我们的文件: mkdir react-simple-component-boilerplate ...
如下所示： let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param {string} url 接口地址* @param {JSON} params body的请求参数* @return 返回Promise */ function uploadImage(url,params){return new Promise(function (resolve, reject) {let formData = new FormData();for (var key in params){formData.append(key, params[key]);}let fi...
上篇文章写到了redux实现组件数据共享的方法，但是在react中，redux作者提供了一个更优雅简便的模块实现react组件之间数据共享。那就是利用react-redux 利用react-redux实现react组件数据之间数据共享1.安装react-redux$ npm i --save react-redux2.从react-redux导入Prodiver组件将store赋予Provider的store属性,将根组件用Provider包裹起来。 import {Provider,connect} from react-redux ReactDOM.render( <Provider store={sto...
本篇文章主要介绍了react+redux的升级版todoList的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧又是很久不写博客了，最近在用蚂蚁金服的ant-design-pro写毕设，写着写着写不下去了，很多东西都不理解，不得不说大神写出来的东西都是需要花学习成本的，或者底子好，对于React新手来说就有点难了。所以就老老实实的认真看了下Redux到底如何使用，在这里推荐一下自己最近在看的书，写的算是比较...
实现要点页面布局 监听鼠标滚动事件 计算滚动位置进行对齐实现步骤 页面布局父元素采用flex布局且设置flex-wrap: nowrap使其子元素可以完全展开 子元素设置flex-shrink: 0使其能够不进行自适应缩小事件监听通过调用event.preventDefault()阻止浏览器默认行为 使用useRef()获取父元素的DOM元素，使用.current获取dom对象进行操作 设置父元素的wheel鼠标滚动监听事件，并进行对应的计算注意事项使用react onWheel事件进行阻止默认行为...
本篇文章主要介绍了React Native使用fetch实现图片上传的示例代码，现在分享给大家，也给大家做个参考。本文介绍了React Native使用fetch实现图片上传的示例代码，分享给大家，具体如下：普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象使用fetch上传图片代码封装如下：let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param...