React Study Notes 1

React design is a one-way traffic (from the server to the client), there is no page data and service-side data binding Manage different streams of data through component (component), develop and create any application with react is a component Front-end component definition: html+css+js+img composition In the actual development, the page can be split and component based on the layout of the page. Features and Benefits:

1. Virtual dom (no DOM elements need to be written in the page at development time)

A set of DOM implementations at the bottom of the framework

2.JSX syntax (syntax using JavaScript XML format)

is a syntax for writing HTML content

3. Component development (react's core idea is to treat any area or element of a page as a component component)

Improved reusability

4. Unidirectional data flow (data between the component and back end is unidirectional and flows from the back end to the react component)

does not flow from the component to the back end

5. Component Declaration period (any component has a full declaration period in the DOM, the component is initialized when it is removed, and the component is eliminated to ensure superior performance)

A complete garbage collection mechanism

React use 1. Build a framework environment

Core JS, define virtual DOM model, data Update, support component algorithm, all in this JS

<script src="../build/react.min.js"></script>

API for manipulating the DOM

<script src="../build/react-dom.js"></script>

Compiler for JSX

<script src="../build/browser.min.js"></script>

2. Follow the framework standards and specifications

Spec. 1: When writing the react component in the JS file, the type of the JS file needs to be specified as Text/babel

<script type="text/babel"></script>

Spec 2: When declaring a component, the first letter of the component's name should be capitalized

Specification 3:react.createclass ({}) creates a component that contains an object that implements the render sub-method in the object and returns the JSX syntax in the render sub-method as the HTML content to be displayed on the page

Canonical 4:jsx (JavaScript XML), XML data storage format JSX syntax specification, only one start node and end node

Spec 5: After declaring a component, render the component to the page by Reactdom.render ()

1. ReactDOM.render(param1,param2);
3. param1 <组件名称/>||<组件名称>< /组件名称>
5. param2 组件被渲染的位置

TIP:

Comments in 1.JSX: {/** 注释内容 **/}
The class of HTML elements in 2.React is written classname,for to be written htmlfor

Two ways to create a style

Mode 1: External CSS controls the elements created

Mode 2:inner CSS is present in object form, and the object CSS property is consistent with the native JS attribute

Attach the style to the component's prototype chain and use this in the render function. CSS take out object//CSS is a custom name on the prototype chain

Uninstalling components

ReactDOM.unmountComponentAtNode(父元素);
The component to be uninstalled is reactdom rendered, so the uninstallation must be rendered first

Summarize

1.react features virtual DOM,JSX syntax (start and end with only one node), component, component declaration cycle, one-way data flow syntax:

1 React.createclass ({2 render:function() {3return:( 4 // the HTML content returned 5 )6}7 })

2.inner Css,inner JS

Inner CSS follows native JS syntax

3. Event mechanism

Onclick,ontouchstart ...
Reference official documentation

4. Component uninstallation

ReactDOM.unmountComponentAtNod(父元素);

Components must be rendered before they can be uninstalled

React Learning Note 1