Einführung in das ref-Attribut in der View-Komponente in React Native

Beim Schreiben von Projekten mit Reactnative gibt es standardmäßig eine wunderbare Idee wie in OC oder Java oder die Idee privater Eigenschaften der aktuellen Klasse, wenn keiner der beiden Staaten angegeben ist noch Requisiten können befriedigen, das heißt ref

, das eine Ansichtskomponente in anderen Sprachen enthalten und teilweise aktualisieren kann

ref akzeptiert einen Parameter vom Typ String oder eine Funktionsfunktion

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 }
}

Das muss ich Erinnern Sie alle daran: Nur wenn die Rendermethode der Komponente aufgerufen wird, wird ref aufgerufen und die Komponente gibt ref zurück. Wenn die Render-Methode beim Aufruf von this.refs.xx nicht aufgerufen wurde, erhalten Sie undefiniert.
Erfahrung: Das Ref-Attribut wird in der Entwicklung sehr häufig verwendet. Mit diesem Objekt können Sie viele Dinge flexibel ausführen, z. B. Objekte lesen und schreiben. und sogar Funktionen für Objekte aufrufen.

Lassen Sie die Komponente lokal aktualisieren, setNativeProps
Manchmal müssen wir die Komponente direkt ändern und eine teilweise Aktualisierung auslösen, ohne Status oder Requisiten zu verwenden.
Die setNativeProps-Methode kann als direkte Änderung des DOM im Web verstanden werden. Verwenden Sie diese Methode, um Ansicht, Text und andere Komponenten zu ändern, die mit RN geliefert werden , werden die Komponenten „componentWillReceiveProps“ und „shouldComponentUpdate“ der Komponente nicht ausgelöst. , ComponentWillUpdate und andere Methoden im Komponentenlebenszyklus.

'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={&#39;text2&#39;}>   //指定本组件的引用名<View style={styles.container}>
                <Text style={styles.buttonStyle} onPress={this.buttonPressed}>按我</Text>
                <Text style={styles.textPromptStyle} ref="text2">文字提示</Text>
                <View>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"   value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}/>
                </View>
            </View>        );
    }
}

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

module.exports = RNRefDetail;

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

Beim Schreiben von Projekten mit Reactnative gibt es standardmäßig eine wunderbare Vorstellung von ​​wie in OC oder Java oder den privaten Eigenschaften der aktuellen Klasse, Zustand Wenn weder Requisiten noch Ref erfüllt sind, kann Ref

verwendet werden, um eine Ansichtskomponente in anderen Sprachen zu halten und lokal zu aktualisieren

ref Akzeptiert einen Parameter vom Typ string oder eine Funktionsfunktion

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

Bitte beachten Sie, dass ref nur dann aufgerufen wird und die Komponente ref zurückgibt, wenn die Rendermethode des Komponente heißt . Wenn die Render-Methode beim Aufruf von this.refs.xx nicht aufgerufen wurde, erhalten Sie undefiniert.
Erfahrung: Das Ref-Attribut wird in der Entwicklung sehr häufig verwendet. Mit diesem Objekt können Sie viele Dinge flexibel ausführen, z. B. Objekte lesen und schreiben. und sogar Funktionen für Objekte aufrufen.

Lassen Sie die Komponente lokal aktualisieren, setNativeProps
Manchmal müssen wir die Komponente direkt ändern und eine teilweise Aktualisierung auslösen, ohne Status oder Requisiten zu verwenden.
Die setNativeProps-Methode kann als direkte Änderung des DOM im Web verstanden werden. Verwenden Sie diese Methode, um Ansicht, Text und andere Komponenten zu ändern, die mit RN geliefert werden , werden die Komponenten „componentWillReceiveProps“ und „shouldComponentUpdate“ der Komponente nicht ausgelöst. , ComponentWillUpdate und andere Methoden im Komponentenlebenszyklus.

'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={&#39;text2&#39;}>   //指定本组件的引用名<View style={styles.container}>
                <Text style={styles.buttonStyle} onPress={this.buttonPressed}>按我</Text>
                <Text style={styles.textPromptStyle} ref="text2">文字提示</Text>
                <View>
                    <TextInput style={styles.textInputStyle}                               ref="textInputRefer"value={this.state.textInputValue}                               onChangeText={(textInputValue)=>this.setState({textInputValue})}
                    />
                </View>
            </View>
        );
    }
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: &#39;center&#39;,alignItems: &#39;center&#39;},buttonStyle: { //文本组件样式,定义简单的按钮fontSize: 20,backgroundColor: &#39;grey&#39;},textPromptStyle: { //文本组件样式fontSize: 20},textInputStyle: { //文本输入组件样式width: 150,height: 50,fontSize: 20,backgroundColor: &#39;grey&#39;}
});module.exports = RNRefDetail;

Wenn Sie auf die Schaltfläche klicken, werden die Werte der drei Steuerelemente aktualisiert, sie werden jedoch nur einzeln geändert, anstatt die Schnittstelle durch Ändern des Mechanismus der Zustandsmaschine zu aktualisieren Wird verwendet, wenn wiederholte Aktualisierungen erforderlich sind. Normalerweise kann es direkt über den Status geändert werden.
Der Nachteil dieser Verwendung besteht darin, dass lokale Änderungen zu Verwirrung bei der Zustandsmaschine führen.

Das obige ist der detaillierte Inhalt vonEinführung in das ref-Attribut in der View-Komponente in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!