Introduction à l'attribut ref dans le composant View dans React Native

Lors de l'écriture de projets avec Reactnative, il y a par défaut une idée merveilleuse comme en OC, ou Java ou l'idée de propriétés privées de la classe actuelle, quand ni l'un ni l'autre n'indique ni les accessoires ne peuvent satisfaire, c'est-à-dire la ref

qui peut contenir un composant de vue dans d'autres langues et actualiser partiellement

ref accepte un paramètre de type chaîne ou une fonction fonction

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

Je dois rappelez à tout le monde que ce n'est que lorsque la méthode de rendu du composant est appelée que ref sera appelée et que le composant renverra ref. Si la méthode de rendu n'a pas été appelée lorsque vous appelez this.refs.xx, vous obtenez un résultat indéfini.
Expérience : L'attribut ref est utilisé très fréquemment dans le développement. En l'utilisant, vous pouvez obtenir l'objet de n'importe quel composant de votre choix, avec cet objet, vous pouvez faire beaucoup de choses de manière flexible, comme : lire et écrire des variables, et même appeler des fonctions sur des objets.

Laisser le composant s'actualiser localement setNativeProps
Parfois, nous devons modifier directement le composant et déclencher une actualisation partielle sans utiliser d'état ou d'accessoires.
La méthode setNativeProps peut être comprise comme modifiant directement le DOM sur le web. Utilisez cette méthode pour modifier View, Text et d'autres composants fournis avec RN , les composants elementWillReceiveProps et ShouldComponentUpdate du composant ne seront pas déclenchés. , composantWillUpdate et d'autres méthodes dans le cycle de vie des composants.

'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改变即可。 
这样用的缺点就是局部改变，回导致状态机混乱。

Lors de l'écriture de projets avec Reactnative, par défaut il y a une merveilleuse idée de​​comme en OC, ou Java, ou les propriétés privées de la classe actuelle, state Lorsque ni props ni ref ne sont satisfaits, ref

peut être utilisé pour contenir un composant de vue dans d'autres langues et l'actualiser localement

ref Accepte un paramètre de type string ou une fonction function

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

Veuillez noter que ref sera appelé et le composant retournera ref uniquement lorsque la méthode de rendu du composant est appelé. Si la méthode de rendu n'a pas été appelée lorsque vous appelez this.refs.xx, vous obtenez un résultat indéfini.
Expérience : L'attribut ref est utilisé très fréquemment dans le développement. En l'utilisant, vous pouvez obtenir l'objet de n'importe quel composant de votre choix, avec cet objet, vous pouvez faire beaucoup de choses de manière flexible, comme : lire et écrire des variables, et même appeler des fonctions sur des objets.

Laisser le composant s'actualiser localement setNativeProps
Parfois, nous devons modifier directement le composant et déclencher une actualisation partielle sans utiliser d'état ou d'accessoires.
La méthode setNativeProps peut être comprise comme modifiant directement le DOM sur le web. Utilisez cette méthode pour modifier View, Text et d'autres composants fournis avec RN , les composants elementWillReceiveProps et ShouldComponentUpdate du composant ne seront pas déclenchés. , composantWillUpdate et d'autres méthodes dans le cycle de vie des composants.

'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;

Lorsque vous cliquez sur le bouton, les valeurs​​des trois contrôles seront actualisées, mais elles ne sont modifiées qu'individuellement, plutôt que d'actualiser l'interface en changeant le mécanisme de la machine à états. . Ceci est utilisé lorsque des actualisations répétées sont nécessaires. Normalement, il peut être modifié directement via l'état.
L'inconvénient de l'utiliser de cette façon est que les changements locaux entraîneront une confusion dans la machine à états.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!