Рендеринг в React-Native - PullRequest
Новая
       14

Рендеринг в React-Native

0 голосов
/ 13 июня 2019

Я относительно новичок, чтобы реагировать на нативный и вообще строить что-либо с пользовательским интерфейсом.Мне интересно, когда уместно использовать функцию render{} при программировании приложения.Я спрашиваю об этом, потому что мне интересно, как это влияет на приложение.Например, если я создаю компонент <LinkedIcon> и пытаюсь разместить их на одном экране, тогда каждая точка должна вызвать render.Если бы не то, что я бы сделал вместо этого.

Пример кода: 

    import React, { Component } from "react";
    import { Linking, View, TouchableHighlight } from "react-native";
    import Icon from "react-native-vector-icons/FontAwesome";

    class LinkedIcon extends Component<Props> { //will show about up to 20 on one screen 
      render() {
        return (
           <TouchableHighlight>
           <Icon title="circle" size={15} />
         </TouchableHighlight>
        );
      }
    }

    export default LinkedIcon;

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Ваш компонент выглядит так, как будто он может быть реализован как компонент без состояния / функциональный, где у вас нет доступа к встроенным методам жизненного цикла реагирования, что делает компонент более легким / быстрым.

Ваш компонент LinkedIcon как функциональный компонент / компонент без сохранения состояния может выглядеть следующим образом: 

const LinkedIcon = (props) => {
   return (
       <TouchableHighlight>
           <Icon title="circle" size={15} />
       </TouchableHighlight>
   );
}

Теперь вы можете легко создать несколько экземпляров LinkedIcon в родительском компоненте, который может быть компонентом с состоянием, где вы можете обрабатыватьсостояния LinkedIcons (если хотите).

class Main extends Component {

   render(){
      return (
         <View>
            <LinkedIcon .../>
            <LinkedIcon .../>
             ...
         </View>
      );
   }
}
1 голос
/ 13 июня 2019

Может быть, кто-нибудь может дать лучший ответ, но, насколько я понимаю, вы захотите использовать class, если у вас есть локальное состояние, которым вы должны манипулировать.Это как-то связано с размером файла класса, а не компонента класса.В этом случае я бы порекомендовал сделать ваш файл немым компонентом, так как нет локального состояния ... вместо этого вы просто передаёте реквизиты от родителя. 

const LinkedIcon = props => (
    <TouchableHighlight>
        <Icon title="circle" size={15} />
    </TouchableHighlight>
)

Надеюсь, это поможет!

...