React
文章平均质量分 59
前端小小白zyw
一只路过的小码农。。。
展开
-
Webpack 4.X + React + Node + Mongodb 从零搭建聊天室(二)
上篇文章我们把框基本搭建起来,本篇文章,我们具体实现功能逻辑预计开发功能: 用户注册、登录 用户进入/离开聊天室,通知当前聊天室内所有用户 用户可实时与所有人聊天 用户离线保留聊天列表、聊天记录 单个用户新增群聊,所有用户可以看到 点击用户头像,新增私聊 用户可实时单人私聊 聊天室记录用户未读消息资源链接:https://github.com/zhangyongwnag/chat_room文章目录一、建立socket连接1、下载2、客户端创建连接3、测试交互二、客户端添加状态管原创 2020-07-23 18:39:54 · 460 阅读 · 0 评论 -
Webpack 4.X + React + Node + Mongodb 从零搭建聊天室(一)
前端时间把create-react-app脚手架搭建的react项目中的webpack版本从1.X更新到4.X,踩了不少坑,于是今天准备利用webpack 4.X从零搭建react聊天室( 去TM的脚手架,一辈子不更新,wdnmd )预计开发功能: 用户注册、登录 用户离线保留聊天列表、聊天记录 用户进入/离开聊天室,通知当前聊天室内所有用户 用户可实时与所有人聊天 单个用户新增群聊,所有用户可以看到 点击用户头像,新增私聊 用户可实时单人私聊 聊天室记录用户未读消息资源链接:ht原创 2020-07-18 18:15:34 · 593 阅读 · 0 评论 -
Node.js + express + react + echarts 从零搭建数据可视化平台
最近负责搭建公司 大屏可视化平台,前端用到 vue + echarts ,后端 java 以及 大数据 提供数据支持。过程中踩过许多坑,于是准备在项目上线后,自己搭建响应式数据可视化平台。技术栈reactechartsnode.jsexpress标签响应式布局Websocket服务Velocity.js 提供动画支持...原创 2020-05-26 16:45:57 · 3892 阅读 · 4 评论 -
React-router 5.0项目中统一动态设置路由页面Title
React项目中想在不同的路由页面都有自己的独立title,并且统一设置。可以在每个路由页面的 componentDidMount() 钩子回调中 document.title = ‘title’ 来设置,但是这样太麻烦,每个路由页面都需要单独设置于是,研究出一种更好的方式,在Index.js 入口处统一设置 document.title = ‘title’:我的项目是把路由和设置独立写的,...原创 2019-09-24 12:13:35 · 6512 阅读 · 1 评论 -
React实现购物车基本功能(React-redux)
本案例利用react-redu实现购物车功能,概括有以下步骤:1、利用veux操作商品的选中状态2、全选与取消全选3、动态reduce计算价格4、结算取出商品id演示网址:操作演示:...原创 2019-09-23 18:26:36 · 4414 阅读 · 4 评论 -
react-redux 中state数据发生变化,页面并没有渲染
上一篇文章我们讲了如何在 React项目中添加 react-redux 状态管理 ,遗留一个比较棘手的问题:当我们直接修改state中的数据时,发现数据发生了变化,但是页面并未渲染代码:let data = { list:[], status:false,}export default function (state = data, action) { switch (act...原创 2019-09-19 15:28:50 · 4295 阅读 · 0 评论 -
React 项目中添加 react-redux 状态管理
redux作为一个单独的库,他可以搭配,Angular,vue,react以及jQuery使用,今天我们再项目中搭配react-redux来使用:Redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree 。创建store的时候需要传入reducer,真正能改变store中数据...原创 2019-09-11 18:42:55 · 905 阅读 · 0 评论 -
React中自定义事件this指向问题
this是基于函数的执行环境(也就是上下文)绑定的,React组件生命周期函数中this的上下文就是组件实例。你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。首先调用 constructor() 函数, this.state 的this上下文就是该实例对象;同理,render() 函数中 this也是该实例。class Bar extends React....原创 2019-05-09 16:19:37 · 1432 阅读 · 2 评论 -
react-router 4.0 路由切换时Prompt跳转提示
“遇到一些需求,用户在某个页面修改数据,离开时,提示用户:当前页面有数据修改,是否确认离开?” 遇到这样的需求,总结以下解决办法:利用 react-router 提供的 Prompt 组件:Prompt组件有俩个属性:message:用于显示提示的文本信息。when:传递布尔值,相当于标签的开关,默认是 true,设置成 false 时,失效。import React, { Compon...原创 2019-09-06 18:08:08 · 1461 阅读 · 1 评论 -
利用React官网动画库(react-transition-group)实现过渡动画
官方提供了 react-transition-group 库来实现过渡动画,与vue官方提供的 transition 很类似,利用它实现过渡动画。一、安装npm : npm install react-transition-group --saveyarn : yarn add react-transition-group二、使用官网给出了4种API,分别是 Transition 、...原创 2019-09-06 16:12:36 · 1321 阅读 · 0 评论 -
React中组件通信方式(二):PubSub订阅与发布
前端时间写了React子组件传值父组件方式:子组件利用props调用父组件的自定义事件,即可实现传值。这种方式的局限性很大,如果我组件嵌套的很深,岂不是相当麻烦?下面介绍一种不错的方式:PubSub消息订阅与发布一、安装:npm i pubsub-js -S二、使用:在要使用的组件引入:import PubSub from ‘pubsub-js’在父组件的componentWill...原创 2019-05-16 15:24:44 · 2753 阅读 · 0 评论 -
React中子父组件通信方式(一):自定义事件
React中,父组件传值子组件可利用props,子组件传值父组件利用自定义事件。案例:父组件传list到子组件,点击遍历后的每一条数据,通过父组件的chooise方法传到父组件中,最后赋值result// 父组件class App extends React.Component { constructor(){ super(); this.state = { list:['苹...原创 2019-05-15 13:36:32 · 3724 阅读 · 0 评论 -
React实现自定义双向数据流
vue和ng都是双向数据流、VM双向数据绑定。而react是单向数据流,model层的数据流向view层。今天,我们就尝试自定义实现双向数据流。案例:组件中通过监听input内容变化,进而赋值。class Bar extends React.Component { constructor(){ super(); this.state = { msg:'' } } //......原创 2019-05-15 14:03:31 · 933 阅读 · 2 评论 -
React-router 页面跳转的三种方式
方式一:import { withRouter } from 'react-router-dom'class Index extends Component { ... changePage = () => { let { history } = this.props history.push({pathname: '/Home'}) }}...export de...原创 2019-09-05 18:53:35 · 27152 阅读 · 0 评论 -
React-router 5.0 利用高阶函数实现路由嵌套(web)
如今 react-router 已经升级到v5.0版本,v4.0版本做个较大的改革,代码中依然使用v3.0版本的写法,于是准备整改为v4.0以上版本,遇到了很多坑,于是做个笔记。首先,对比一下 v3.0 和 v4.0 版本:v3.0提供了react-router-dom:是基于react-router,加入了在浏览器运行环境下的一些功能,例如:Link 、NavLink、BrowserRou...原创 2019-09-05 17:17:15 · 4348 阅读 · 1 评论