does react server rendering have to use redux to manage data? Can I write it directly in the component?
does react server rendering have to use redux to manage data? Can I write it directly in the component?
of course. redux and react are independent libraries that can be combined at will. They are not written specifically for react . You can write them directly as variables
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>
`)then call
class App extends React.Component {
render() {
try {
let {name} = window.__INIT_DATA
return name
} catch (e) {
return "";
}
}
} anyway, for the backend, JS , html , css are all just strings
because redux is not good at learning, it is time-consuming to write. Now you need to quickly complete the isomorphism of react spa to server rendering. Can you do without redux?
here is my original SPA code
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>
);
}
}
Previous: Ask for advice, how to use WeChat Mini Programs wxParse?
Next: How to use an interface to define a class with a constructor