zoukankan      html  css  js  c++  java
  • React Core Features

    React Core Features

    Here is a summary of the core features. We will cover each feature in detail throughout the examples.

    JSX (JavaScript Syntax Extension)

    1. JSX has a concise and familiar syntax for defining tree structures with attributes
    2. JSX syntax needs to be transpiled to JavaScript (i.e. by Babel)
    3. In contrast to JavaScript, JSX is statically-typed
    4. JSX uses ES6 classes, which are similar to Java

    One-way data flow

    1. Properties are passed by the parent component to the child components
    2. The properties are treated as immutable values
    3. Child components should never directly modify any properties that are passed to them
    4. PropTypes can be used for defining the type of each property that is passed to a given component. If a component receives an invalid value for a property, there will be a warning in the console. PropTypes are checked during runtime

    Virtual DOM

    1. React uses the Virtual DOM to create an in-memory copy of the browsers DOM
    2. When changing the state of components, React updates the virtual DOM first
    3. After that it computes the resulting differences, and updates the browser’s displayed DOM efficiently

    virtual DOM ReactJS

    Lifecycle methods

    These methods can be overridden for each component, to run code during a specific lifecycle phase.

    1. Mounting:
      • constructor()
      • componentWillMount()
      • render()
      • componentDidMount()
    2. Updating:
      • componentWillReceiveProps()
      • shouldComponentUpdate()
      • componentWillUpdate()
      • render()
      • componentDidUpdate()
    3. Unmounting:
      • componentWillUnmount()
    4. Error handling (since React 16 – released September 2017):
      • componentDidCatch()

    We will explain these core features in more detail with a couple of code snippets in the next section.

    Babel (ES5, ES6)

    The JavaScript syntax that you will see in our examples is ECMAScript 6 (ES6) notation. If you need to run your web app inside older web browsers, you can use Babel (https://babeljs.io/) to transpile ES6 code to ES5. Here is an example how babel will transpile the ES6 arrow function to a regular ES5 function.

    ES6 syntax Transpiled to ES5 syntax
    [1,2,3,4].map(n => n + 1);
    
    
    
    
    
    [1,2,3,4].map(
     function(n) {
      return n + 1; 
     }
    );

    https://blog.codecentric.de/en/2017/11/developing-modern-offline-apps-reactjs-redux-electron-part-2-reactjs-basics/

  • 相关阅读:
    C#与独孤九剑
    C#系列视频教程字符和字符串操作
    【设计模式】迪米特法则
    【设计模式】考题 模板方法模式
    C#字符和字符串
    【热门技术】解决Win7 下面很多软件安装不兼容的问题
    C#使电脑发出嗡鸣声
    C#视频教程下载(第一章)
    【设计模式】牛市股票还会亏钱 外观模式
    【设计模式】好菜每回味不同 建造者模式
  • 原文地址:https://www.cnblogs.com/feng9exe/p/11084574.html
Copyright © 2011-2022 走看看