高阶组件始终忽略shouldComponentUpdate而重新呈现
我有一个像这样的高阶分量
// higherOrderComponent.js
const HigherOrderComponent = Component => class extends React.Component {
shouldComponentUpdate (nextProps, nextState) {
return false
}
render () {
return <Component {...this.props} />
}
}
export default HigherOrderComponent
// myComponent.js
import HigherOrderComponent from './higherOrderComponent'
class MyComponent extends React.Component {
render () {
return <div>my component</div>
}
}
export default HigherOrderComponent(MyComponent)
// parentComponent.js
import MyComponent from './myComponent'
class ParentComponent extends React.Component {
render () {
return <MyComponent />
}
}我显式返回false，但组件总是被重新呈现。知道为什么吗？我最终想要跨组件共享"shouldComponentUpdate“。如果高阶组件不起作用，我该如何实现？
回答 4
Stack Overflow用户
发布于 2016-08-19 16:08:21
由于您还没有指定如何调用您的高阶组件，因此基于这个问题，我已经猜测了您可能会如何使用它。
我的答案是基于这样的假设:您正在调用您的高阶函数，例如
var MyHigherOrderFn = (HigherOrderComponent(Baar));如果你想知道如何在render中调用像下面这样的高阶函数到return中，你可以避免这个问题。
<HigherOrderComponent prop1="Hello" child="Child" />由于我不知道如何以上述方式调用您的函数(我甚至不确定它是否可行)，我创建了具有不同语法风格的HigherOrderComponent2，它们可以像这样调用，这反过来又符合shouldComponentUpdate
<Parent prop1="val1">
<Child>
</Parent>import React, {PropTypes} from 'react';
/*This is simeple child component*/
class Baar extends React.Component {
render() {
return (<div>{this.props.name}</div>);
}
}
/*This is your higher order component*/
const HigherOrderComponent = Component => class extends React.Component {
shouldComponentUpdate (nextProps, nextState) {
return false;
}
render () {
return <Component {...this.props} />
}
}
/*This is another way to write higher order component*/
class HigherOrderComponent2 extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate (nextProps, nextState) {
return false;
}
render(){
let child = this.props.children && React.cloneElement(this.props.children,
{...this.props}
);
return <div>{child}</div>
}
}
/*Problem that you are facing how you invoke your Higher Order Compoent*/
export default class Foo extends React.Component {
constructor(props) {
super(props);
this.onHandleClick = this.onHandleClick.bind(this);
this.state={
name: 'Praveen Prasad'
}
}
onHandleClick(){
this.setState({
name:Math.random()
});
}
render() {
{'This is how you might be invoking you higher order component, at this time react render doesnt know it already exists in DOM or not'}
{'this component will always re-render, irrespective of values in shouldComponentUpdate'}
var Baaz = (HigherOrderComponent(Baar));
return (<div>
<button onClick={this.onHandleClick}>Update Name</button>
<Baaz name={this.state.name} />
{'This is another way to invoke higher order Component , and this will respect shouldComponentUpdate'}
<HigherOrderComponent2 name={this.state.name}>
<Baar />
</HigherOrderComponent2>
</div>);
}
}Stack Overflow用户
发布于 2016-08-21 18:37:36
我已经修改了你的代码，创建了一个代码片段，它可以正常工作，当shouldComponentUpdate返回false时，MyComponent.render只被调用一次。
我的猜测是，不知何故，您使用的是MyComponent的未包装版本，而不是包装版本。也许你的构建环境有问题？
// higherOrderComponent.js
const HigherOrderComponent = Component => class extends React.Component {
shouldComponentUpdate (nextProps, nextState) {
return false;
}
render () {
return <Component {...this.props} />
}
}
class MyComponent extends React.Component {
render () {
console.log('render');
return <div>my component</div>
}
}
const MyComponentHOC = HigherOrderComponent(MyComponent);
class ParentComponent extends React.Component {
render () {
return <MyComponentHOC />
}
}
ReactDOM.render(<ParentComponent/>, document.getElementById('container'));
ReactDOM.render(<ParentComponent/>, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
Stack Overflow用户
发布于 2016-08-19 13:54:32
它是关于react组件的生命周期的。当一个组件被初始化时，它不会检查shouldComponentUpdate。仅当状态/属性发生更改时，才会调用ShouldComponentUpdate。
仅供参考，生命周期方法按顺序调用：
组件初始化时的渲染： getDefaultProps getInitialStage componentWillMount render componentDidMount
组件状态更改时的渲染： shouldComponentUpdate componentWillUpdate render componentDidUpdate
当组件的道具发生更改时渲染： componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate
卸载组件时的： componentWillUnmount
https://stackoverflow.com/questions/39031781
复制相似问题
腾讯云开发者
