Reactjs 正确理解和解

我已经编写了一个基于react/redux的小应用程序（）。它基于swagger ui redux系统。因此，我创建了一些类似于树的数据，并将其呈现在UI上

警告：redux系统可能需要一些时间才能适应。这不是传统的。它是一个准基于插件的体系结构

因此，我的树视图组件作用于以下数据->

树视图的代码如下所示：

export default class TreeView extends React.Component {

    shouldComponentUpdate(nextProps, nextState) {
        if (this.previousState) {
            let {layoutSelectors } = nextProps
            let prevValue = this.previousState.expand
            let currentValue = layoutSelectors.isExpanded(this.previousState.path)
            console.log('Path:', this.previousState.path.join('.'), 'Result:', currentValue !== prevValue)
            return currentValue !== prevValue
        }
        return false
    }

    setVisibility = (flag) => {
        // console.log('foo')
        let { _path, layoutActions } = this.props
        if (flag) {
            layoutActions.show(_path)
        }
        else {
            layoutActions.hide(_path)
        }

    }

    renderChild() {
        // console.log('render child')
        let { _path, _tree, dataSelectors, getComponent, layoutSelectors } = this.props
        console.log('Render:', _path.join('.'))
        let data = _tree.getIn(_path)
        // console.assert(data, path)
        let paras = data && data.get ? (data.get("paras") ? data.get("paras") : undefined) : undefined

        let expand = layoutSelectors.isExpanded(_path)

        let childCount = dataSelectors.childCount(_path)
        // console.log({path: _path, count: childCount, data: data})
        this.previousState = {
            path: _path,
            expand: expand
        }
        let TreeView = getComponent("TreeView")
        // console.log('path:', _path, 'hasChildren:', hasChildren)
        // layoutSelectors.isRoot(_path)
        let hide = () => this.setVisibility(false)
        let show = () => this.setVisibility(true)
        return (
            <div className={ `child ${ _path.length === 1 ? "root" : "" }`}>
                { data && data.get && data.get("title") ? <h3>{data.get("title")}</h3> : null }
                <small>Children Count:  { childCount }</small>
                { 
                    childCount ? <div className="btn-toolbar" role="toolbar">
                                    <div className="btn-group" role="group">
                                            <button type="button" className="btn btn-default btn-xs" onClick={ show }>
                                                <span className="glyphicon glyphicon-eye-open"></span>
                                            </button>
                                            <button type="button" className="btn btn-default btn-xs" onClick={ hide }>
                                                <span className="glyphicon glyphicon-eye-close"></span>
                                            </button>
                                        </div>
                                    </div> 
                                : null
                }


                {
                    (expand && paras) ? paras.map((obj, key) => {
                        let thisPath = _path.concat("paras", key)
                        return <TreeView _path={ thisPath } _tree={ _tree } key={ `-${thisPath.join('.')}` }/>
                    }) : null
                }
            </div>
        )
    }


    renderRoot() {
        // console.log('render root')
        // console.log(this.props)
        let { getState, getComponent } = this.props
        let data = getState().get("data")
        let TV = getComponent("TreeView")
        return (
            <div>
                {
                    data.map( (subtree, key) => {
                        return (
                            <TV _path={ [key] } _tree={ data } key={ `-${key}` } />
                        )
                    })
                }
            </div>
        )
    }

    render() {
        let { _path, _tree } = this.props

        let isRoot = () => !_path && !_tree

        if (isRoot()) {
            return this.renderRoot()
        }
        else {
            return this.renderChild()
        }
    }
}

Render App
Render: 0
Render: 1
Render: 2
Render: 3

现在，当我希望分别查看第一项和第一个子项的所有子项时，我将共享输出：

#First item click
Render App
Path: 0 Result: true
Render: 0
Render: 0.paras.0
Render: 0.paras.1
Render: 0.paras.2
Render: 0.paras.3
Render: 0.paras.4
Path: 1 Result: false
Path: 2 Result: false
Path: 3 Result: false

#first sub item click
Render App
Path: 0 Result: false
Path: 1 Result: false
Path: 2 Result: false
Path: 3 Result: false
Path: 0.paras.0 Result: true
Render: 0.paras.0
Render: 0.paras.0.paras.0
Render: 0.paras.0.paras.1
Render: 0.paras.0.paras.2
Path: 0.paras.1 Result: false
Path: 0.paras.2 Result: false
Path: 0.paras.3 Result: false
Path: 0.paras.4 Result: false

意见：

在第一项单击时-该级别的树视图的组件更新应显示为true，且其子级全部呈现。这是意料之中的

在子项单击时-父项的组件更新应返回false，但子项呈现-这是我不理解的内容。。。！！！（

路径：0结果：false

，但

路径：0。第0段结果：true

）

---

好奇。。。在您的

renderRoot（）

中，您是否打算将

数据

应用于

的_树属性？我问这个问题是因为它在
data.map（）
中，而
子树
未被使用。另外，使用索引作为键也会导致问题。我建议做一些独特的东西。可能不是问题，但这是一个好的开始。是的，我顺便将整个数据向下传递…关键是一个
-
，索引位于顶层。一个坏主意。但它有点像是为这个人为的例子服务的。。。在您的
renderRoot（）
中，您是否打算将
数据
应用于
的_树属性？我问这个问题是因为它在
data.map（）
中，而
子树
未被使用。另外，使用索引作为键也会导致问题。我建议做一些独特的东西。可能不是问题，但这是一个好的开始。是的，我顺便将整个数据向下传递…关键是一个
-
，索引位于顶层。一个坏主意。但它有点像这个人为的例子