Posts

Performance

shouldComponentUpdate This chapter can be applied to all react apps. shouldComponentUpdate React is usually fast, but you still can improve performance by optimizing function  shouldComponentUpdate . By default it returns true, if returns false, the render function will be skipped. This function is frequently invoked when states or props are changed. So it's important to  keep it simple and fast . When you called  setState , the  render  function will always be excuted even if previous states are equal to current. This is where we can make some optimization. demo1 In demo1, when click button, it will set same state, but render times will still increase. demo2 In demo2, we check the value of name is equal to before or not, if equal return false, then we reduce the times of render function. But if our states structure is complicated, such as  { a: { b: { c: [1, 2, 3] }}} , we have to compare them deeply. This is obviously against the rules we mentioned above,  kee
Post a Comment
Read more

Router - Navigator

Image
1.define routes import MainTabsView from './MainTabsView' ; import EditView from './EditView' ; import BroswerView from './BroswerView' ; const ROUTES = { MainTabsView, BroswerView, EditView }; 2.config Navigator class App extends Component { renderScene = (route, navigator) => { let Scene = ROUTES[route.name]; return <Scene {...route} navigator={navigator}/>; } configureScene = (route, routeStack) => { switch (route.name){ case 'EditView': return Navigator.SceneConfigs.FloatFromBottom; default: return Navigator.SceneConfigs.PushFromRight; } } render() { return ( <View style={styles.container}> <StatusBar barStyle="light-content"/> <Navigator initialRoute={{name: 'MainTabsView'}} renderScene={this.renderScene} configureScene={this.configureScene}/> </View> ) }
Post a Comment
Read more

Data - Persistent

1. AsyncStorage 2.apply  redux-persist  middlewear import { AsyncStorage } from 'react-native' ; import { applyMiddleware, createStore, compose } from 'redux' ; import thunk from 'redux-thunk' ; import {persistStore, autoRehydrate} from 'redux-persist' ; import reducers from '../reducers' ; var middlewares = compose(applyMiddleware(thunk), autoRehydrate()); export default function configureStore ( ) { const store = createStore(reducers, undefined , middlewares); persistStore(store, {storage: AsyncStorage}); return store; }
Post a Comment
Read more

Data - Networking - Fetch

Image
 Fetch 1.apply  redux-thunk  middleware import { applyMiddleware, createStore, compose } from 'redux' ; import thunk from 'redux-thunk' ; import createLogger from 'redux-logger' ; import reducers from '../reducers' ; var middlewares = compose(applyMiddleware(thunk), autoRehydrate()); export default function configureStore ( ) { const store = createStore(reducers, undefined , middlewares); return store; } 2.start & end action types //todo action types export const START_FETCH_ALL_TODOS = 'START_FETCH_ALL_TODOS' ; export const FETCH_ALL_TODOS = 'FETCH_ALL_TODOS' ; 3.fetch flow import * as types from '../constants/ActionTypes' ; import * as APIs from '../constants/ServerAPIs' ; function shouldFetchAllTodos ( state ) { const data = state.todos; if (data && data.isFetchingAllTodos) { return false } return true ; } export function fetchAllTodos ( ) {
Post a Comment
Read more

react-redux

1.Actions import * as navigationActions from './navigation' ; import * as todosActions from './todos' ; export default {...navigationActions, ...todosActions}; 2.combineReducers() import { combineReducers } from 'redux' ; import navigation from './navigation' ; import todos from './todos' ; const rootReducer = combineReducers({ navigation, todos }); export default rootReducer; 3.Application state by configureStore() import { createStore } from 'redux' ; import reducers from '../reducers' ; export default function configureStore ( ) { const store = createStore(reducers); return store; } 4.mapStateToProps & mapDispatchToProps & bindActionCreators import { bindActionCreators } from 'redux' ; import { connect } from 'react-redux' ; class App extends Component { renderTodoList = ()=>{ //reder todo list return this .props.todos.map( (todo)=
Post a Comment
Read more