基于状态/属性值的可控制渲染的React Hooks功能组件

Question

能够在React Class组件上使用shouldComponentUpdate的好处之一是能够基于条件而不是仅更改状态/ prop值来控制渲染。

使用功能组件中的react钩子进行此优化的首选方法是什么？

在下面的示例中，即使类组件处于（或保持）关闭状态，它也不会重新呈现，即使它具有新的子代也是如此。

class DrawerComponent extends React.Component {
  static propTypes = {
    children: PropTypes.any,
  }

  state = {
    isOpen: false,
  }

  // only re-render if the drawer is open or is about to be open.
  shouldComponentUpdate(nextProps, nextState) {
    return this.state.isOpen || nextState.isOpen;
  }

  toggleDrawer = () => {
    this.setState({isOpen: !this.state.isOpen});
  };

  render() {
    return (
      <>           
        <div onClick={this.toggleDrawer}>
          Drawer Title
        </div>
        <div>
          {this.state.isOpen ? this.props.children : null}
        </div>
      </>
    )
  }
}

功能组件对应项（无优化）：

function DrawerComponent({ children }) {
  const [isOpen, setIsOpen] = useState(false);

  function toggle() {
    setIsOpen(!isOpen);
  } 

  return (
    <>
      <div onClick={toggle}>
        Drawer Title
      </div>
      <div>{isOpen ? children : null}</div>
    </>
  );
}

Answer 1

在本例中，我认为不需要对shouldComponentUpdate优化。 由于您在关闭抽屉时不渲染children ，因此它已经非常快了。 运行功能组件的成本几乎可以忽略不计。

就是说，如果您确实想在功能组件中实现等效行为，则可以使用React.memo并提供自定义的areEqual函数： https : areEqual 。