React Native组件数据传递流程与defaultProps作用解析请求

我来帮你拆解这两个问题，结合你提供的代码详细说明：

1. DynamicText组件中defaultProps的作用及适用场景 #

先看你代码里的这段实现：

DynamicText.defaultProps = {
  onChangeText: () => {}
}

核心作用 #

defaultProps是React组件的内置特性，用来给组件的props设置默认兜底值。在这里它的关键作用是避免父组件未传递onChangeText时出现运行报错：
如果没有这个默认值，当父组件忘记传onChangeText，子组件里调用this.props.onChangeText(text)时，会抛出TypeError: undefined is not a function的错误。而我们兜底了一个空函数，就算父组件没传，调用空函数也不会导致组件崩溃。

适用场景 #

• 可选回调函数：像本例中的onChangeText，如果父组件不需要监听文本变化（比如只是展示静态文本的场景），默认的空函数能保证组件正常运行，无需额外的条件判断。
• 通用组件的默认配置：比如自定义Button组件，你可以用defaultProps设置默认的按钮文字、背景色、字体大小，父组件只需要传递差异化的参数即可，减少重复代码。
• 兼容旧代码或可选参数：如果组件更新后新增了props，但旧的调用方还没适配这个新props，defaultProps可以作为临时兼容方案，避免组件因为缺少props而崩溃。

2. 组件间数据定义与传递的分步流程 #

咱们从数据的初始定义，到最终显示在ImageBackground上，一步步拆解整个流程：

步骤1：父组件初始化数据状态 #

在FilterView的构造函数里，我们定义了用来存储文本的state：

this.state = { text: '', imageURI: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg', }

这里的text就是用来保存最终要展示的输入文本的“数据容器”。

步骤2：父组件传递回调函数给子组件 #

FilterView在渲染DynamicText时，把自己的onTextReceived方法作为onChangeText props传给子组件：

<DynamicText onChangeText={this.onTextReceived}/>

这一步相当于给子组件打开了一个“数据回传通道”，让子组件能把用户输入的文本传递回父组件。

步骤3：子组件处理输入并触发回调 #

DynamicText里的TextInput监听用户输入，触发自定义的onChange方法：

onChange = (text) => {
  this.setState({text}); // 子组件自身先存储一份输入文本（可选操作）
  this.props.onChangeText(text); // 调用父组件传过来的回调，把文本回传
}

这里子组件先更新自己的state（如果不需要在子组件内使用该文本，可以省略这一步），然后调用父组件的回调函数，把当前输入的文本作为参数传递回去。

步骤4：父组件接收数据并更新状态 #

FilterView的onTextReceived方法接收到子组件传来的文本后，更新自己的state：

onTextReceived = (text) => {
  this.setState({text});
}

React会检测到state变化，触发组件的重新渲染。

步骤5：父组件渲染数据到目标位置 #

最后，FilterView的ImageBackground里的Text组件读取state中的text并展示：

<ImageBackground source={{uri: this.state.imageURI}} style={{ width: 200, height: 300, marginTop: 5, alignItems: 'center', justifyContent: 'center' }}>
  <Text style={{color: 'white'}}>{this.state.text}</Text>
</ImageBackground>

当state更新后，这里的文本会自动刷新，显示用户最新的输入内容。

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