Three design modes: MVC, MVP, MVVC

MVC: V: View USER interface C:Controller Controller: service logic M:Model Model: data savingCopy the code

The main processing logic of MVC is: View triggers event, controller responds and processes logic, calls Model, Model sends data to View after processing, View updates. All communication is one-way

MVP: V: View P: Presenter M :ModelCopy the code

In the MVP model, Presenter is the core, responsible for retrieving data from the Model and populating it into the View. This Model disconnects the Model from the View, and the View is called a “passive View” that exposes the setter interface

V and P can communicate in both directions

P and M can communicate in both directions

V and M are not connected through P, which is the middleman

MVVM: React and Vue are the same as the V in MVVM because it is the virtual DOM. Anguler/Ember uses the MVVM Mode V: View VM:viewMode M:ModeCopy the code

In the MVVM model, VM is the core, but different from MVP, MVVM adopts the two-way data binding scheme to replace the complicated DOM operation. In this model, View keeps synchronization with VM, and View is bound to VM attributes. If VM data changes, View will automatically update its View through data binding. The VM also exposes the data in the Model.

Ii.MPA and SPA (multi-page and single-page)

Vue and React are SPA applications that have only one entry to a page and form a mapping relationship with the page to render the pageCopy the code

Iii.React Core Idea:

React encapsulates components. Each component maintains its own state and UI. When the state changes, it automatically updates and renders the entire component.

4. JSX:

Var arr = [<h1> beginner tutorial </h1>,< H2 > learn not only technology, but also dream! ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );Copy the code

Five. Front-end componentization and modularization:

Componentization focuses on the UI level modularity focuses on function developmentCopy the code

Vi. Components:

1. Functional components: stateless directly defined functions, no state, only props, no lifecycle functions. function Hello(){ return <h1> hello react </h1> } ReactDom.render(<Hello/>,document.getElementById('root')) 2. Function stateless component value transfer: The props in this function is a parameter and an object that can be written to anything, Just to semantically let's say props function Hello(props){return <h1> Hello {prps.name}</h1>} reactdom.render (<Hello name="react"/>,document.getElementById('root'))Copy the code

Stateful components:

Extends extends extends from react.component. it has state for storing and managing data. It can also have props and lifecycle functions. <script type="text/ Babel "> class Hello extends React.Component {// Stateful components must be rendered using the render method, Render (){return <h1> hello react </h1>}} reactdom.render (< hello />, document.getelementbyid ('root'))  </script>Copy the code

4. Class component parameter transfer:

<script type="text/ Babel "> class Hello extends React.Component {render(){class Hello extends React.Component {render(){ return <h1> hello {this.props.name}</h1> } } ReactDom.render(<Hello name="react"/>,document.getElementById('root')) Class Hello extends React.Com constructor(){constructor(){//super passes attributes to parent constructor objects // Subclasses must call the super method in the constructor constructor to get the parent class's this object, Super () this.state={name:'react'}} render(){return <h1> hello {this.state.name}</h1>}} Reactdom.render (<Hello/>, document.getelementbyid ('root')) </script> 3. State short script type="text/ Babel "> class Hello extends React.Component { state={ name:'react' } render(){ return <h1> hello {this.state.name}</h1> } } ReactDom.render(<Hello/>,document.getElementById('root')) </script>Copy the code

5. Event handling

script type="text/babel"> class Hello extends React.Component { constructor(){ super() this.state={ name:'react' } This. ChangeName = this.changename. Bind (this)} ChangeName =()=>{} changeName(){this.setState({age:'HaHa'}) //React why use setState to change the state? //React does not implement a proxy like Vue2 object.defineProperty or vue3 to listen for data changes // } render(){return <div> <h1> hello {this.state.name}</h1> <button OnClick ={this.changename}> changeName </button> </div>}} reactdom.render (<Hello/>, document.getelementbyid ('root')) </script>Copy the code

6. Event handling shorthand

Script type="text/ Babel "> class Hello extends React.Component {state={name:'react'},  ChangeName(){ this.setState({ name:'33' }) } render(){ return <div> <h1> hello {this.state.name}</h1> <button OnClick ={this.changename. Bind (this)}> changeName </button> onClick={()=> this.changename ()} </div>}} ReactDom.render(<Hello/>,document.getElementById('root')) </script>Copy the code

7. Mixing functional components and class components

<script type="text/babel"> function Login(props){ return <button onClick={props.updated}>login</button> } function Logout(props){ return <button onClick={props.updated}>logout</button> } class App extends React.Component{ state={ isLogin:false } updateState=()=>{ this.setState({ isLogin:! this.state.isLogin }) } render(){ const {isLogin}=this.state return <div> isLogin ? <Login updated={this.updateState} /> :<Logout updated={this.updateState} /> </div> } } ReactDom.render(<App/>,document.getElementById('root')) </script>Copy the code