remove child in an array from beginning, each child's state is not woking as expected

[eisneim]

jsfiddle https://jsfiddle.net/eisneim/rrqtpj72/1/

handleClick(){
/*
  state = {
    childData: ['a','b','c','d','e']
  }
 remove child from let to right, but vdom node not update correctly, 
 the "key" prop is not working neither
 */
  var newChildData = this.state.childData.slice(1)
  console.log(newChildData)
  this.setState({childData: newChildData })
}

it seems that the props.key is not working, and because of the "component-recycler", the state was not reseted when a child is collected, this will cause issue when child is reused, the previous state object is still there

[eisneim]

additional to that, this will also cause componentWillMount, componentDidMount and other life cycle hook invoked on incorrect child component

[developit]

@eisneim Great work, thanks for investigating this. I think we're going to need to have the component recycling invoke the constructor again when re-using a collected component:
https://github.com/developit/preact/blob/master/src/vdom/component-recycler.js#L24

This will probably cause some slight performance disadvantages, sadly, since it is now a common pattern to use class instance properties to mimic lexically scoped methods. However, I think it's best to make the recycler as transparent as possible, and this is one case where it currently isn't.

Are you able to elaborate on the lifecycle issue you mentioned in your second comment?

[ouzhenkun]

@developit @eisneim

https://jsfiddle.net/ryan_ou/uLnspcp7/2/

I wrote a jsfiddle for the lifecycle issue:
i have 3 items [ 'a', 'b', 'c' ], if i remove the first item a, this will cause componentWillUnmount and other life cycle hook(DidUnmount, DidUpdate...) invoked on incorrect child component.

ps.
add the key props for each <Item /> will fix this.

[eisneim]

@zhenkunou nice work!
i would suggest adding a warning message if array of child don't have "key" prop, just like React