it-ebooks - React Native Training
Here you can read online it-ebooks - React Native Training full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2018, publisher: iBooker it-ebooks, genre: Computer. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:
Romance novel
Science fiction
Adventure
Detective
Science
History
Home and family
Prose
Art
Politics
Computer
Non-fiction
Religion
Business
Children
Humor
Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.
React Native Training: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "React Native Training" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
it-ebooks: author's other books
Who wrote React Native Training? Find out the surname, the name of the author of the book and a list of all author's works by series.
React Native Training — read online for free the complete book (whole text) full work
Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "React Native Training" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.
Font size:
Interval:
Bookmark:
This chapter can be applied to all react apps.
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, keep shouldComponentUpdate simple
Immutable is a concept from functional programming, one of immutable data features is that it can not be modified after being created. So there are some algorithm to create hash for every data structure(for more detail).We can use this feature to prevent deeply compare, shallow compare is enough.Here we will use immutable-js from facebook
demo3
In demo3, we click first button several times, times will only plus one time, click second button , times will increase.
- Requirement follow Getting Started
- Generate a new React Native project
react-native init testRn - Build & run project
react-native run-iosor opentestRn/ios/testRn.xcodeprojand build with XCode's play button
or if the app already builded, start the webserver
npm start//orreact-native start1.JavaScript bridge
2.React Native Packager
1.developer menu
2.Chrome Devtools
3.log
console.log('some text');console.dir({a:1, b:2, c:3});debugger;//breaking point4.Atom & nuclide
5.inspect
Open Atom Command Palette package with cmd-shift-p and search "inspector", then click "Nuclide React Native Inspector:Show"
6.Real device
6.1 Deploy to real deviceproject_name/ios/project_name/AppDelegate.m
//jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; /** * OPTION 2 * Load from pre-bundled file on disk. The static bundle is automatically * generated by the "Bundle React Native code and images" build step when * running the project on an actual device or running the project on the * simulator in the "Release" build configuration. */ jsCodeLocation = [[NSBundle mainBundle] URLForResource:@ "main" withExtension:@ "jsbundle" ];6.2 Debug in real device
1.project_name/ios/project_name/AppDelegate.m
jsCodeLocation = [NSURL URLWithString:@ "http://172.28.0.230:8081/index.ios.bundle?platform=ios&dev=true" ];2.node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.m
if (!_url) { NSUserDefaults *standardDefaults = [NSUserDefaults standardUserDefaults]; NSInteger port = [standardDefaults integerForKey:@ "websocket-executor-port" ] ?: 8081 ; NSString *URLString = [NSString stringWithFormat:@ "http://172.28.0.230:%zd/debugger-proxy?role=client" , port]; _url = [RCTConvert NSURL:URLString]; }
- ReactJS
- React Native
- Nuclide
- React Native: Bringing modern web techniques to mobile
- React Native
- React Native
- React Native
- JavaScriptCore
- React Native iOS
.....render() { const txt = 'Hello' ; function say ( name ) { return 'I am ' +name; } return ( < View > < Text > This is a title! </<span class="hljs-class">Text > < Text > {txt} </<span class="hljs-class">Text > < View > < Text > {say('React')} </<span class="hljs-class">Text > </<span class="hljs-class">View > </<span class="hljs-class">View > );}.....Instantiation
1.1 The lifecycle methods that are called the first time an instance is created
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
1.2 For all subsequent uses of that component class:
- getInitialState
- componentWillMount
- render
- componentDidMount
Lifetime
- componentWillReceiveProps
- shouldComponentUpdate // return true|false
shouldComponentUpdate(nextProps, nextState) { return nextProps.id !== this .props.id;} - componentWillUpdate //not called for the initial render
- render
- componentDidUpdate
Teardown & cleanup
- componentWillUnmount
1.props: properties are passed to a component and can hold any data
class User extends Component { render(){ const user = this .props.data; this .props.onReady( 'I am ready!' ); return ( < View > < Text > score: {this.props.score} type: {this.props.type} Name: {user.name} Age: {user.age} </<span class="hljs-class">Text > </<span class="hljs-class">View >Font size:
Interval:
Bookmark:
Similar books «React Native Training»
Look at similar books to React Native Training. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.
Discussion, reviews of the book React Native Training and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.