跳到主要内容

直接操作

有时需要在不使用 state/props 来触发整个子树重新渲染的情况下,直接修改组件。例如,在使用 React 处理浏览器端时,有时需要直接修改 DOM 节点,在移动应用中操作视图也是如此。setNativeProps 是 React Native 中直接设置 DOM 节点属性的等价操作。

注意

当频繁的重新渲染造成性能瓶颈时,请使用 setNativeProps

直接操作并不是你经常会用到的工具。你通常只会在创建连续动画时使用它,以避免渲染组件层级和协调多个视图带来的开销。setNativeProps 是命令式的,它将状态存储在原生层(DOM, UIView 等),而不是你的 React 组件内,这使得你的代码更难理解。

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

使用 setNativeProps 编辑 TextInput 值

setNativeProps 的另一个非常常见的用例是编辑 TextInput 的值。当 bufferDelay 很低且用户输入非常快时,TextInput 的 controlled 属性有时会丢失字符。一些开发者更喜欢完全跳过此属性,而是根据需要使用 setNativeProps 直接操作 TextInput 的值。

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

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

避免与渲染函数冲突

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