反应shouldComponentUpdate

Question

我正在学习React，我正在尝试将shouldcomponentupdate生活方式方法添加到我的代码中。现在它不会显示列表。并且按键它什么都不做。感谢任何建议   这是我的代码：

  const list1Items = ["Eggs", "Bread", "Artisinal cheese"];
     const list2Items = ["Trains", "Planes", "Automobiles"];

  class List extends React.Component {
      state = {
        items: []
      }


      shouldComponentUpdate() {
           return JSON.stringify(nextProps.items) !== JSON.stringify(this.state.items);
      }

      componentDidMount() {
        document.addEventListener("keydown", this.handleKeydown.bind(this));
      }
      componentWillUnmount() {
           document.removeEventListener("keydown", this.handleKeydown.bind(this));
      }
      handleKeydown(event) {
          // this checks if the 1 key is pressed
          if (event.code === "Digit1") { 
                this.setState({items: list1Items}); 
          }
          // this checks if the 2 key is pressed
          else if (event.code === "Digit2") { 
              this.setState({items: list2Items}); 
          }
      }
      render() {

        console.log("List's render function");
        const list = this.state.items.map(item => (<li key={item}>{item}</li>));

        return (
          <ul>
              {list}
          </ul>
        );
      }
    }

    ReactDOM.render(
       <List/>,
       document.getElementById("root")
    )

Thanks for helping in advance 

Answer 1

class List extends React.Component {
  shouldComponentUpdate (nextProps) {
    // if you're using ImmutableJS or something like that you can do:
    return nextProps.items !== this.props.items

    // If you're using plain JavaScript you have to check based on your knowledge of the structure like:
    return !nextProps.items.every((item, index) => i.name === this.props.items[index].name)

    // Otherwise, if you don't know the structure, you need to do it the dumb way:
    return JSON.stringify(nextProps.items) !== JSON.stringify(this.props.items)
  }

  render() {
    console.log("List's render function"); // this should not happen if the exact same props are provided a second time
    const list = this.props.items.map(item => (<li key={item}>{item}</li>));

    return (
      <ul>
          {list}
      </ul>
    );
  }
}

Answer 2

您将在React组件类中实现shouldComponentUpdate，但是您需要通过在React组件中提供dom侦听器而不是在其外部来更好地构建代码

  const list1Items = ['Eggs', 'Bread', 'Artisinal cheese'];
  const list2Items = ['Trains', 'Planes', 'Automobiles'];
  class List extends React.Component {
      state = {
        items: [];
      }
      shouldComponentUpdate() {
          // write your logic here
          // compare current state and next state here
      }

      componentDidMount() {
        document.addEventListener('keydown', this.handleKeydown.bind(this));
      }
      componentWillUnmount() {
           document.removeEventListener('keydown', this.handleKeydown.bind(this));
      }
      handleKeydown(event) {
          // this checks if the 1 key is pressed
          if (event.code === "Digit1") { 
                this.setState({items: list1Items}); 
          }
          // this checks if the 2 key is pressed
          else if (event.code === "Digit2") { 
              this.setState({items: list2Items}); 
          }
      }
      render() {
        console.log("List's render function");
        const list = this.state.items.map(item => (<li key={item}>{item}</li>));

        return (
          <ul>
              {list}
          </ul>
        );
      }
    }

    ReactDOM.render(
       <List/>,
       document.getElementById("root")
    )

Answer 3

 const list1Items = ["Eggs", "Bread", "Artisinal cheese"];
     const list2Items = ["Trains", "Planes", "Automobiles"];

  class List extends React.Component {
      state = {
        items: []
      }


      shouldComponentUpdate() {
           return JSON.stringify(nextProps.items) !== JSON.stringify(this.props.items);
      }

      componentDidMount() {
        document.addEventListener("keydown", this.handleKeydown.bind(this));
      }
      componentWillUnmount() {
           document.removeEventListener("keydown", this.handleKeydown.bind(this));
      }
      handleKeydown(event) {
          // this checks if the 1 key is pressed
          if (event.code === "Digit1") { 
                this.setState({items: list1Items}); 
          }
          // this checks if the 2 key is pressed
          else if (event.code === "Digit2") { 
              this.setState({items: list2Items}); 
          }
      }
      render() {
        console.log("List's render function");
        const list = this.props.items.map(item => (<li key={item}>{item}</li>));

        return (
          <ul>
              {list}
          </ul>
        );
      }
    }

    ReactDOM.render(
       <List/>,
       document.getElementById("root")
    )