반응 네이티브의 View 구성 요소에 있는 ref 속성 소개

Reactnative로 프로젝트를 작성할 때 기본적으로 OC에 사유 재산과 같은 멋진 아이디어가 있거나 Java 또는 현재 클래스가 상태도 소품도 만족하지 않으면 ref

입니다. 다른 언어로 보기 구성 요소를 보유하고 로컬로 새로 고칠 수 있습니다

ref는 문자열 유형 또는 함수 함수의 매개변수를 허용합니다

callback。这一特性让开发者对ref的使用更加灵活。
render() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },
render(){
    return <View ref={ (e) => this._view = e } />//将组件view作为参数赋值给了this._view
}
componentDidMount(){
    this._view.style = { backgroundColor:&#39;red&#39;,width:100,height:200 }
}

모든 사람에게 다음과 같은 경우에만 상기시켜야 합니다. 컴포넌트의 render 메소드가 호출되면 ref가 호출되고 컴포넌트는 ref를 반환합니다. this.refs.xx를 호출할 때 렌더링 메서드가 호출되지 않은 경우 정의되지 않은 상태가 됩니다.
경험: ref 속성은 개발에서 매우 자주 사용됩니다. 이를 사용하면 원하는 구성 요소의 개체를 가져올 수 있습니다. 이 개체를 사용하면 변수 읽기 및 쓰기와 같은 많은 작업을 유연하게 수행할 수 있습니다. 객체, 심지어 객체의 기능을 호출합니다.

구성 요소를 로컬에서 새로 고치도록 합니다. setNativeProps
때때로 상태나 소품을 사용하지 않고 구성 요소를 직접 변경하고 부분 새로 고침을 트리거해야 하는 경우가 있습니다.
setNativeProps 메소드는 웹에서 DOM을 직접 수정하는 것으로 이해될 수 있습니다. RN과 함께 제공되는 보기, 텍스트 및 기타 구성 요소를 수정하려면 이 방법을 사용하십시오. , 구성 요소의 componentWillReceiveProps 및 shouldComponentUpdate가 트리거되지 않습니다. , componentWillUpdate 및 구성 요소 수명 주기의 기타 메서드입니다.

'use strict'import React, { Component } from 'react';

import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from 'react-native';


import Dimensions from 'Dimensions';// 屏幕宽度var screenWidth = Dimensions.get('window').width;
class RNRefDetail extends Component {// 构造    constructor(props) {
        super(props);// 初始状态this.state = {
            textInputValue: ''};         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数let textInputValue = 'yuanmenglong';this.setState({textInputValue});//修改文本输入框的属性值this.refs.textInputRefer.setNativeProps({
            editable:false});this.refs.text2.setNativeProps({
            style:{
                color:'blue',
                fontSize:30}
        });//使文本输入框变为不可编辑    }

    render() {return (//ref={'text2'}>   //指定本组件的引用名5780215a64032962b7061d5f82a1958c
                25f43358c5a6e74031934a91e31e84a1按我b735fb8965edb39ac28662131d16c063
                1d97fb11eff5dfbac89eba87cb3013cc文字提示b735fb8965edb39ac28662131d16c063
                548e7793df275d156d270cdda504ba19
                    5651aee6944549a902b4a111880e0f8ethis.setState({textInputValue})}/>
                3d260b73c372472a96940693fb62cbcc
            3d260b73c372472a96940693fb62cbcc        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'},
    buttonStyle: { //文本组件样式,定义简单的按钮fontSize: 20,
        backgroundColor: 'grey'},
    textPromptStyle: { //文本组件样式fontSize: 20},
    textInputStyle: { //文本输入组件样式width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: 'grey'}
});

module.exports = RNRefDetail;

当点击按钮时，会刷新3个控件的值，但是只是单独去改变，而不是通过改变state状态机的机制来刷新界面，在重复需要多次刷新时使用，普通的时候直接通过state改变即可。 
这样用的缺点就是局部改变，回导致状态机混乱。

Reactnative로 프로젝트를 작성할 때 기본적으로 OC나 Java의 프라이빗 속성이나 현재 클래스와 같은 멋진 아이디어가 있습니다. 상태나 소품 모두 만족하지 않으면 ref

입니다. 다른 언어로 된 뷰 컴포넌트를 보유하고 로컬에서 새로 고칠 수 있습니다

ref는 문자열 유형의 매개변수나 함수를 허용합니다

callback。这一特性让开发者对ref的使用更加灵活。
render() {return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {this._input.focus();
  },

컴포넌트의 렌더링 메소드가 호출될 때만 주의해야 합니다. ref가 호출되고 구성 요소는 ref를 반환합니다. this.refs.xx를 호출할 때 렌더링 메서드가 호출되지 않은 경우 정의되지 않은 상태가 됩니다.
경험: ref 속성은 개발에서 매우 자주 사용됩니다. 이를 사용하면 원하는 구성 요소의 개체를 가져올 수 있습니다. 이 개체를 사용하면 변수 읽기 및 쓰기와 같은 많은 작업을 유연하게 수행할 수 있습니다. 객체, 심지어 객체의 기능을 호출합니다.

구성 요소를 로컬에서 새로 고치도록 합니다. setNativeProps
때때로 상태나 소품을 사용하지 않고 구성 요소를 직접 변경하고 부분 새로 고침을 트리거해야 하는 경우가 있습니다.
setNativeProps 메소드는 웹에서 DOM을 직접 수정하는 것으로 이해될 수 있습니다. RN과 함께 제공되는 보기, 텍스트 및 기타 구성 요소를 수정하려면 이 방법을 사용하십시오. , 구성 요소의 componentWillReceiveProps 및 shouldComponentUpdate가 트리거되지 않습니다. , componentWillUpdate 및 구성 요소 수명 주기의 기타 메서드입니다.

'use strict'import React, { Component } from 'react';import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from 'react-native';import Dimensions from 'Dimensions';// 屏幕宽度var screenWidth = Dimensions.get('window').width;class RNRefDetail extends Component {// 构造constructor(props) {super(props);// 初始状态this.state = {
            textInputValue: ''};         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数let textInputValue = 'yuanmenglong';this.setState({textInputValue});//修改文本输入框的属性值this.refs.textInputRefer.setNativeProps({
            editable:false});this.refs.text2.setNativeProps({
            style:{
                color:'blue',
                fontSize:30}
        });//使文本输入框变为不可编辑}

    render() {return (//ref={'text2'}>   //指定本组件的引用名5780215a64032962b7061d5f82a1958c
                25f43358c5a6e74031934a91e31e84a1按我b735fb8965edb39ac28662131d16c063
                1d97fb11eff5dfbac89eba87cb3013cc文字提示b735fb8965edb39ac28662131d16c063
                548e7793df275d156d270cdda504ba19
                    db290f55403e75d392c59ca39c8394cbthis.setState({textInputValue})}
                    />
                3d260b73c372472a96940693fb62cbcc
            3d260b73c372472a96940693fb62cbcc
        );
    }
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center'},buttonStyle: { //文本组件样式,定义简单的按钮fontSize: 20,backgroundColor: 'grey'},textPromptStyle: { //文本组件样式fontSize: 20},textInputStyle: { //文本输入组件样式width: 150,height: 50,fontSize: 20,backgroundColor: 'grey'}
});module.exports = RNRefDetail;

버튼을 클릭하면 세 가지 컨트롤의 값이 새로 고쳐지지만 개별적으로만 변경되며 상태 상태 기계의 메커니즘을 변경하여 인터페이스를 새로 고치는 것이 아니라 반복적으로 새로 고칠 때 사용됩니다. 여러 번 필요합니다. 일반적으로 상태를 직접 통과하여 변경하면 됩니다.
이 방법을 사용할 때의 단점은 로컬 변경으로 인해 상태 시스템 혼란이 발생한다는 것입니다.

위 내용은 반응 네이티브의 View 구성 요소에 있는 ref 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!