weechatRN

Weechat relay client for iOS using websockets https://github.com/mhoran/weechatRN
git clone http://git.hanabi.in/repos/weechatRN.git
Log | Files | Refs | README | LICENSE

commit 0086c355e560d119c550a3758b667befa58a53e0
parent 38f41a5f00deeb9eabf90a46cb285f0fcdde9a4f
Author: Johan Lindskogen <johan.lindskogen@gmail.com>
Date:   Sun,  1 Apr 2018 22:32:25 +0200

Optimize away rerenders

Diffstat:
Msrc/usecase/App.tsx | 7+++----
Msrc/usecase/buffers/ui/Buffer.tsx | 31+++++++++++++++++++++----------
Msrc/usecase/buffers/ui/BufferContainer.tsx | 16++++++++++------
Msrc/usecase/buffers/ui/BufferLine.tsx | 2+-
Msrc/usecase/buffers/ui/BufferList.tsx | 26+++++++++++++++++---------
Msrc/usecase/buffers/ui/BufferListItem.tsx | 1-
6 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/usecase/App.tsx b/src/usecase/App.tsx @@ -19,7 +19,7 @@ import BufferList from "./buffers/ui/BufferList"; import { StoreState } from "../store"; interface Props { - buffers: WeechatBuffer[]; + buffers: { [key: string]: WeechatBuffer }; currentBufferId: string | null; currentBuffer: WeechatBuffer | null; fetchLinesForBuffer: (bufferId: string) => void; @@ -52,7 +52,6 @@ class App extends React.Component<Props> { sendMessage = (message: string) => { const { currentBuffer, sendMessageToBuffer } = this.props; - console.log(this.props); sendMessageToBuffer(currentBuffer.full_name, message); }; @@ -67,7 +66,7 @@ class App extends React.Component<Props> { const sidebar = ( <BufferList - buffers={_.orderBy(buffers, ["number"])} + buffers={_.orderBy(_.values(buffers), ["number"])} currentBufferId={currentBufferId} onSelectBuffer={this.changeCurrentBuffer} /> @@ -119,7 +118,7 @@ export default connect((state: StoreState) => { const currentBuffer = currentBufferId && state.buffers[currentBufferId]; return { - buffers: _.values(state.buffers), + buffers: state.buffers, currentBufferId, currentBuffer }; diff --git a/src/usecase/buffers/ui/Buffer.tsx b/src/usecase/buffers/ui/Buffer.tsx @@ -1,5 +1,12 @@ import * as React from "react"; -import { StyleSheet, Animated, Keyboard, FlatList, View } from "react-native"; +import { + StyleSheet, + Animated, + Keyboard, + FlatList, + View, + ListRenderItem +} from "react-native"; import { connect } from "react-redux"; import * as _ from "lodash"; @@ -13,7 +20,17 @@ interface Props { bufferId: string; } -class Buffer extends React.Component<Props> { +const keyExtractor = (line: WeechatLine, index: number) => + _.last(line.pointers); + +class Buffer extends React.PureComponent<Props> { + renderBuffer: ListRenderItem<WeechatLine> = ({ item }) => { + const { onLongPress, parseArgs } = this.props; + + return ( + <BufferLine line={item} onLongPress={onLongPress} parseArgs={parseArgs} /> + ); + }; render() { const { lines, onLongPress, parseArgs } = this.props; return ( @@ -23,14 +40,8 @@ class Buffer extends React.Component<Props> { )} inverted keyboardDismissMode="interactive" - keyExtractor={line => _.last(line.pointers)} - renderItem={({ item }) => ( - <BufferLine - line={item} - onLongPress={onLongPress} - parseArgs={parseArgs} - /> - )} + keyExtractor={keyExtractor} + renderItem={this.renderBuffer} /> ); } diff --git a/src/usecase/buffers/ui/BufferContainer.tsx b/src/usecase/buffers/ui/BufferContainer.tsx @@ -39,6 +39,12 @@ export default class BufferContainer extends React.Component<Props, State> { textValue: "" }; + parseArgs = getParseArgs( + styles.link, + this.handleOnPress, + this.handleOnLongPress + ); + handleOnFocus() { Animated.timing(this.state.inputWidth, { toValue: 310, @@ -86,6 +92,8 @@ export default class BufferContainer extends React.Component<Props, State> { }); }; + onLongPress = (line: WeechatLine) => {}; + render() { const { bufferId } = this.props; const { textValue } = this.state; @@ -98,12 +106,8 @@ export default class BufferContainer extends React.Component<Props, State> { <KeyboardAvoidingView style={styles.container} behavior="padding"> <Buffer bufferId={bufferId} - onLongPress={line => null} - parseArgs={getParseArgs( - styles.link, - this.handleOnPress, - this.handleOnLongPress - )} + onLongPress={this.onLongPress} + parseArgs={this.parseArgs} /> <View style={styles.bottomBox}> <Animated.View style={{ width: this.state.inputWidth }}> diff --git a/src/usecase/buffers/ui/BufferLine.tsx b/src/usecase/buffers/ui/BufferLine.tsx @@ -9,7 +9,7 @@ interface Props { parseArgs: any; } -export default class BufferLine extends React.Component<Props> { +export default class BufferLine extends React.PureComponent<Props> { render() { const { line, onLongPress, parseArgs } = this.props; diff --git a/src/usecase/buffers/ui/BufferList.tsx b/src/usecase/buffers/ui/BufferList.tsx @@ -5,7 +5,8 @@ import { Text, TouchableHighlight, FlatList, - View + View, + ListRenderItem } from "react-native"; import BufferListItem from "./BufferListItem"; @@ -15,7 +16,20 @@ interface Props { onSelectBuffer: (b: WeechatBuffer) => any; } +const keyExtractor = (buffer: WeechatBuffer): string => buffer.id; + export default class BufferList extends React.Component<Props> { + renderListItem: ListRenderItem<WeechatBuffer> = ({ item }) => { + const { onSelectBuffer, currentBufferId } = this.props; + + return ( + <BufferListItem + buffer={item} + onSelectBuffer={onSelectBuffer} + currentBufferId={currentBufferId} + /> + ); + }; render() { const { buffers, onSelectBuffer, currentBufferId } = this.props; @@ -25,14 +39,8 @@ export default class BufferList extends React.Component<Props> { <FlatList style={styles.container} data={buffers} - keyExtractor={buffer => buffer.id} - renderItem={({ item }) => ( - <BufferListItem - buffer={item} - onSelectBuffer={onSelectBuffer} - currentBufferId={currentBufferId} - /> - )} + keyExtractor={keyExtractor} + renderItem={this.renderListItem} /> </View> ); diff --git a/src/usecase/buffers/ui/BufferListItem.tsx b/src/usecase/buffers/ui/BufferListItem.tsx @@ -5,7 +5,6 @@ import { Dimensions, Text, TouchableHighlight, - FlatList, View, TextStyle, ViewStyle