This article is my published book "React Native and actual combat" serial sharing, the book by the mechanical Industry publishing house, the book detailed React Native framework underlying principles, React Native component layout, components and API Introduction and code combat, and React Nati ve and IOS, Android plat
JSXReact, introduced a new syntax named JSX, it gives JS in the ability to write HTML tags, do not need to add quotation marks. JSX's syntax seems to be a template, but after compiling it, it turns into a JS syntax, just a syntactic sugar in the process of writing.JSX's parser will help us read this syntax and deal with it.The following is a simple example.const element = This is actually equivalent to the
problem.Many of the existing front-end frameworks are committed to solving such problems, the basic ideas are based on the mv* model, here is an article detailing the principles and advantages and disadvantages of various mv* models.So, how did react solve the problem?React focus on components. The component that react understands is actually a state machine. Wh
the Componentwillreceiveprops function ),Name GetdefaultpropsName getinitialstateName ComponentwillmountName RenderName ComponentdidmountName ComponentwillreceivepropsObject {name: "Lizhangqu" }Name shouldcomponentupdateName componentwillupdateName RenderName conponentdidupdateName ComponentwillunmountAnd on the commissioning, React-native official website provides a chrome under debugging plug-in, see Chrome Developer Tools, after installing the p
Initialization
1, Getdefaultprops ()
Set the default props, or you can set the default properties of the component with Dufaultprops.
2, Getinitialstate ()
There is no such hook function when using the class syntax of ES6, you can define this.state directly in the constructor. You can now access the This.props
3, Componentwillmount ()
Only called when the component is initialized, the component updates are not called at a later time, and the entire life
Every living creature has its own life cycle, from birth, adolescence, adulthood, to death. Similarly, a component has its specific life cycle, and react describes its entire life cycle in different ways.
The following is a structure that defines a react component:
Import
This article brings the content is about the analysis of react components of the life cycle (code analysis), there is a certain reference value, there is a need for friends to refer to, I hope you have some help.
The entire React life cycle has 3 stages: Create, update, unload, each phase has corresponding work and me
OverviewThe so-called life cycle, which is the state that an object undergoes from its inception to the last extinction, understands the life cycle of the space and is a knowledge point that must be mastered in the development. Just like components in Android development, React native's components also have a lifecycle (Lifecycle).The life
Review the previous knowledge
Props can only pass data, cannot be modified, and can only be passed to child components through parent component;
State is used to hold the states of the interaction, with each component having its own status property. Data cannot be passed between components.
The values passed between components can find the parent component that is common among these components, and the State property is set on the parent component.
The
This document is synchronized to the public number http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==mid=402267570idx=1sn= 4b0dc27842c32d902bad2dc4eea75f9a#rdInterested in can sweep code attention to haThe term life cycle, usually refers to the birth and death of an object. The code codes of the bitter force should not be unfamiliar. The "Object" in object-oriented programming also has the concept of life cycle
Overview
The life cycle of react components is the process of react components from creation to extinction. It is broadly divided into three phases:
1.Mounting component loading and initializing
2.Updating component Updates
3.Unmounting component Offload
legend
life cycle function and its usage
Constructor
component.You can also go back null or false show that you don't need to render anything. In fact, React renders a label to handle the current differential check logic. When returned null or false , it this.getDOMNode() is returned null .render()The function should be purely, meaning that the function does not modify the component state, each call returns the same result, does not read and write the DOM information, and does not interact with the br
null, False or any react component can only appear with one top-level component (cannot return an array) cannot change the state of the component cannot modify the output of the DOM 5.componentDidMount the true DOM is rendered after the call, in which the method can be This.getdomnode () Access to the real DOM element. It is now possible to manipulate the DOM with other class libraries. On the server side, the method is not called. The 6.component
React Component Life cycle
In this section we will discuss the life cycle of the React component.
The lifecycle of a component can be divided into three states: mounting: Inserted into the real Dom Updating: being re-rendered unmounting: Moved out of the real DOM
The life cycle
' Use strict '; React.createclass ({//1. Creation PhaseGetdefaultprops:function(){ //called when a class is createdConsole.log (' Getdefaultprops '); return {}; }, //2. Instantiation PhaseGetinitailstate:function(){ //get the default value for This.stateConsole.log (' Getinitailstate '); return {}; }, Componentwillmount:function(){ //called prior to render //The processing of business logic puts this, as with the operation of stateConsole.log (' Componentwillmount
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.