[Front-end] knowledge -JS related components and React

1. talk about the difference between use and use jQuery framework?

1. Separation of data and view, (the jQuery data and view mixed code coupled) ------- Open Closed Principle
2. In view of the data driver (data concerns only changes, DOM operations are encapsulated)

2. talk about the understanding of MVVM?

1. Let me talk about MVC: Model, View, Controller (mainly for back-end)
2. MVVM: Model, View, ViewModel [intermediate connection are connected and the view and model]
3. About ViewModel

2.2.1 MVVM the correspondence relationship React

---

• 1) M (odel): this.state stored business logic and local data component corresponding to the life cycle of the method or function implemented if React integrated redux + react-redux, then business logic component and local data can be completely decoupled as M separate storage layer, such as business logic in the Action and Reducer.
• 2) V (iew) -M (odel): the corresponding components JSX, it is essentially the syntactic sugar Virtual DOM. React responsible for maintaining Virtual DOM and its diff operation, while React-dom will Virtual DOM rendered in real DOM browser
• 3) View: corresponding to the frame in a browser-based virtual real DOM DOM generated (do not need to write our own) and we write CSS
• 4) binder: JSX corresponding to commands and data in the binding, such as className = {this.props.xxx}, {this.props.xxx} etc.

Double and single tie tying the difference 2.2.2 MVVM

---

• 1) Generally, only UI form controls only two-way data binding, non-UI form controls only one-way data binding.
• 2) one-way data binding means: change in M ​​can be automatically updated to the ViewModel, but changes need to manually update the ViewModel to M (by setting the event to listen for form controls)
• 3) two-way data binding means that read: M changes can be automatically updated to the ViewModel, change the ViewModel can also be automatically updated to M
• 4) two-way binding way binding = + UI event listeners. Bidirectional and unidirectional only difference in the degree of encapsulation frame, in essence, both can be converted to each other.
• 5) the advantages and disadvantages: In the case of more interactive form, the advantages of one-way data binding is easier to track the data management and maintenance, the disadvantage is the relatively large amount of code long-winded, two-way and one-way data binding strengths and weaknesses tie given just the opposite.

3. talk about the understanding of the components of?

1. Package assembly
   • a. View Package
   • b. Data encapsulation
   • c. change logic (data driver changes the view, setState)
2. Reusable component
   • a. props used to transfer data (transfer data to a component different fly)
   • b. multiplexed component (a component with different data)

What is the nature 4.JSX is?

[!NOTE]

1. JSX syntax (label, JS expression, judge, cycle, event binding)
2. JSX is syntactic sugar, need to be resolved in order to run JS (using the function h)
3. JSX is independent of the standard can be used by other projects

   // 下面的代码实际执行流程：
    // JSX 代码
    const user = {
        firstName : 'xiugang',
        lastName : 'zhang'
    }
    var profile = <div>
        <img src="a.jpg" className='profile'/>
        <h3>{[user.firstName, user.lastName].join(' ')}</h3>
    </div>

    // 解析结果(重点掌握)，关键点：是使用了一个React.createElement来创建节点的
    var profile = React.createElement('div', null, [
        React.createElement('img', {src : 'a.jpg', className : 'profile'}),
        React.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])
])

/* @jsx h*/
// 1. 使用插件：cnpm install babel-plugin-transform-react-jsx
// 2. 开始编译JSX： babel --plugins transform-react-jsx demo.js
// 3. 可以自定义React.createElement变为一个h函数： /* @jsx h*/

The relationship 5.JSX and VDOM?

5.1 Analysis Why do we need VDOM

1. React VDOM is the first time to promote open, combined with the JSX
2. JSX is rendered into HTML template
3. First Rendering + re-render after revision state

4. Fits the application scenario VDOM

   5.2 React.createElement and function h

   When 5.3 patch?

5. Initial rendering ----
   js ReactDOM.render(<App/>, container)
6. Triggers patch (container, vnode) function
7. re-render-- setState

8. Triggers patch (vNode, newVNode)

   Parsing 5.4 custom components?

5.4.1 custom components analysis (parsing TODOInput assembly and TODOList)

1. 'Div' direct rendering
   Can, vdom can be achieved
2. TodoInput and TodoList is a custom component (class), vdom do not know
3. Therefore Input List and time-defined function must declare render
4. The property is initialized instance props, and then executing instances render function
5. Or vnode object render function returns

React.createElement(TodoInput, { addTitle: this.addTitle.bind(this) }),
    React.createElement(TodoList, { data: this.state.list })

    // 上面的代码相当于是先去创建一个TodoList实例对象
    var list = new TodoList({ data: this.state.list });
    // 然后再去调用这个函数的render方法（返回的是一个JSX，然后对当前的这个JSX渲染为VDOM）
    var vnode = list.render();

6. setState talk about the process?

    // 1. 每个组件实例，都有renderComponent方法
    class Component {
        constructor(){

        }

        // 每个组件都有这个函数
        renderComponent(){
            // 获取上一次的vNode
            const prevVnode = this._vnode;

            // render函数只需之后，得到的还是一个新的node
            const newVnode = this.render();

            // 开始对比，找出差异
            patch(prevVnode, newVnode);

            // 更新node为最新的node
            this._vnode = newVnode;
        }
    }

    // 2. 执行renderComponent会重新执行实例的render方法
    // 3. render函数返回newVnode，然后拿到prevNode（也就是上次的vnode）----多次执行setState视图最终也只会渲染一次
    // 4. 执行patch（preVnode, newVNode）

[!NOTE]

1. setState implemented by a state update queue mechanism, setState when executed, will need to be updated after it is placed in the status queue state, instead of updating this.state Now, queue mechanisms can be efficiently batch update state. If the value is not directly modified by setState this.state
   
2. Then the state will not be placed in the status queue. When the next call setState and state queue to merge, it will ignore the changes before the state, resulting in unpredictable errors
3. At the same time, also make use of the queue mechanism to achieve asynchronous update setState, avoiding the frequent repetition update state

7.7. React and explain his own understanding of the Vue?

7.7.1. The essential difference between the two

• vue essentially MVVM framework, developed by MVC from
• React is essentially a front-end component-based framework, by the back-end component-based development from

• It does not prevent both can achieve the same functionality

  7.7.2 The difference of the template

• vue- using templates (originally proposed by angular)
• React- use JSX
• The template syntax, I prefer JSX
• The template separation, I prefer Vue
• JS template should and logical separation

• "Open Closed Principle"

  7.7.3. Components of the difference

• React itself is a component-based, no component is not React Kazakhstan
• vue also supports component-based, but is spread over the MVVM
• Check vue components of the document

• React more suitable choice of components

  7.7.4. Both have in common

• Support component-based

• Are data-driven view

  7.7.5 How to choose

• Domestic use, the most important vue. Document easier to read, to learn, the community is large enough

• If a high level team recommended React, components and JSX