React Native：定義用戶定義組件的最佳做法是什麼？

const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
);

我看到有人在render中寫這段代碼。React Native：定義用戶定義組件的最佳做法是什麼？

我把這段代碼放在import和class define之間，這段代碼也可以工作。

我的代碼是這樣的：

import React, {Component, PropTypes} from "react"; 

import { 
    View, 
    Image, 
    Text, 
    ListView, 
    Dimensions, 
    StyleSheet, 
    TouchableOpacity, 
} from 'react-native'; 

const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 



class MyOrder extends Component { 

    render(){ 
    return (

    ... 
    ) 
    } 
    }

在我看來，該render功能將被幾次執行。如果我將代碼放在import code和class define之間，代碼將被執行一次。

我的觀點正確嗎？

我是否需要將此用戶定義的代碼放在單獨的文件中？

在單獨的文件：

export default const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
);

在container component：從 '文件路徑'

進口ItemView控件。

這種做法是否優秀？

來源

2017-05-09 jiexishede

如果您想重用該代碼，請將其作爲組件包裝。但是您將調用此方法的次數與渲染方法的調用次數相同（我假定您將在render中調用該方法），那麼導致您認爲代碼將僅執行一次的原因是什麼？而且，你沒有遵循Facebook團隊提出的標準。 –

我認爲渲染函數會執行幾次。所以const句子會被執行幾次。如果我將定義的代碼放在渲染函數之外，我認爲定義的語句執行一次。 – jiexishede

的按鈕，這是用在幾乎每一個組件，以使其可重用的組件它可能是一個很好的做法，如果你總是定義爲可重用組件單獨的文件夾，下面是一個例子：

//Button.js 
import React, {Component, PropTypes} from "react"; 

import { 
    View, 
    Image, 
    Text, 
    ListView, 
    Dimensions, 
    StyleSheet, 
    TouchableOpacity, 
} from 'react-native'; 

const Button = (props) => { 
    const { title,onpress,isActive } = this.props 
    return ( 
    <TouchableOpacity onPress={onPress}> 
     <View style={[styles.itemVTextBox, 
     isActive ? styles.activeItemVTextBox : null 
     ]}> 
     <Text style={[ 
      styles.item, 
      isActive ? styles.activeItem : null 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 
} 

export default Button 

//Main component 

import Button from '@.../Button.js' 

class MyOrder extends Component { 

    render(){ 
    return (
    <Button title='login' isActive={false} onPress={this.loginButtonPressed()} /> 
    ... 
    ) 
    } 
    }

按鈕。 js，我已經使用了jsx，它受到本機反應的支持，並且它看起來很乾淨並且很好的實踐可以像這樣實現。

Cheers :)

來源

2017-05-09 03:36:32 Codesingh

React Native：定義用戶定義組件的最佳做法是什麼？

回答

相關問題