Компонент функции React Hooks с управляемым рендерингом на основе значений состояния / пропора - PullRequest
Новая
       10

Компонент функции React Hooks с управляемым рендерингом на основе значений состояния / пропора

0 голосов
/ 13 марта 2019

Одним из преимуществ возможности использования shouldComponentUpdate в компоненте класса 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>
    </>
  );
}

1 Ответ

2 голосов
/ 13 марта 2019

В этом примере, на мой взгляд, нет необходимости в оптимизации shouldComponentUpdate.Это будет уже быстро, так как вы не визуализируете children, когда ящик закрыт.Стоимость запуска функционального компонента будет довольно незначительной.

Тем не менее, если вы хотите реализовать эквивалентное поведение в функциональном компоненте, вы можете использовать React.memo и предоставить пользовательскую функцию areEqual:https://reactjs.org/docs/react-api.html#reactmemo.

...