As a best practice, all data needed by a component should be retrieved in the componentDidMount() event. This data should be set into state via this.setState() in componentDidMount() and then deconstructed out of state at the top of the render() method. I'm familiar with the approach of guard style rendering like this:
{userName && <div>Welcome {userName}!</div>}
But is there an easy way to short circuit the entire return of jsx if the data isn't available? For example:
render(){
if(!this.state.MyComponentData) return;
return(
//full component jsx
);
}
Does the more granular guard-style rendering approach provide an overall faster render and better UX than some type of full short-circuit like the example that I provided above? Is there a particular name for this particular UI architectural style/approach?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…