性能比较this.setState（this.state）与this.setState（{}）

Question

I have a scenario in which I get data from api. In this case my componentWillReceiveProps() gets triggered whenever I get new value from store.

componentWillReceiveProps(newProps){
   if(newProps.listOne){
     this.state.listOne = newProps.listOne;
   }
   if(newProps.listTwo){
     this.state.listTwo = newProps.listTwo;
   }

   this.setState(this.state);

}

Now as per react doc it is inappropriate to use this.setState(this.state);

So keeping that in mind the way to update state would be

componentWillReceiveProps(newProps){
   if(newProps.listOne){
     this.setState({listOne : newProps.listOne});
   }
   if(newProps.listTwo){
     this.setState({listTwo : newProps.listTwo});
   }

}

In Case 1 my Render gets triggered only once after I have copied all the data to state. In case 2 my render(and all intermediate life cycles) get triggered, each time my If condition gets fulfilled.

So I don't understand how it improves my performance. Lets say we are talking about not one but lot of conditional update of state.

Answer 1

If you want to call setState only once, you can do it like this:

componentWillReceiveProps(newProps) {
   // Copy the state instead of mutating this.state directly.
   const state = { ...this.state };

   if (newProps.listOne) {
      state.listOne = newProps.listOne;
   }

   if (newProps.listTwo) {
      state.listTwo = newProps.listTwo;
   }

   this.setState(state);
}

You can further improve here by using truly immutable data structures by means of libraries such as Immuable.js.

However, manually batching updates like this isn't necessary from a performance point of view; React internally batches these updates already since this is a lifecycle hook. It might make sense if you want to use the callback from setState , though.