直接操作
有时有必要直接对组件进行更改,而不使用 state/props 来触发整个子树的重新渲染。例如,在浏览器中使用 React 时,您有时需要直接修改 DOM 节点,移动应用中的视图也是如此。setNativeProps 相当于在 DOM 节点上直接设置属性。
警告
当频繁重新渲染造成性能瓶颈时,请使用 setNativeProps!
直接操作不会是您经常使用的工具。您通常只会在创建连续动画时使用它,以避免渲染组件层次结构和协调许多视图的开销。
setNativeProps 是命令式的,并将状态存储在本机层(DOM、UIView 等)中,而不是存储在 React 组件中,这使得您的代码更难理解。
在使用它之前,请尝试使用 setState 和 shouldComponentUpdate 来解决您的问题。
使用 setNativeProps 编辑 TextInput 值
setNativeProps 的另一个非常常见的用例是编辑 TextInput 的值。当 bufferDelay 较低且用户输入非常快时,TextInput 的 controlled 属性有时会丢失字符。一些开发人员倾向于完全跳过此属性,而是在必要时使用 setNativeProps 直接操作 TextInput 值。
例如,以下代码演示了在点击按钮时编辑输入:
- TypeScript
- JavaScript
您可以使用 clear 方法来清除 TextInput,该方法使用相同的方法清除当前输入文本。
避免与渲染函数冲突
如果您更新了一个也由渲染函数管理的属性,您可能会遇到一些不可预测且令人困惑的错误,因为每当组件重新渲染且该属性发生变化时,之前通过 setNativeProps 设置的任何值都将被完全忽略并覆盖。