React shouldComponentUpdate

Question

私はReactを学習していますし、コードにshouldcomponentupdateライフスタイルメソッドを追加しようとしています。今はリストを表示しません。 keypressそれは何もしません。任意の提案のおかげでここにずっと 私のコードです：

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

あなたはコンポーネントクラスに反応あなたにshouldComponentUpdateを実装し、しかし、あなたはあなたのリアクトで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") 
    )