在悬停时更改img React重新渲染所有子项

Question

I need to change the url of the img on hover. But the function trigger all of the children thats render. I couldn't find a way to make the function trigger each children separate. I try to make some new state to handle the indexes, but it didn't work...

const Team = React.createClass ({

    getInitialState : function() {
      return { hovered: false }
    },

    componentDidMount(){
        this.props.fetchTeam();
        document.title = "Equipe | [ Adesign";
    },

    onMouseOver : function () {
      this.setState({ hovered:true });
    },

    onMouseOut : function () {
      this.setState({ hovered:false });
    },

    render(){
        return (
            <div className="wrapper">
                <div className="Team">
                    <HeaderAbout />
                    <h1>EQUIPE</h1>
                    <div className="content-team">
                    {this.props.posts.team.map((singleTeam, i) => {
                        var imgUrl = singleTeam.acf.photo.url;
                        if (this.state.hovered) {
                            imgUrl = singleTeam.acf.gif.url;
                        } else {
                            imgUrl = singleTeam.acf.photo.url;
                        }
                        return(
                            <div key={i} className="single-team col-xs-12 col-sm-6 col-md-4" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                                <img className="img-responsive" src={imgUrl}/>
                                <p>{singleTeam.title.rendered}</p>
                            </div>
                        )
                    })}
                    </div>
                </div>
            </div>
        )
    }
});

Answer 1

You want to checkout the shouldComponentUpdate method :

Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.

Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.

Answer 2

In order to avoid rerendering all the images you can create a component to render an image that contains the state and the event handlers. By doing so, you prevent to rerender the parent component and its siblings whenever an image is hovered.

Edit: I just realized that your code changes all the images when any of them is hovered. Are you sure that it is what you want? In that case, you need to rerender everything. My solution is only valid if you only want to change the hovered image, leaving the others intact.