javascript - 为什么 React Router 会导致我的组件重新挂载，而不仅仅是重新渲染？

Question

我正在使用 React 路由器创建一个应用程序，其中包含多个路由，包括上传视频的 Uploader 组件和查看视频的 Videos 组件。视频页面将一些评论存储为状态，我想在整个应用程序打开的过程中保留在页面上。然而， react 路由器似乎导致每个组件重新安装而不是重新渲染，导致我的状态在我重新路由回 Video 组件时重置为初始空值。我在我的 Route 组件中使用 render 方法而不是 component 方法，所以我不明白为什么会这样。有谁知道是什么原因造成的？

这是发生路由的主要应用程序:

class App extends React.Component{

    constructor(props){
        super(props)
        var fileNames
        var files
        var fileSelected
        this.state={fileSelected:null}
     }

    getFileFromChild= (uploadedFiles)=> {
         this.files = uploadedFiles

    }

    fileButtonClicked= (index)=> {
        //extract file chosen by user based on button click
        this.setState({fileSelected: this.files[0][index]})

    }

    render(){
        //destructuring props in class component
        const {user} = this.props;
    return(

        <Router>
            <div className = "nav-bar">
                <Nav/>
                <Switch>
                    <Route path='/' exact render={()=> <HomePage />
                    }/> 
                    <Route path='/videos' render={()=> <Videos files= {this.files} fileSelected={this.state.fileSelected}/>
                    }/>
                    <Route path='/uploader' render={()=> <Uploader  passFile= {this.getFileFromChild} fileButtonClicked={this.fileButtonClicked}/>
                    } />
                </Switch>


            </div>

        </Router>
    )
    }
}

这是存储我需要的状态的 Videos 组件:

class Videos extends React.Component{

    constructor(props){
        super(props)
        this.videoRef = React.createRef();
    }

    // once DOM loads get video tag and reload it
    componentDidUpdate(){
        this.videoRef.current.load()
    }

    render(){
        const {files, fileSelected}=this.props;
        var src = (fileSelected) ? URL.createObjectURL(fileSelected): URL.createObjectURL(files[0][0])

        return( 
                <div>
                    <div className="ui one column centered grid">
                        <div className="one wide column"> {/*needs to be one wide here not just column for center to work*/}
                            <h3>Videos</h3>

                        </div>
                    </div>
                     <div className="ui grid">
                        <div className="ten wide column">
                            <video ref={this.videoRef} controls width="566" height="320">
                                    <source src={src} id='video' type="video/mp4" />
                                    Your browser does not support HTML5 video.
                            </video>
                            <CommentsSection/>

                        </div>

                        <div className="six wide column">
                            {files[1]}
                        </div>


                    </div>

                </div>

            )


    }
}

Answer 1

我不太明白你所说的“当 Video 组件被多次加载时”是什么意思，但让我看看我能否回答你的问题。

如果你说 Video当您导航(更改路线)离开并返回时组件被卸载和安装 - 导致丢失 Video 的状态您拥有的组件 - 是 render 的预期行为 Route的方法| .

让我解释一下 react router 页面上的官方文档:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from thegiven component. That means if you provide an inline function to thecomponent prop, you would create a new component every render. Thisresults in the existing component unmounting and the new componentmounting instead of just updating the existing component. When usingan inline function for inline rendering, use the render or thechildren prop...

这意味着:

• 组件传递给 render或 component Prop 将始终在路线更改时卸载和装载
• 如果您将内联组件传递给 render prop，它不会在每次渲染时卸载和重新挂载 - 它会“记住”内联函数而不执行挂载/卸载
• 如果您将内联组件传递给 component prop，它将在每个渲染器上卸载和安装 - 它将在每个渲染器上重新创建内联组件，以便执行组件旧实例的卸载和新创建的组件实例的安装组件

要点:

• 两个component和 render Prop 将在导航离开时卸载，并在导航进入时装载，这是预期和期望的行为。
• 你将一个内联组件传递给render Prop (例如 <Route render={() => <HomePage />} )
• 你将一个组件传递给component Prop (例如 <Route component={HomePage} /> )
• 永远不要将内联组件传递给 component支持
• 在您的例子中，您使用的是 render组件正确。您只是对路线更改和 Prop 更改时的卸载和安装感到困惑