直接操作
有时,无需使用 state/props 来触发整个子树的重新渲染,也需要直接更改组件。例如,在浏览器中使用 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
,该方法使用相同的方法清除当前输入文本。
避免与 render 函数冲突
如果您更新的属性也由 render 函数管理,您最终可能会遇到一些不可预测且令人困惑的错误,因为每当组件重新渲染并且该属性发生更改时,先前从 setNativeProps
设置的任何值都将被完全忽略和覆盖。