当前位置: 首页 > 文档资料 > Rax 中文文档 >

setNativeProps

优质
小牛编辑
129浏览
2023-12-01

在 Rax 中,可以通过更新组件的 state 或者 props 来改变组件的状态。但是,这样会导致组件的 render 方法被频繁调用,从而影响应用的性能表现,基于此,官方提供了 setNativeProps 模块,通过 setNativeProps 可以直接更改原生组件的属性来更新组件状态。

安装

$ npm install rax-set-native-props --save

方法

setNativeProps(node, props?)

参数

属性类型默认值描述支持
nodeDOMNode-DOM 节点
propsObject{}需要更新的 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>
}