React Native中this.state.data与this.data的区别是什么？

Hey there! Let’s break down the key differences between these two in your code—this is a super common point of confusion, so you’re not alone.

1. React State vs. Plain Class Property #

• this.state.data is part of React’s built-in state management system. React actively monitors changes to this.state, and when you call setState() (like you did in your API response handler), React triggers a re-render of your component to update the UI with the new state values.
• this.data is just a plain property on your component class instance. React doesn’t track changes to this at all. Modifying it won’t cause your component to re-render, so any UI that depends on this.data won’t update automatically.

In your code example:

this.setState({data: JSON.parse(response.data)[0]}) // Triggers component re-render, UI updates
this.data = JSON.parse(response.data)[0] // No re-render, UI stays unchanged

2. Update Rules & Immutability #

• For this.state, you must use setState() to update values. Directly modifying this.state (e.g., this.state.data = newVal) is a React anti-pattern—it won’t trigger a re-render and can lead to inconsistent state. Also, setState() is asynchronous, so React batches updates for better performance.
• For this.data, you can modify it directly with simple assignment (like this.data = newVal) since it’s just a regular JavaScript object property. But this freedom comes with the tradeoff that React won’t handle UI synchronization for you.

3. Lifecycle & Re-render Consistency #

• When your component re-renders (due to state or props changes), this.state is guaranteed to hold the latest value React has processed. It’s tightly integrated with React’s lifecycle methods.
• this.data doesn’t sync with React’s lifecycle. If you use this.data in your render() method, the UI might show outdated values even after you’ve updated this.data—the UI will only reflect the new value if the component re-renders for some other reason (like a separate state or prop change).

4. When to Use Which? #

• Use this.state.data when your data needs to drive UI changes. Any value that’s displayed in your component or affects how it renders should live in state.
• Use this.data only for internal, non-UI-related data—like caching a computed value, storing a reference to a third-party library instance, or holding data that doesn’t need to be reflected in the UI.

内容的提问来源于stack exchange，提问作者flix