首页 文章

为什么不会在动态创建的子组件(生成一次)中更新父道具

提问于
浏览
0

使用性能并查看是否在 componentDidMount() 上保存动态生成的组件的状态实质上可以提高性能 .

我看到只表示在初始创建时传递的道具 . 对父道具的更新不会逐渐减少render()更新 .

这在React架构中是有意义的,但没有给出JS引用 . 是因为this.props只是道具的更新,而不是实际的变量引用?

Musings:这似乎是动态组件最高效的方法,因为它们只生成一次 . 但是我猜它失去了React的跟踪能力,为什么React不会理解这些视图正在 grab .

// Inline Render
class MyDynamicViews extends React.Component {


    state = {
        views: []
    }

    componentDidMount() {

        let json = [{
            view: 1
        }, {
            view: 2
        }, {
            view: 3
        }];

        let views = json.map((view, i) => {
            return <View key={i} {...this.props}>{view.i}</View>
        });

        this.setState({views});

    }

    render() {
        return <View>{this.state.views}</View>

    }
}

1 回答

  • 0

    views 返回 <View key={i} {...this.props}>{view.i}</View> 并且您使用setState设置此元素 . 这不是正确的方法 . 您需要执行以下操作:

    class MyDynamicViews extends React.Component {
        state = {
            views: []
        }
        componentDidMount() {
            // now, you want to update the state
            // I suppose you're going to update the state fetching the data
            // thus, placed your new state data same here
            let views = [{
                view: 1
            }, {
                view: 2
            }, {
                view: 3
            }];
            this.setState({views});
        }
        render() {
            const views = this.state.views
            return views && views.map((view, i) => (
              <View key={i} {...this.props}>{view}</View>
            ))
        }
    }
    

    现在,您将使您的组件正常工作,并且没有任何道具问题 .

相关问题