React Hooks功能组件具有基于状态/Prop值的受控渲染

Question

能够在React类组件上使用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：//reactjs.org/docs/react-api.html#reaeactmemo。<<<<<<<<<<<<<<<<<<