在反应渲染中重用组件实例答案

【问题标题】：reusing component instance in react render在反应渲染中重用组件实例
【发布时间】：2017-04-17 22:01:26
【问题描述】：

父类有多个子组件，所有子组件都在 render 方法中实例化，因此父状态的任何更改都会导致所有子组件重新实例化，每次调用 render 时都会创建新的子组件实例，从而失去状态孩子，为了重用子实例，我尝试使用 parent.refs.childRef 检索子实例，但这给了我错误

未捕获的错误：对象作为 React 子级无效

，这是我的代码

placeHolderComponent(){
        let component;
        let palceHolderValue=this.state.uiState.placeHolder;
        let classInstance=this;
        if(palceHolderValue=='empty'){
            component=<EmptyComponent></EmptyComponent>
        }
        else if(palceHolderValue=='search'){
                component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    <GpSearch  ref="gpSearchComponent"/>
        }
        return component;
    }

这里 GpSearch 组件使用 ref 属性进行实例化，代码检查 parent.refs.childComponentRefId 是否不为空，然后渲染该实例，而不是一个新实例。我收到此错误

未捕获的错误：对象作为 React 子级无效（....如果您意味着渲染一组孩子，使用数组代替或包装使用 React 附加组件中的 createFragment(object) 的对象

【问题讨论】：

标签： reactjs

【解决方案1】：

“对父状态的任何更改都会导致所有子状态被重新实例化”

不，对父状态的任何更改都可能导致重新渲染父及其子。子组件不会重新创建，而是重新渲染（尽管您可以使用生命周期挂钩 shouldComponentUpdate 避免重新渲染子组件）。

“失去孩子的状态”

再次，不。重新渲染时，子级不会丢失其内部状态。

错误大概是这行抛出的：

 component = classInstance.refs.gpSearchComponent != null ?  classInstance.refs.gpSearchComponent: <GpSearch  ref="gpSearchComponent"/>

因为 classInstance.refs.gpSearchComponent 是一个对象，并且 React 抱怨“未捕获的错误：对象作为 React 子对象无效”。

    if(palceHolderValue=='empty'){
        component=<EmptyComponent></EmptyComponent>
    }
    else if(palceHolderValue=='search'){
            component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    <GpSearch  ref="gpSearchComponent"/>
    }
    return component;

根据 ^^ 这段代码，我认为您要么渲染 EmptyComponent 或 GpSearch 组件。因此，每当placeHolderValue 更改时，您都会卸载当前重新渲染的组件。这就是您的组件每次重新实例化的方式，因此您会丢失子组件的内部状态。

另一种方法是，将子组件的状态保留在父组件中（作为父组件的状态），并根据需要将其作为道具传递给子组件。

【讨论】：