用React实现小Q聊天机器人

前几篇讲过用Vue实现小Q聊天机器人，既然用了Vue，那React自然也是少不了的，本项目实现效果与vue实现的效果完全一样：

GitHub源码：https://github.com/baiyuliang/Qrobot_React

进入正题之前，我们来聊聊前端三剑客 angular，react，vue！

这三种框架的面世时间：angular>react>vue，angular出世这么早，但是为什么我们在国内常见的前端开发基本都是用的react或者vue呢？主要是angular的版本升级出现了断层，也就是新版本不兼容老版本，导致流失大量用户，另外angular框架量级比较重，直白点就是难用！就国内的互联网环境来看，这注定是流行不起来的！所以react成为了最流行的前端开发框架，而新出世的vue凭借着它的易用性也迅速成为了最火的前端开发框架！

据本人了解，就国内目前最火的几种前端或者跨端开发平台，基本都是基于react和vue这两种框架，例如：
1.weex基于vue（现在通过rax也间接支持react）
2.rn不必说了，基于react
3.taro 支持react和vue
4.uni-app 基于vue

可以说学习前端，除了最基础的js+html+css外，react和vue是必学框架，没商量！

回到本项目，接下来，我会基于本项目粗略的对react和vue的实现过程进行一个对比，但不会深入！

1.创建项目
本人较懒，不喜欢用命令行去创建项目再外加一堆配置，而是直接用WebStrom创建，跟前几篇vue创建项目一样：

创建完成即可运行！

2.项目结构
我这里进行一个完整项目对比：左vue，右react

3.页面结构、组件

vue的页面都是以.vue结尾的文件格式，其中包含了 templete，script，style，模板（html布局），js操作，css样式全在一个文件中实现，并且style提供scope属性，来确保css样式不会冲突，而vue创建组件同样也是创建.vue后缀文件，并声明组件名称name:XXX；

react的页面，没有特殊格式，全部为js，在这里大家有必要先了解一下JSX
react组件形式有两种：class组件和函数（function）组件，
class组件功能大而全，类似于Java的类，可以继承，有构造方法，静态方法，普通方法等，通过render()函数渲染DOM树，通过export default导出组件：

import React from 'react'class Page2 extends React.Component {constructor(props) {super(props);}render() {return (<div>page2</div>)}
}
export default Page2

函数组件功能比较单一，return jsx格式DOM树即可！

function Item() {return <div>Item</div>
}

react相当于将js，html糅合到了一块，而css则单独分离了出去，所以使用样式时必须创建对应的css文件，并通过import导入！但是需要注意的是，react并没有像vue一样提供scope，所以直接通过

import ‘xxx.css’

使用会导致样式冲突，解决办法有两个：一个是给class名加上前缀来保证类名唯一性，另一个是css模块化：

import Style from ‘xxx.css’<div className={Style.xxx}></div>

4.数据绑定
vue：通过v-model进行双向数据绑定；
react：单项数据绑定，只能通过state进行数据同步！
关于双向数据绑定好，还是单项数据绑定好，vue和react都有自己的解释，开发者也都有自己的理解，不用纠结于此！

5.网络请求
网络请求部分，两者倒没有什么不同，vue版小Q使用axios进行网络请求封装，而react可以直接拿来使用就可以了，没有任何区别！

6.跨域问题
vue在使用代理解决跨域时的方法，配置vue.config.js：

module.exports = {devServer: {proxy: {"/api": {target: 'https://api.ai.qq.com',changeOrigin: true,pathRewrite: {'^/api': '/'}}}}
};

