concept

Framework and library

Angular is a framework; React is a library.

React itself does not allow you to create Web applications because it is designed to create views (hence the “V” in MVC). React is a library of tools that can be used to build reusable UI components.

Angular is an ecologically complete framework (MV*) that includes templates, data bidirectional binding, routing, modularity, services, filters, dependency injection, and more.

Data update

Angular

Data update check:

  1. There is one in AngularZone.jsResponsible for listening for event triggers that require view changes
  2. Each component has its own detector, which checks for bound variables on its own template.
  3. If the old value is not equal to the new value, the change is detected and the corresponding view is updated

React

Frequent DOM manipulation can cause a lot of backflow and redrawing, which can cause web pages to lag. React uses the virtual DOM to update views.

How does the virtual DOM work?

  1. Creation stage: The virtual DOM is first created based on JSX and basic data, which reflects the structure of the real DOM tree. Then the real DOM tree is created from the virtual DOM tree. After the real DOM tree is generated, the rendering pipeline is triggered to output the page to the screen.
  2. Update phase: If the data changes, a new virtual DOM tree needs to be created based on the new data; React then compares the two trees to find out where the changes are and updates the changes to the real DOM tree at once. Finally, the rendering engine updates the rendering pipeline and generates new pages.

The advantage of Virtual Dom is that the efficiency of direct and frequent Dom manipulation is much lower than that of JavaScript manipulation, and the cost of using JavaScript replaces the cost of Dom execution.

Data binding and data flow

One-way data binding: Updates to the Model trigger updates to the View, while updates to the View do not trigger updates to the Model; they are one-way.

Two-way data binding: Updates to the Model trigger updates to the View, and updates to the View trigger updates to the Model, and their effects are reciprocal.

React

React uses one-way data binding

When the user accesses the View, they interact by triggering Events, and in the corresponding Event Handlers, they trigger Actions, which update the State of the View by calling the setState method, The State update triggers a rerendering of the View.

Therefore, in React, the View layer cannot change the State directly, but must use the corresponding Actions.

Angular

Angular supports one-way and two-way data binding

One-way data binding: use [x] property binding, (x) event binding, or interpolation form {{data}}. Two-way data binding: Using the [(x)] (banana boat) syntax, user changes to the View are directly synchronized to the Model.

However, React and Angular are one-way data flows. Although Angular has bidirectional data binding, data flows between Angualr and parent components still follow a one-way data flow. That is, the parent component can pass props to the child component, but the child component cannot modify the props passed by the parent component. The child component can only notify the parent component of data changes through events.

Component communication

Communication situation classification

  • The parent component communicates with the child component
  • The child component communicates with the parent component
  • Non-parent component communication

    • Cross-level component communication

    • There is no communication between nested relational components

The father the son

React

The parent component passes data to the child component by setting properties for the child component. The child component receives data through props. When the parent component changes its state, the properties received by the child component will change.

const Child = ({ name }) = > {
    <div>{name}</div>
}

class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'jack'}}render() {
        return (
            <Child name={this.state.name} />)}}Copy the code

Angular

Pass data from parent to child via the @INPUT decorator

/ / the parent component
@Component({
  selector: 'app-hero-parent'.template: ` 
      
        `
      
})
export class HeroParentComponent {
  heroes = HEROES;
}

/ / child component
@Component({
  selector: 'app-hero-child'.template: ` 
{{hero.name}} says:
 `
})
export class HeroChildComponent {
  @Input() hero: Hero;
}
Copy the code

Child the parent

React

A child component passes data to its parent through a callback function. The parent component passes a method of its own to the child component as props. The child component calls the callback function after receiving the method of the parent component through this.props to communicate with the parent component.

/ / child component
class Child extends Component{
   state={
     name:"admin".age:18
  }
  childClickHandle=() = >{
    this.props.showInfo({address:"beijing"})}render(){
    return (
	    <div>// Method 1: call the parent component's methods directly<button onClick={this.props.showInfo.bind(this,this.state)}>button</button>// Method 2: call its own method first, then call the parent component's method<button onClick={this.childClickHandle}>button</button>
	    </div>)}}/ / the parent component
class Parent extends Component{
  clickHandle(data){
    // Data is the data passed in the child component
	console.log(data);
  }

  render(){
    return <Child showInfo={this.clickHandle.bind(this)}></Child>
  }
}

ReactDOM.render(
  <Parent/>.document.getElementById('root'));Copy the code

Angular

Method 1: @ Output + EventEmitter

A common communication, @output, is essentially passing a function to the child, executing some method in the child, and then executing the callback to pass the value to the parent.

// Define an output property of type EventEmitter and emit it.
@Output() public childEventEmitter = new EventEmitter<any>();

ngOnInit(){
    this.childEventEmitter.emit('Send data to parent');
}

// The parent binds the EventEmitter from the child and responds to it. $event is the data passed by the child
<app-child (childEventEmitter)="childEventEmitter($event)"></app-child>
Copy the code

Method two: The parent component calls @viewChild

A parent component cannot use data binding to read a child component’s properties or call its methods. Instead, create a local variable #viewChild in the parent component template to represent the child, and use this variable to read the child’s properties and call its methods.

This local variable method is a simple and convenient method. But it has limitations, because parent-child wiring must all be done in the parent’s template. The parent component’s own code has no access to the child component.

/ / the parent component
<div>
    <button class=" btn btn-primary" (click) ="viewChild.myName(viewChildInputName.value)">Local variable pass</button>
    <app-view-child-child #viewChild></app-view-child-child>
</div>

/ / child component
@Component({
  selector: 'app-view-child-child'.templateUrl: './view-child-child.component.html'.styleUrls: ['./view-child-child.component.css']})export class ViewChildChildComponent implements OnInit {
  constructor(){}name: string;
  myName(name: string) {
      this.name = name ;
  }
  ngOnInit(){}}Copy the code

Non-parent component communication

React

  • Context
  • Redux
  • Mobx

Angular

  • Service
  • Rxjs-subject Subscribes to the publishing schema

reference

  • www.infoq.cn/article/3zj…
  • www.cuelogic.com/blog/what-a…
  • How is the virtual DOM different from the real DOM?