reactjs - React re render array whereas item key has not changed -

very basic code sample of list:

class list extends react.component {     render() {         const listcomponent = this.props.numbers.map((number) =>             <item key={ number.tostring() } value={ number } />,         );          return (             <div>                 <button onclick={ () => this.setstate({ test: 1 })}>re-render list</button>                 { listcomponent }             </div>         );     } } 

an here item:

class item extends react.component {     render() {         return (             <div>{ this.props.value + ', rendered time:' + new date().gettime() }</div>         );     } } 

when click button, state updated list component re-rendered.

however, if understanding correct, items should not re-rendered since key item has not changed. re-render since timestamp updated.

can explain me why?

your understanding wrong

the whole purpose of key, ordering rather rendering. image have item a,b,c,d , reorder switch , c, i.e. c,b,a,d. without key, extremely hard react figure how transform form old virtual dom new virtual dom.

please read https://facebook.github.io/react/docs/lists-and-keys.html