跳至主要内容

直接操作

有时需要直接对组件进行更改,而无需使用状态/属性来触发整个子树的重新渲染。例如,当在浏览器中使用 React 时,有时需要直接修改 DOM 节点,移动应用中的视图也是如此。setNativeProps 是 React Native 中等同于直接设置 DOM 节点属性的方法。

注意

当频繁重新渲染导致性能瓶颈时,请使用 setNativeProps

直接操作并不是一种常用的工具。您通常只会将其用于创建连续动画,以避免渲染组件层次结构和协调大量视图的开销。setNativeProps 是一种命令式方法,它将状态存储在原生层(DOM、UIView 等)中,而不是您的 React 组件中,这使得您的代码更难以理解。

在使用它之前,请尝试使用 setStateshouldComponentUpdate 来解决您的问题。

使用 setNativeProps 编辑 TextInput 值

setNativeProps 的另一个非常常见的用例是编辑 TextInput 的值。TextInput 的 controlled 属性在 bufferDelay 很低且用户快速输入时,有时会丢弃字符。一些开发者更倾向于完全跳过此属性,而是在必要时使用 setNativeProps 直接操作 TextInput 值。

例如,以下代码演示了在点击按钮时编辑输入

您可以使用 clear 方法清除 TextInput,该方法使用相同的方法清除当前输入文本。

避免与渲染函数冲突

如果您更新了一个也由渲染函数管理的属性,则可能会遇到一些不可预测且令人困惑的错误,因为每当组件重新渲染且该属性发生更改时,之前从 setNativeProps 设置的任何值都将被完全忽略并覆盖。