【发布时间】：2018-02-14 21:31:24
【问题描述】：
所以我正在开发一个在 React/Redux 中显示数据的项目。
通过 tcp 套接字接收数据并立即发送到存储区。 我的问题源于商店状态发生变化后立即重新渲染我的应用程序。
function mapStateToProbs(state){
return{
ApplicationProcess: state.ApplicationProcess,
SubSchedule: state.SubSchedule,
Command: state.Command,
CommandParameter: state.CommandParameter
}
}
//pulling needed actions for dispatchign store
function mapDispachToProbs(dispatch){
return bindActionCreators(actionCreators, dispatch)
}
@connect(mapStateToProbs, mapDispachToProbs)
@debugRender
export default class Body extends React.Component{
render(){
//inline CSS block
const divTable = {
overflow: "auto",
willChange: "transform",
maxHeight: "20em"
}
const stayRight={
float: "right"
}
//Basic Body with 3 Tables and their layout, passing down the data need to fill Tables
return(
<div className="container-fluid">
<div className="container-fluid"><Header hideCols={this.props.hideCols} subSchedule={this.props.SubSchedule} command={this.props.Command} applicationProcess={this.props.ApplicationProcess} /></div>
<div className="container-fluid"><Meta metadata = {this.props.CommandParameter}/></div>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-sm-9">
<div className="row"><div className="col-md-10 text-center h5"> Sub-Schedules </div></div>
<div className="row" style={divTable}>
<Table tabledata={this.props.SubSchedule} sortTable={this.props.sortTable} />
</div>
</div>
<div className="col-md-2 col-sm-10" style={stayRight}>
<div className="row"><div className="col-md-12 text-center h5">Enabled APIDs</div> </div>
<div className="row" style={divTable}>
<Table tabledata={this.props.ApplicationProcess} sortTable={this.props.sortTable} />
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="row"><div className="col-md-12 text-center h5">Commands</div></div>
<div className="row" style={divTable}>
<Table tabledata={this.props.Command} sortTable={this.props.sortTable} />
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-sm-9">
<div className="row"><div className="col-md-10 text-center h5"> Sub-Schedules </div></div>
<div className="row" style={divTable}>
<Tabledos tabledata={this.props.SubSchedule} sortTable={this.props.sortTable} />
</div>
</div>
<div className="col-md-2 col-sm-10" style={stayRight}>
<div className="row"><div className="col-md-12 text-center h5">Enabled APIDs</div> </div>
<div className="row" style={divTable}>
<Tabledos tabledata={this.props.ApplicationProcess} sortTable={this.props.sortTable} />
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="row"><div className="col-md-12 text-center h5">Commands</div></div>
<div className="row" style={divTable}>
<Tabledos tabledata={this.props.Command} sortTable={this.props.sortTable} />
</div>
</div>
</div>
</div>
</div>
)
}
}
这是我的身体能力。不要奇怪我复制了这些表，因为前三个表在一个组件中完成所有事情。用我的 cols 创建 thead，用我的行创建 tbody 并管理关于我的表的所有内容。 我知道这不是反应的最佳实践，所以我进行了很多更改并将所有内容分离为组件。第二张表只有一个 TableHead 和 TableBody 组件：
@debugRender
export default class Table extends React.Component{
render(){
const {
tableHead,
tableBody,
DataType
} = this.props.tabledata
return(
<table className="table table-bordered table-striped table-responsive">
<TableHead tableHead = {tableHead} DataType = {DataType}/>
<TableBody tableBody = {tableBody} />
</table>
)
}
}
TableHead 将创建列：
export default class TableHead extends React.Component{
constructor(props){
super(props)
this.state={
columns: this.props.tableHead
}
}
eachColumn(col, i){
var uid = this.props.DataType + '_' + col,
visibility = this.state.columns.byCol[col].visibility,
col = visibility ?
<Columnn key={uid} id={uid} data={this.state.columns.byCol[col]}/>
: null
return(
col
)
}
componentWillReceiveProps(nextProps){
var arr = {...this.state.columns, ...nextProps.tableHead}
//console.log(arr)
this.setState({columns: arr})
}
shouldComponentUpdate(nextProps, nextState){
if(this.props.tableHead.byCol !== nextProps.tableHead.byCol){
console.log("return true")
return true
}
console.log("return false")
return false
}
render(){
console.log(this.state)
const{
columns
} = this.state
return(
<thead>
<tr>
{columns.allCols.map(this.eachColumn.bind(this))}
</tr>
</thead>
)
}
}
而每一列基本上是这样的：
export default class Column extends React.Component{
render(){
const th = {
backgroundColor: "#8c918d",
width: "auto",
whiteSpace: "nowrap"
}
return(
<th id={this.props.id}
className="sticky-top"
style={th}>
{this.props.data.name}
</th>
)
}
}
如果我现在调度任何操作，例如将任何列的可见性设置为 false，不仅我的整个表格将重新渲染，我的正文和其中的所有其他组件也将重新渲染。那是我无法理解的。也许任何人都可以帮助我。
PS：欢迎提出关于使用 react/redux 时的最佳实践的任何建议。
编辑： 需要明确的是，我的视图中有 3 个表，我不想为同一任务执行 3 个单独的组件。由于所有表都将具有相同的选项，因此只有我显示的数据会发生变化。其他一切都应该相同。
【问题讨论】：
标签： reactjs redux react-redux electron