Question

所以我正在开发一个在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，使用我的行创建thead并管理关于我的表的所有内容。我知道这不是最好的做法，所以我改变了很多，把所有东西都分成了组件。 secound表只有一个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个单独的组件。由于所有表都具有相同的选项，因此只显示我显示的数据。其他一切都应该是一样的。

Answer 1

Redux正在改变你的组件状态。当一个组件状态发生变化时（通过改变，不一定必须是它的差异），React将重新渲染以验证在DOM中是否有更新要做（他通过比较旧的虚拟DOM和新的虚拟DOM来做到这一点）他安装了）。您可以优化组件返回false到shouldComponentUpdate，通过这样做，您可以优先调用重新渲染：

shouldComponentUpdate(nextProps, nextState) {
  return false;
}

但是，您必须确切知道您的组件是否有任何变化，否则DOM中的内容将失控。

您可以通过doc来优化React

React / Redux应用程序完成对更改的重新呈现

1 个答案: