1.不要なレンダリングを避ける

01.renderメソッドの正体

02.render呼び出しの最適化

この場合、MenuButtonレンダリングのボタンをクリックすると、MenuContainerのvisibleと呼ばれる状態属性の値が更新され、その属性がクラス値が更新される

03.render呼び出しについて

-1. MenuContainer.js

import React, { Component } from "react";
import MenuButton from "./MenuButton";
import Menu from "./Menu";

class MenuContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
    };

    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  handleMouseDown(e) {
    this.toggleMenu();

    console.log("clicked");
    e.stopPropagation();
  }

  toggleMenu() {
    this.setState({
      visible: !this.state.visible,
    });
  }

  render() {
    console.log("Rendering : MenuContainer");
    return (
      <div>
        <MenuButton handleMouseDown={this.handleMouseDown} />
        <Menu
          handleMouseDown={this.handleMouseDown}
          menuVisibility={this.state.visible}
        />
        <div>
          <p>Can you spot the item that doesn't belong?</p>
          <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
            <li>Dolor</li>
            <li>Sit</li>
            <li>Bumblebees</li>
            <li>Aenean</li>
            <li>Consectetur</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default MenuContainer;

-2. MenuButton.js

import React, { Component } from "react";
import "./MenuButton.css";

class MenuButton extends Component {
  render() {
    console.log("Rendering : MenuButton");
    return (
      <button
        id="roundButton"
        onMouseDown={this.props.handleMouseDown}
      ></button>
    );
  }
}

export default MenuButton;

-3. Menu.js

import React, { Component } from "react";
import "./Menu.css";

class Menu extends Component {
  render() {
    console.log("Rendering : Menu");
    var visibility = "hide";

    if (this.props.menuVisibility) {
      visibility = "show";
    }
    return (
      <div
        id="flyoutMenu"
        onMouseDown={this.props.handleMouseDown}
        className={visibility}
      >
        <h2>
          <a href="/">Home</a>
        </h2>
        <h2>
          <a href="/">About</a>
        </h2>
        <h2>
          <a href="/">Contact</a>
        </h2>
        <h2>
          <a href="/">Search</a>
        </h2>
      </div>
    );
  }
}

export default Menu;

-4.render呼び出しcheck

このように見ると、レンダリングはMenuButtonに呼び出される必要はありません!

04.renderメソッドの呼び出しを避ける

-1.shouldComponentUpdateの再定義

_1. shouldComponentUpdate false return

import React, { Component } from "react";
import "./MenuButton.css";

class MenuButton extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }

  render() {
    console.log("Rendering : MenuButton");
    return (
      <button
        id="roundButton"
        onMouseDown={this.props.handleMouseDown}
      ></button>
    );
  }
}

export default MenuButton;

_2. shouldComponentUpdate used parameters

import React, { Component } from "react";
import "./MenuButton.css";

class MenuButton extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.handleMouseDown === nextProps.handleMouseDown) {
      return false;
    } else {
      return true;
    }
  }

  render() {
    console.log("Rendering : MenuButton");
    return (
      <button
        id="roundButton"
        onMouseDown={this.props.handleMouseDown}
      ></button>
    );
  }
}

export default MenuButton;

-3.PureCompentの使用

import React, { PureComponent } from "react";
import "./MenuButton.css";

class MenuButton extends PureComponent {
  // shouldComponentUpdate(nextProps, nextState) {
  //   if (this.props.handleMouseDown === nextProps.handleMouseDown) {
  //     return false;
  //   } else {
  //     return true;
  //   }
  // }

  render() {
    console.log("Rendering : MenuButton");
    return (
      <button
        id="roundButton"
        onMouseDown={this.props.handleMouseDown}
      ></button>
    );
  }
}

export default MenuButton;