setNativeProps
优质
小牛编辑
129浏览
2023-12-01
在 Rax 中,可以通过更新组件的 state
或者 props
来改变组件的状态。但是,这样会导致组件的 render
方法被频繁调用,从而影响应用的性能表现,基于此,官方提供了 setNativeProps
模块,通过 setNativeProps
可以直接更改原生组件的属性来更新组件状态。
安装
$ npm install rax-set-native-props --save
方法
setNativeProps(node, props?)
参数
属性 | 类型 | 默认值 | 描述 | 支持 |
---|---|---|---|---|
node | DOMNode | - | DOM 节点 | |
props | Object | {} | 需要更新的 props |
注:props 仅可以传入 style、事件与属性,当传入 children、null 或 undefined 时会被忽略
示例
import { createElement, Component, render, useRef } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import setNativeProps from 'rax-set-native-props';
function App() {
const textRef = useRef(null);
function updateStyle() {
setNativeProps(textRef.current, {
style: {
color: '#dddddd'
}
});
}
return <View>
<Text ref={textRef} >setNativeProps</Text>
<View onClick={updateStyle}>
<Text >修改文字样式</Text>
</View>
</View>
}