reactjs - 高阶组件总是重新渲染，忽略 shouldComponentUpdate

Question

我有一个像这样的高阶组件

// 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”。如果高阶组件不起作用，我该如何实现？

Answer 1

由于您尚未指定如何调用高阶组件，因此根据该问题，我猜测您可能会如何使用它。

我的答案基于您正在调用高阶函数的假设，例如

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>);
  }
}