(精华)2020年7月31日 React 手写ssr服务端渲染
发布日期:2021-06-29 15:08:38
浏览次数:2
分类:技术文章
本文共 3681 字,大约阅读时间需要 12 分钟。
共用部分
import React ,{ useState} from 'react'import { connect} from 'react-redux'import { getIndexList} from '../store/index'const Index = (props) => { let [count,setCount] = useState(1) return ()}Index.load = (store) => { return store.dispatch(getIndexList())}export default connect( state => ({ list:state.index.list}), { getIndexList})(Index)服务端渲染
{ count}
{ props.list.map(item=>{ item.name} ) }
import axios from 'axios'const GET_LIST = 'INDEX/GET_LIST'// action const changeList = list => ({ type:GET_LIST, list})// 有一个请求 可以改变reducerexport const getIndexList = ()=>{ return (dispatch)=>{ return axios.get('http://xxxxxxxxxxx').then((res)=>{ const { list} = res.data dispatch(changeList(list)) }) }}const initState = { list:[]}export default (state = initState,action) => { switch(action.type){ case GET_LIST: const newState = { ...state, list:action.list } return newState default: return state }}
客户端
import React from 'react'import ReactDOM from 'react-dom'import { BrowserRouter} from 'react-router-dom'import { Provider} from 'react-redux'import { getClientStore} from '../store/store'import { Route,Link} from 'react-router-dom'import routers from '../router'const store = getClientStore()const App = ()=>{ return ()}ReactDOM.hydrate( 首页 登录{ routers.map(route=>)} ,document.getElementById('root'))
服务端
import express from 'express'import React from 'react'import { renderToString} from 'react-dom/server' // 专门在server端使用的import { StaticRouter} from 'react-router-dom'import { Provider} from 'react-redux'import { getStore} from '../store/store'import { Route,Link} from 'react-router-dom'import { matchRoutes} from 'react-router-config'import routers from '../router'let store = getStore()let app = express()app.use(express.static('public'))app.get('*',function(req,res){ // 遍历所有的路由 寻找有load方法的 const matchedRoutes = matchRoutes(routers,req.path) let promises = [] matchedRoutes.forEach(item=>{ let { load} = item.route.component if(load){ const promise = new Promise((resolve,reject)=>{ load(store).then(resolve).catch(reject) }) promises.push(promise) } }) Promise.all(promises).then(()=>{ let content = renderToString() const html = ` 首页 登录{ routers.map(route=>)} 软谋教育 ${ content}` res.send(html) }) })app.listen(1000,()=>{ console.log('监听1000端口成功');})
先编译客户端在启动服务端
"scripts": { "dev:server": "webpack --config webpack.server.js --watch", "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\"", "dev:client": "webpack --config webpack.client.js --watch" },
转载地址:https://codeboy.blog.csdn.net/article/details/107723690 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年04月21日 23时35分03秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
力扣的环形链表解法 (Python)
2019-04-29
CSS3 帧动画(Sprite,直译叫雪碧图)
2019-04-29
Java 父线程与子线程相互通信的方法
2019-04-29
Redis 六种淘汰策略和三种删除策略
2019-04-29
Java LinkedHashMap
2019-04-29
JPA 多线程同时对一条数据进行Update的问题
2019-04-29
JPA 多线程对数据进行更新,Update和Insert同时存在的问题
2019-04-29
Java 高性能队列Disruptor
2019-04-29
SpringBoot 使用https
2019-04-29
Java 读写锁
2019-04-29
JVM Minor GC、Full GC和Major GC
2019-04-29
SpringBoot @Scheduled 执行两次的问题
2019-04-29
idea maven工程打jar包,运行出现xxx.jar中没有主清单属性的问题解决方法
2019-04-29
java 使用GDAL生产tif格式
2019-04-29
Node,js 事件循环原理(Event loop)
2019-04-29
CSS3&JavaScript 图片分隔切换
2019-04-29
CSS3&JavaScript 瀑布流
2019-04-29
tomcat配置JVM
2019-04-29
Oracle获取连接超级慢的问题
2019-04-29
关于HashMap初始化容量,设置多少合适。
2019-04-29