Node.js实现PC端类微信聊天软件(二)

Github StackChat

用到的React-Router

React-Router是React路由的解决方案之一,也可以使用别的库

安装

npm install react-router --save-dev

路由配置

react-router主要提供了几个组件来进行路由之间结构的组织

  1. Router 所有路由组件的根
  2. Route 路由组件
  • path属性 匹配路径
  • component属性 匹配路径渲染的组件
  1. IndexRoute 配置默认页面
  • component 渲染的组件
React.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      {/* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)
  1. 根据路由的之间的嵌套关系和匹配路径,每个组件里都会有一个children属性来对应路由下的子组件
<div>
  this.props.children
<div>
  1. 如果一个路由要同时更新多个组件
component={{component1:xxx,component2:xxx}}

History

React Router 是建立在 history 之上的。一个 history 知道如何去监听浏览器地址栏的变化

import { browserHistory } from 'react-router'

组件生命周期

componentDidMount() //渲染组件
componentWillUnmount() //卸载组件

今日完成

今天在使用React-Router发现比较不适合之前UI的设计,折腾了一会选择放弃Router,直接使用最顶层的State来进行切换渲染组件

render() {
      return (
        <div>
          <LeftNav onChangeLeft={this.changeLeftSidebar} onChangeRight={this.changeRightSidebar}/>
          {this.componentMap[this.state.LeftSidebar]}
          <ChatBar />
          <Sidebar species={this.state.RightSidebar}/>
        </div>
      )
    };

将顶层组件内部的State修改方法传递给子组件通过回调进行修改和直接传递要渲染组件的信息

原文地址:https://www.cnblogs.com/secoding/p/11122971.html

时间: 2024-10-04 12:24:18

Node.js实现PC端类微信聊天软件(二)的相关文章

Node.js实现PC端类微信聊天软件(四)

Github StackChat 学习回顾 React和Electron结合 TypeError: fs.existsSync is not a function 在React组件里引入electron时候就会报这个错,主要原因是在React里不能引入Node.js的模块 解决方法 Webpack target属性 先展开Create-React-App所有配置 npm run eject 在webpack.config.js下添加配置 // other configs... module.ex

Node.js实现PC端类微信聊天软件(一)

Github StackChat 技术栈 写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写 Electron React Material-UI React-Router Redux Express Socket.io MongoDB 现在已完成前端大部分界面的构建(无状态),所以记录一下 环境搭建 Create-React-App 利用React脚手架Create-React-App,再写入依赖

Node.js实现PC端类微信聊天软件(三)

Github StackChat Redux学习回顾 Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适 Redux主要提供三个东西来进行状态管理 1. Action 表达要进行的动作,也就是通过view层触发,来进行派发来改变全局state action创建函数 也就是只返回一个action的函数 export const SignUpEmailChange = (value) => ({ type: 'SIGNUP_EMAIL

Node.js系列:Buffer类的使用

客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buffer中存的数据默认为16进制. 1.创建Buffer对象 在Node.js中,Buffer类是一个可以在任何模块中不使用的全局类,不要单独加载.可以使用New关键字来创建该类的实例对象. Buffer类有三种形式的构造函数: 第一种:将缓存区大小(以字节为单位)作为构造函数的参数 var size

react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单.发送消息.表情(动图),图片.视频预览,浏览器截图粘贴发送等功能. 二.技术选型 MVVM框架:react / react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具

基于Node.js + socket.io实现WebSocket的聊天DEMO

原文摘自我的前端博客,欢迎大家来访问 http://hacke2.github.io 简介 最近看Node.js和HTML5,练手了一个简易版的聊天DEMO,娱乐一下 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一, 为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验, 于是socket.io诞生. 简答来说socket.io具体以下特点: 1.socket.io设计的目标是支持任何的浏览器

WebSocket+node.js创建即时通信的Web聊天服务器

1.使用nodejs-websocket nodejs-websocket是基于node.js编写的一个后端实现websocket协议的库, 连接:https://github.com/sitegui/nodejs-websocket. (1)安装 在项目目录下通过npm安装:npm install nodejs-websocket (2)创建服务器 //引入nodejs-websocket var ws = require("nodejs-websocket"); //调用creat

php微信支付(仅pc端扫码支付模式二)详细步骤.----仅适合第一次做微信开发的程序员

本人最近做了微信支付开发,是第一次接触.其中走了很多弯路,遇到的问题也很多.为了让和我一样的新人不再遇到类似的问题,我把我的开发步骤和问题写出来,以供参考. 开发时间是2016/8/10,所以微信支付的版本也是对应此时的版本. 一.前期准备: 首先你们公司开通微信支付功能后,会收到一份邮件,里面有账户相关信息,一般有:微信支付商户号,商户平台登录帐号,商户平台登录密码,申请对应的公众号,公众号APPID. 1.下载demo:用上面信息登陆“微信商户平台”,>>>(右上角开发文档)>

js实现PC端与客户端自适应

我们可以通过js来判断页面对象进行显示, 在外部引入css设定ID 1 <link rel="stylesheet" id="css" type="text/css" href="css/pc.css"/> js代码如下 var newDoc=document.open("text/html","replace"); //重新加载引入 window.onload=functi