React Native父子组件传Props最佳实践及State传值可行性疑问

Hey there! Since you're building with React Native (and focusing on Android testing—solid choice!), let's break down your question about using a child component's constructor to turn props into state.

首先，技术上可行吗？ #

Short answer: Yes, technically you can do this. You absolutely can initialize a child component's state with values from props in the constructor, like so:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      localData: props.myProp
    };
  }

  render() {
    return <Text>{this.state.localData}</Text>;
  }
}

But whether this is a good practice depends entirely on your specific use case.

什么时候属于不良实践？ #

This becomes an anti-pattern when the prop passed from the parent can change over time. Remember: a component's constructor only runs once, when the component is first mounted. If the parent updates myProp later, the child's localData state won't automatically update—leading to out-of-sync data that's tricky to debug.

For example: if your parent component has a counter that increments, and you pass that counter as a prop to the child, storing it in the child's state will mean the child keeps showing the initial counter value forever, even as the parent's counter changes. That's a clear red flag.

什么时候这么做是合理的？ #

It's totally acceptable when the prop is a one-time initial value that the child will manage independently after mounting. For instance:

• A parent passes an initialUsername prop to a profile edit component
• The child stores that value in state, then lets the user edit it locally
• The child doesn't need to sync back with the parent's original prop unless explicitly triggered (like a save button)

In this case, you're using the prop to seed the child's state, and the child takes over from there—no data sync issues because you don't expect the parent's prop to change.

最佳实践建议 #

• Prefer using props directly whenever possible: If the child just needs to display or use the prop value without modifying it, there's no need to copy it to state. This keeps your data flow simple and avoids duplication.
• If you need local state derived from props:
  • In class components, use componentDidUpdate to watch for prop changes and update state accordingly
  • In functional components, use useEffect with the prop as a dependency to sync state

  // Class component example
  class ChildComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        localData: props.myProp
      };
    }
  
    componentDidUpdate(prevProps) {
      // Update state only when the prop changes
      if (prevProps.myProp !== this.props.myProp) {
        this.setState({ localData: this.props.myProp });
      }
    }
  
    render() {
      return <Text>{this.state.localData}</Text>;
    }
  }
  
  // Functional component example
  function ChildComponent({ myProp }) {
    const [localData, setLocalData] = useState(myProp);
  
    useEffect(() => {
      setLocalData(myProp);
    }, [myProp]); // Re-run when myProp changes
  
    return <Text>{localData}</Text>;
  }
  

• Ask yourself: Do I really need local state? If the child's state should always reflect the parent's prop, skip the local state entirely—just use this.props.myProp (or the prop directly in function components) everywhere.

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