react则配置setupProxy.js(注意文件放入位置)：

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use(createProxyMiddleware('/api', {  //`api`是需要转发的请求target: 'https://api.ai.qq.com',  // 这里是接口服务器地址changeOrigin: true,}))
}

当然，两者还有其它很多不同的地方，就不再一一列举了，这里贴出聊天主界面代码，完整代码可以去GitHub(Qrobot_React)下载:

import React from "react";
import {getChatResponse} from "../api/ApiChat";
import './Chat.scss'
import RightItem from "../components/RightItem";
import LeftItem from "../components/LeftItem";class Chat extends React.Component {constructor(props) {super(props);this.state = {text: '',msglist: [{id: 1,type: 1,content: '欢迎你！',me: false}]}}//调用接口getResponse = (text) => {getChatResponse(text).then(res => {this.state.msglist.push({id: this.state.msglist[this.state.msglist.length - 1].id + 1,type: 1,content: res.data.answer,me: false})this.setState({msglist: this.state.msglist,})})}//输入框数据改变时同步statechangeText = (e) => {this.setState({text: e.target.value})}//监听enter键onKeyup = (e) => {if (e.keyCode === 13) {this.send()}}//发送文本send = () => {if (this.state.text) {this.state.msglist.push({id: this.state.msglist[this.state.msglist.length - 1].id + 1,type: 1,content: this.state.text,me: true})this.setState({msglist: this.state.msglist,text: ''})this.getResponse(this.state.text)}}//自动滚动到底部scrollToBottom = () => {this.messagesEnd.scrollIntoView({behavior: "smooth"});}//数据更新时执行scrollToBottomcomponentDidUpdate() {this.scrollToBottom();}render() {return (<div className="chat-container"><div className="chat-list"><ul><ListItem list={this.state.msglist}/></ul><div style={{float: "left", clear: "both"}}ref={(el) => {this.messagesEnd = el;}}></div></div><div className="chat-bottom"><div className="chat-line"/><div className="chat-input-send"><input placeholder="请输入内容..." value={this.state.text} onChange={this.changeText}className="chat-input" onKeyUp={this.onKeyup}/><button className="chat-send" onClick={this.send}>发送</button></div></div></div>)}}function ListItem(props) {return props.list.map(item => {if (item.me) {return <li key={item.id}><RightItem msg={item}/></li>} else {return <li key={item.id}><LeftItem msg={item}/></li>}})
}export default Chat

如果看过本人vue实现小Q文章的同学，会知道如何在vue中解决聊天列表自动滚动到底部的问题，而react依然面临着这个问题，解决办法其实大同小异，都是在列表下方放置一个空的div，并在每次聊天结束后，定位到这个div的位置：

第一步：

   <div className="chat-list"><ul><ListItem list={this.state.msglist}/></ul><div style={{float: "left", clear: "both"}}ref={(el) => {this.messagesEnd = el;}}></div></div>

第二步：

    //自动滚动到底部scrollToBottom = () => {this.messagesEnd.scrollIntoView({behavior: "smooth"});}//数据更新时执行scrollToBottomcomponentDidUpdate() {this.scrollToBottom();}

GitHub源码：https://github.com/baiyuliang/Qrobot_React

用React实现小Q聊天机器人相关推荐

用Flutter实现小Q聊天机器人（二）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（四）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（五）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（三）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Vue实现小Q聊天机器人（二）
GitHub:https://github.com/baiyuliang/Qrobot_Vue 项目完整结构: 接下来,开始着手修改刚刚创建完成的项目! 打开main.js,引入相关插件,本项目的网络 ...
NLP微信小程序聊天机器人
今天把两年前大二时候的小程序又拿来玩了一下,决定开源这个小项目一个NLP微信小程序聊天机器人,前端就一个页面,后端是php的,可以接图灵等等各种api,也可以自己写个python的接口做NLP算法测 ...
React实现聊天机器人
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52512434,未经博主允许不得转载. 用React实现了一个聊天机器人, ...
10分钟构建人人都能学会的个性化聊天机器人-使用AIML（王小草博客）
本文主要介绍什么是aiml, 如何python环境安装aiml,如何使用与制作一个属于自己的聊天机器人 1 aiml初识 1.1 demo展示用aiml写了一个简单的微信聊天机器人的demo,暂且叫 ...
聊天机器人是一场真正的革命？未来将成为私人小秘书
著名的网络媒体"BackChanel"日前撰文称,聊天机器人作为一项热门的技术,将会颠覆手机应用(APP),在个人生活.公司客服.政府服务方面都有很好的应用. 文章将此称为即将到来 ...

用React实现小Q聊天机器人

用React实现小Q聊天机器人相关推荐

最新文章

热门文章