Рендеринг в React-Native
Я относительно новичок в том, чтобы реагировать на нативные и вообще создавать что-либо с пользовательским интерфейсом. Мне интересно, когда уместно использовать функцию 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;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Возможно, кто-то может дать лучший ответ, но, насколько я понимаю, вы бы хотели использовать class, если у вас есть локальное состояние, которым нужно манипулировать. Это как-то связано с размером файла класса по сравнению с компонентом, не относящимся к классу. В этом случае я бы рекомендовал сделать ваш файл немым компонентом, поскольку локального состояния нет. Вместо этого вы просто передаете реквизиты от родителя.
const LinkedIcon = props => (
<TouchableHighlight>
<Icon title = "circle" size = {15} />
</TouchableHighlight>
)
Надеюсь это поможет!
Ваш компонент выглядит так, как будто он может быть реализован как компонент без состояния / функциональный, где у вас нет доступа к собственным методам жизненного цикла реакции, что делает компонент более легким / быстрым.
Ваш компонент LinkedIcon как функциональный компонент/компонент без сохранения состояния может выглядеть следующим образом:
const LinkedIcon = (props) => {
return (
<TouchableHighlight>
<Icon title = "circle" size = {15} />
</TouchableHighlight>
);
}
Теперь вы можете легко создавать экземпляры нескольких LinkedIcons в родительском компоненте, который может быть компонентом с отслеживанием состояния, где вы можете обрабатывать состояния LinkedIcons (если хотите).
class Main extends Component {
render(){
return (
<View>
<LinkedIcon .../>
<LinkedIcon .../>
...
</View>
);
}
}