React introduction and common knowledge

Disclaimer: If you have any objection to this article, then please write your comments in the article comments at. If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles. Wish everyone in the programming this road, farther and farther. https://blog.csdn.net/weixin_44369568/article/details/91488960

React

1, virtual Dom

1. save resources
2. In memory
3. We will make use of Dom diff algorithm
4. Efficient

2、react

• Core Library
• React JAVASCRIPT is used to build a library user interface.
• React mainly used to build the UI, many people think React is in MVC V (view).
• React internal project originated in Facebook, and Instagram to set up a website and open in May 2013.
• React internal project originated in Facebook, and Instagram to set up a website and open in May 2013.
• React has a high performance, code logic is very simple, more and more people have started to pay attention and use it.

3, react features

1. Declarative design -React declarative paradigm, you can easily describe the application.
2. Efficient -React the DOM by simulation, to minimize interaction with the DOM
3. Flexible -React can work well with known library or framework
4. JSX - JSX is an extension of JavaScript syntax. React development does not necessarily use the JSX, but we recommend using it
5. Components - through React building element, such that the code easier to reuse obtained can be well applied in the development of large projects
6. Unidirectional data stream in response to the - React achieve a unidirectional response data stream, thereby reducing code duplication, which is why it is easier to bind than traditional data

4、react-dom

• Dom to do with running in the browser
• Rendering / Mount

5、react-native

• The above has a web-view native
• Advantages: smooth
• Disadvantages: trouble

6, change this point

1. // execute immediately apply an array
2. call // execute immediately
3. bind Return Value: function (not performed)

7, react event

e.currentTarget：绑定事件的dom
e.target：触发事件的dom
//阻止事件默认行为
e.preventDefault();
//阻止事件冒泡
e.stopPropagation();

8, components

1. // container assembly with a State (only be defined by the class)
2. // no assembly view State (rendered, and can be defined by class and function)

9, to obtain elements

• ref obtain dom (refer to abbreviations)
• findDomNode obtain an instance of dom

10, loaded on demand

A package loading assembly

import React from 'react';
import '../../scss/index.css';
export default ()=>{
    return <div className='load'>
        <img src="/load.gif"/>
    </div>
}

style

.load{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    left:0;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

react.config.js

// 引入路由按需加载的依赖
import Loadable from 'react-loadable';

// 路由未加载完成时显示的load组件
import Loading from '../components/common/loading';

const Detail = Loadable({
    loader:()=>import('../components/Detail'),
    loading:Loading
})

const Index = Loadable({
    loader:()=>import('../components/Index'),
    loading:Loading
})

const Feilei = Loadable({
    loader:()=>import('../components/include/Feilei'),
    loading:Loading
})

11, location

// 点击的时候调用这个方法
location(){  // 定位
        let script = document.createElement('script');
        script.src = 'http://pv.sohu.com/cityjson?ie=utf-8';
        document.body.appendChild(script);
        script.onload = ()=>{
            this.setState({
                city:window.returnCitySN.cname
            })
        }
    }

12, Diff algorithm

React to achieve the Diff algorithm