javascript - 如何防止 React.js 中父组件的重新渲染

Question

我有一个组件 ProductList - 它是一个父组件。在 m render 方法中我写了这样的代码

 return (
        <div>
            <CustomBreadCrumbs routes={this.props.routes} params={this.props.params} />
            { this.props.children ? this.props.children :
                <section className="content">
                    Parent
                </section>
            }
        </div>
    );

当我在子组件中编辑一些信息时，我的父组件会重新渲染，但我想阻止它。我该怎么做？

Answer 1

这是不可能的，因为只有在重新渲染父组件时才会调用子组件的重新渲染。

如你所见there ，如果您使用 shouldComponentUpdate 阻止当前元素的重新渲染，则不会使用子渲染方法。

但别担心React Only Updates What's Necessary .所以，如果你的父元素的 html 不会改变，真正的 DOM 将只更新子元素的 html。

---

展示案例

有一个example在官方文档中，如何创建表单。简而言之，您的主要问题是您没有在任何地方保存您的值，正如我所见，您使用 Redux 并通过 Prop 传递所有数据。尝试更改您的代码，以将数据保存在组件自身的状态中。

如果你在 BadRequest 上发现错误，你将触发代码，检查相等性，例如(错误的)消息并更新你的组件，但你的当前状态，以及所有用户的数据 不会改变。

shouldComponentUpdate(nextProps, nextState) {
    //there you will get the new values and check it, if they not equal
}

componentDidUpdate(prevProps, prevState) {
    //there you can do anything with your new values
}

如果您使用 Redux，请查看 Redux Form .