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

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/

React Core Features的更多相关文章

  1. 解决CocoaPods could not find compatible versions for pod "React/Core"

    react-native框架中,在ios文件夹下执行pod install命令时出现的问题. 下面时完整的异常信息: [!] CocoaPods could not find compatible v ...

  2. react new features 2020

    react new features 2020 https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks h ...

  3. React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`

    使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有  ...

  4. SpringBoot(四) Core Features: Logging

    参考 文档: 26. Logging

  5. SpringBoot(二) Core Features: SpringApplication

    参考 文档: SpringApplication

  6. SpringBoot(三) Core Features: External Configuration(配置文件)

    码云: external-configuration 可以使用属性文件,YAML文件,环境变量和命令行参数来外部化配置 一.属性值可以直接注入到bean 系统属性值不可以 // application ...

  7. react programming

    So you're curious in learning this new thing called Reactive Programming, particularly its variant c ...

  8. .NET Core 和 .NET Framework 之间的关系

    引用一段描述:Understanding the relationship between .NET Core and the .NET Framework. .NET Core and the .N ...

  9. Professional C# 6 and .NET Core 1.0 - 40 ASP.NET Core

    本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 40 ASP.NET Core --- ...

随机推荐

  1. Python内网渗透扫描器Ladon

    Ladon Scanner For Python PyLadon 目前python版功能较少,无论在Windows还是Linux系统性能以及速度均也比不上Ladon.exe 唯一的优点是跨平台,后续会 ...

  2. idea 2019.2 版本把菜单栏隐藏了恢复办法

    一不小心把idea的菜单栏给隐藏了(如图) ,搞了半天也恢复不了,网上也没有找到什么办法,可是搞得我焦头烂额呀,怎么找也找不到,也不见大神有过提示,最后没办法,想着去看看它的配置文件吧,于是便找到了默 ...

  3. 027 ElasticSearch----全文检索技术02---快速入门

    1.基本概念 Elasticsearch也是基于Lucene的全文检索库,本质也是存储数据,很多概念与MySQL类似的. 注意:6.0之前的版本有type(类型)概念,type相当于关系数据库的表,E ...

  4. something want to write

    1.时间戳不能相信是因为机器时间有误差.相当于机器不断电的跑着时钟. 2.写log的时候记得log别人的ip,不然没办法很好的debug.

  5. mybatis-plus-generator 模板生成代码

    maven: <dependencies> <dependency> <groupId>com.baomidou</groupId> <artif ...

  6. 卸载webpack,降低版本

    卸载:npm uninstall webpack -g 重新安装:npm install webpack@3.7.1 -g

  7. mvc中hangfire全局简单配置

    public void Configuration(IAppBuilder app)       {           ConfigureAuth(app);           //指定使用Sql ...

  8. C#程序计算N阶行列式的值及N元一次方程组

    C#程序计算N阶行列式的值及N元一次方程组 用了挺长时间自行完成了C#程序计算N阶行列式的值及N元一次方程组.由于自己没有在网上查阅其他资料,所以只能硬着头皮用最朴素的思想和基础的算法进行编程.在给出 ...

  9. C# 转成金额每三位逗号隔开

    long aaaa = 14200666; Console.WriteLine(aaaa.ToString("N0")); Console.WriteLine(string.For ...

  10. vs2017js 方法注释

    vs2017给js方法加注释,就像给C#类似 例如 function test1(a,b,c){ .... } 在function的上一行,打一个 " / " 再连续按两下 &qu ...