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

2 个回答

发布于
2018-11-29

更新于
2018-11-29

当然可以啊，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都不过是字符串而已

蓓蕾心晴

56326145167

发布于
2018-11-29

更新于
2018-11-29

因为 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>
        );
    }
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

Nuxt3如何获取页面的宽度？

Nuxt3如何对顶层div的部分style客户端渲染？

Nuxt3为何在onMounted里console.log(111)在浏览器控制台看不到输出的111信息，在服务端的日历也没有输出111信息？