直接操作
有时需要直接更改组件,而无需使用状态/属性触发整个子树的重新渲染。例如,在浏览器中使用 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` 设置的任何值都将被完全忽略和覆盖。