直接操作

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

有时需要直接修改组件而不通过状态/属性触发整个子树重新渲染。例如在浏览器中使用 React 时，你可能需要直接修改 DOM 节点，在移动应用中操作视图也是同样的道理。setNativeProps 就是 React Native 中直接设置 DOM 节点属性的等效方法。

注意

仅在频繁重渲染导致性能瓶颈时使用 setNativeProps！

直接操作不应成为常用工具。通常只在创建连续动画时使用，以避免渲染组件树和协调多个视图的开销。 setNativeProps 是命令式的，它将状态存储在原生层（DOM、UIView 等）而非 React 组件中，这会增加代码的理解难度。

在使用前，请先尝试用 setState 和 shouldComponentUpdate 解决问题。

使用 setNativeProps 编辑 TextInput 值

另一个常见场景是使用 setNativeProps 编辑 TextInput 的值。当 bufferDelay 设置较低且用户输入极快时，TextInput 的 controlled 属性可能导致字符丢失。部分开发者倾向于完全跳过该属性，直接使用 setNativeProps 在必要时操作 TextInput 的值。

例如，以下代码演示了点击按钮时编辑输入框：

TypeScript

JavaScript

您可以使用 clear 方法清除 TextInput，该方法采用相同方式清空当前输入文本。

避免与渲染函数冲突

若您更新的属性同时被渲染函数管理，可能导致不可预测的混乱错误。因为每当组件重新渲染且该属性变化时，先前通过 setNativeProps 设置的值会被完全忽略并覆盖。