Question

我正在尝试使应用程序做出反应，以呈现树状结构，可以在用户输入上进行扩展和折叠，尽管我已设法让应用程序正常工作，但性能非常慢。我不确定这是因为应用程序的性质，反应组件还是我对框架的无知。

我已经完成了Chrome分析，这里有截图：

请您通过此图片了解瓶颈是什么以及是否可以解决这些问题。

来源：

https://github.com/harsh-a1/react-skeleton/tree/tree

组件：

export function TreeComponent(props){

var instance = Object.create(React.Component.prototype)

var state = {
    previousSelected :{},
    onSelectCallback : props.onSelectCallback
}
instance.props = props;   
var toggle = function(){
    instance.setState(state.data)
}
instance.updateState = function(){
    instance.setState(Object.assign({},state))

}

if (!props.data){
    init(function(ous){
        state.data = ous;
        instance.setState(state)

    });
}
instance.render = function(){
    if (!state.data){return <div key = "dummy"></div>}

    return <ul key={"ul_"+state.data.id}>
        <Tree data={state.data} updateState={instance.updateState} state={state } />
        </ul>
}


return instance;


function Tree(props){
    var instance = Object.create(React.PureComponent.prototype)

    instance.render = function(){
        if (!props.data.children || props.data.children.length == 0){
            return (
                    <li key={"li_"+props.data.id}>
                    <LeafNode data={props.data} updateState = {props.updateState} state={props.state}  />                
                    </li>
            )
        }

        return  (            
                <li key={"li_"+props.data.id}><LeafNode data={props.data} updateState = {props.updateState} state={props.state} />
                <ul key = {"ul_"+props.data.id} style={props.data.showChildren?{"display":"inline"}:{"display":"none"}}>
                {
                    props.data.children.map(function(child){
                        return <Tree data={child} key={"tree_"+child.id} updateState = {props.updateState} state={props.state}  />
                    })                
                }
            </ul></li>
        )
    }
    return instance;
    function LeafNode(props){
        var instance = Object.create(React.PureComponent.prototype)
        instance.props = props;   

    /*    instance.shouldComponentUpdate = function(nextProps) {
            return (nextProps.data.showChildren !== this.props.data.showChildren);
        }
    */
        instance.componentDidMount= function(){
              console.log("yes")
        }

        instance.toggle = function(){

            props.data.showChildren = !props.data.showChildren;
            props.updateState();
        }

        instance.selected = function(){
            props.state.previousSelected.selected = false;
            props.data.selected = !props.data.selected;                
            props.state.previousSelected = props.data;
            props.updateState();
            props.state.onSelectCallback(Object.assign({},props.data));

        }

        instance.render = function(){
            var toggleImg = "";

            if ( props.data.children.length!=0){
                toggleImg = props.data.showChildren  ?expandIMG:collapseIMG; 
            }            
            return (
                    <div key={"div_"+props.data.id} >
                    <span key={"span_"+props.data.id} className="toggle"  >
                    <img key={"img_"+props.data.id} width="12" height="12" src={toggleImg} onClick={instance.toggle} />
                    </span>
                    <a key={"a_"+props.data.id} onClick = {instance.selected} style={props.data.selected? {color:"yellow"}:{color:"black"}}  >{props.data.name}</a>
                    </div>
            )
        }
        return instance        
    }   
}
}

由于

苛刻

Answer 1

在React网站上查看有关create components和component lifecycle的最佳做法。遵循它们是一个好主意，以便以后更容易识别问题。

还值得研究react-virtualized组件。有许多组件可以重复使用，包括列表，网格，树等。另外看看它们的实现，因为它是开源的。

他们的virtual list component解决了我渲染500多件物品的问题。

Answer 2

以下是1M +节点和良好性能的示例。诀窍是使用本地状态而不渲染隐藏元素。

https://codesandbox.io/s/z6jr6zww4l

Answer 3

结果问题是我正在使用“开发”构建来检查它....我切换到一个生产库，现在它运行不坏...仍然不如直接DOM但漂亮关闭...虽然不知道它可以扩展多少......

反应应用程序性能下降

3 个答案: