Last active
June 29, 2018 10:54
-
-
Save luyx2412/a1f5767f65a04169d25086fdfa6c67bc to your computer and use it in GitHub Desktop.
improve performance note React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Should be use PureComponent to avoid re-render many times --> https://reactjs.org/docs/react-api.html#reactpurecomponent | |
- Seperate Container file and Component file --> https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 | |
- Avoid use .bind when handle function --> https://stackoverflow.com/a/32192892/6622971 | |
- Don’t use arrow functions in your render methods --> onPress={(e) => this.handlePress(e)} --> only use when need pass params to handle, or | |
export default ({deleteItem, item}) => { | |
const _onDeleteTap(){ | |
deleteItem(item.id) | |
} | |
return( | |
<TouchableOpacity onPress={_onDeleteTap}> | |
<Text>Delete</Text> | |
</TouchableOpacity> | |
) } | |
- Use Redux carefully which avoid re-render many times and avoid use unnecessary. Can use reselect https://github.com/reduxjs/reselect. | |
- Should be use .eslint to clean code and warning unuse. | |
- Should be handle "loading" when fetch api do not finish. | |
- Use Profiler to perf performance when render --> https://www.dropbox.com/s/pt3gwnq4ukzg9xw/Profiler.tar.gz?dl=0 | |
- prettier --write App/**/*.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"parser": "babel-eslint", | |
"extends": ["airbnb", "prettier"], | |
"parserOptions": { | |
"ecmaFeatures": { | |
"experimentalObjectRestSpread": true, | |
"jsx": true, | |
"modules": true | |
}, | |
"ecmaVersion": 7, | |
"sourceType": "module" | |
}, | |
"plugins": ["import"], | |
"ecmaFeatures": { | |
"jsx": true | |
}, | |
"globals": { | |
"expect": true, | |
"setupTest": true, | |
"fetch": true, | |
"__DEV__": true | |
}, | |
"env": { | |
"es6": true, | |
"mocha": true | |
}, | |
"rules": { | |
"semi": [2, "always"] | |
"react/jsx-closing-bracket-location": 0, | |
"import/no-extraneous-dependencies": 0, | |
"global-require": 0, | |
"new-cap": [ | |
2, | |
{ | |
"newIsCap": true, | |
"capIsNew": false | |
} | |
], | |
"max-len": [1, 160, 2], | |
"arrow-body-style": 0, | |
"class-methods-use-this": 0, | |
"imports-first": 0, | |
"react/jsx-filename-extension": [ | |
1, | |
{ | |
"extensions": [".js", ".jsx"] | |
} | |
], | |
"no-underscore-dangle": 0, | |
"no-use-before-define": 0, | |
"react/forbid-prop-types": 0, | |
"no-return-assign": [2, "except-parens"], | |
"generator-star-spacing": 0, | |
"import/prefer-default-export": 0, | |
"react/jsx-wrap-multilines": 0, | |
"arrow-parens": 0, | |
"react/sort-comp": 0, | |
"react/require-default-props": 0, | |
"react/jsx-indent": 0, | |
"import/extensions": "off", | |
"import/no-unresolved": "off", | |
"react/no-unescaped-entities": 0, | |
"import/no-named-as-default": 0, | |
"no-case-declarations": 0, | |
"no-nested-ternary": 0, | |
"no-continue": 0, | |
"prefer-destructuring": 0, | |
"no-plusplus": [ | |
"error", | |
{ | |
"allowForLoopAfterthoughts": true | |
} | |
] | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"printWidth": 80, | |
"parser": "babylon", | |
"useTabs": false, | |
"tabWidth": 2, | |
"singleQuote": true, | |
"jsxBracketSameLine": true, | |
"arrowParens": "always", | |
"insertPragma": true, | |
"trailingComma": "es5", | |
"filepath": "App/**/*.js" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Please install https://github.com/expo/babel-preset-expo to use decorators javascript | |
* And add to .babelrc | |
*/ | |
{ | |
"presets": ["babel-preset-expo"], | |
"env": { | |
"production": { | |
"plugins": ["transform-remove-console"] | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Show loading to avoid render unnecessary and improve UX | |
*/ | |
import React, { Component } from 'react' | |
import PropTypes from 'prop-types' | |
import { View, Text } from 'react-native' | |
import { Loading } from '@components' | |
export default class Home extends Component { | |
static propTypes = { | |
data: PropTypes.object, | |
isLoading: PropTypes.bool.isLoading | |
} | |
static defaultProps = { | |
isLoading: false | |
} | |
render() { | |
if (this.props.isLoading || !this.props.data) return <Loading /> | |
return ( | |
<View> | |
<Text>{this.props.data.name}</Text> | |
</View> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Should be use PureComponent to avoid re-render many times --> auto compare if changed re-render component | |
* And If using eslint which will show warning about Pure Component | |
*/ | |
import React, { PureComponent } from 'react' | |
import PropTypes from 'prop-types' | |
import { View, Text, TouchableWithoutFeedback, Image } from 'react-native' | |
import { Languages, Tools } from '@common' | |
import styles from './styles' | |
export default class UserProfileHeader extends PureComponent { | |
// constructor(props) { | |
// super(props) | |
// } | |
static propTypes = { | |
onLogin: PropTypes.func.isRequired, | |
onLogout: PropTypes.func.isRequired, | |
user: PropTypes.object, | |
} | |
loginHandle = () => { | |
if (this.props.user.name === Languages.Guest) { | |
this.props.onLogin() | |
} else { | |
this.props.onLogout() | |
} | |
} | |
render() { | |
const { user } = this.props | |
const avatar = Tools.getAvatar(user) | |
return ( | |
<View style={styles.container}> | |
<View style={styles.header}> | |
<Image source={avatar} style={styles.avatar} /> | |
<View style={styles.textContainer}> | |
<Text style={styles.fullName}>{user.name}</Text> | |
<Text style={styles.address}>{user ? user.address : ''}</Text> | |
<TouchableWithoutFeedback onPress={this.loginHandle}> | |
<Text style={styles.loginText}> | |
{user.name === Languages.Guest | |
? Languages.Login | |
: Languages.Logout} | |
</Text> | |
</TouchableWithoutFeedback> | |
</View> | |
</View> | |
</View> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Stateless component to improve performance | |
* Shoule be add propTypes to check validate props | |
*/ | |
import React from 'react' | |
import PropTypes from 'prop-types' | |
// import { Image } from 'react-native' | |
import FastImage from 'react-native-fast-image' | |
const ImageCache = ({ style, uri }) => { | |
return ( | |
<FastImage | |
style={style} | |
source={{ uri, priority: FastImage.priority.normal }} | |
// resizeMode={FastImage.resizeMode.contain} | |
/> | |
) | |
} | |
ImageCache.propTypes = { | |
style: PropTypes.any, | |
uri: PropTypes.any, | |
} | |
export default ImageCache |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment