当前位置：文江博客话题详情

react服务端渲染一定要用redux管理数据吗？可以直接写在组件中吗？

发布于 2022-09-11 15:46:42 字数 43 浏览 19 评论 0

react服务端渲染一定要用redux管理数据吗？可以直接写在组件中吗？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

樱娆 2022-09-18 15:46:42

因为 redux 学的不好，写起来感觉比较耗时，现在需要快速完成一个react 的spa 到服务端渲染的同构，不用redux可以吗？
以下是我原来的SPA代码

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './index.less';
import channelId from '../../config/channel'
import host from '../../config/host'

import TitleText from '../TitleText';

export default class ProfessorList extends Component {
    constructor(props){
        super(props);
        this.state = {
            professorList: [],
        };
        this.fetchProfessorList=this.fetchProfessorList.bind(this);
    }
    fetchProfessorList(){
        let _this=this;
        fetch(`${host}/web/pub/list_pub_in_channel?channelId=${channelId}&page=0&size=6`,{
            method:'GET',
            mode:'cors',
        }).then(function(response){
            return response.json().then(function(res){
                _this.setState({
                    professorList:res.content
                });
            });
        }).then(function(res){
            if(res){
                console.log(res);
            }
        });
    }
    componentDidMount(){
        this.fetchProfessorList();
    }
    render() {
        let professorList=this.state.professorList;
        return (
            <div className="professorList">
                <TitleText headerName={'专家列表'}/>
                <ul>
                    {
                        professorList.map((value, index) => {
                            return (
                                <li key={index}>
                                    <Link to={"/news_list/professor/"+value.pubId}>
                                        <div className="avatarBox">
                                            <img src={value.avatarUrl} alt=""/>
                                        </div>
                                        <div className="professor-name">{value.name}</div>
                                        <div className="professor-introduction">{value.introduction}</div>
                                    </Link>
                                </li>)
                        })
                    }
                </ul>
                <Link to="/professor_list">
                    <div className="btn-more">
                        查看更多
                    </div>
                </Link>
            </div>
        );
    }
}

梦初启 2022-09-18 15:46:42

当然可以啊，redux和react是独立的库，可以随意组合，又不是专门为react写的，你可以直接写成变量啊

response.write(`
        <!doctype html>
            <html>
            <head>
                <title>FilterList</title>
                <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"></head>
            <body>
            <div id="app">${app}</div>
            <script>
                window.__INIT_DATA={'name':'here'}
            </script>
            <script type="text/javascript" src="bundle.js"></script></body>
            </html>
        `)

接着调用

class App extends React.Component {
    render() {
        try {
            let {name} = window.__INIT_DATA
            return name
        } catch (e) {
            return "";
        }
    }
}

反正对后端来说，前端的JS、html、css都不过是字符串而已

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文