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)
- JSX has a concise and familiar syntax for defining tree structures with attributes
- JSX syntax needs to be transpiled to JavaScript (i.e. by Babel)
- In contrast to JavaScript, JSX is statically-typed
- JSX uses ES6 classes, which are similar to Java
One-way data flow
- Properties are passed by the parent component to the child components
- The properties are treated as immutable values
- Child components should never directly modify any properties that are passed to them
- 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
- React uses the Virtual DOM to create an in-memory copy of the browsers DOM
- When changing the state of components, React updates the virtual DOM first
- 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.
- Mounting:
constructor()
componentWillMount()
render()
componentDidMount()
- Updating:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
- Unmounting:
componentWillUnmount()
- 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( |
https://blog.codecentric.de/en/2017/11/developing-modern-offline-apps-reactjs-redux-electron-part-2-reactjs-basics/
React Core Features的更多相关文章
- 解决CocoaPods could not find compatible versions for pod "React/Core"
react-native框架中,在ios文件夹下执行pod install命令时出现的问题. 下面时完整的异常信息: [!] CocoaPods could not find compatible v ...
- react new features 2020
react new features 2020 https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks h ...
- React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`
使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有 ...
- SpringBoot(四) Core Features: Logging
参考 文档: 26. Logging
- SpringBoot(二) Core Features: SpringApplication
参考 文档: SpringApplication
- SpringBoot(三) Core Features: External Configuration(配置文件)
码云: external-configuration 可以使用属性文件,YAML文件,环境变量和命令行参数来外部化配置 一.属性值可以直接注入到bean 系统属性值不可以 // application ...
- react programming
So you're curious in learning this new thing called Reactive Programming, particularly its variant c ...
- .NET Core 和 .NET Framework 之间的关系
引用一段描述:Understanding the relationship between .NET Core and the .NET Framework. .NET Core and the .N ...
- Professional C# 6 and .NET Core 1.0 - 40 ASP.NET Core
本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 40 ASP.NET Core --- ...
随机推荐
- Python内网渗透扫描器Ladon
Ladon Scanner For Python PyLadon 目前python版功能较少,无论在Windows还是Linux系统性能以及速度均也比不上Ladon.exe 唯一的优点是跨平台,后续会 ...
- idea 2019.2 版本把菜单栏隐藏了恢复办法
一不小心把idea的菜单栏给隐藏了(如图) ,搞了半天也恢复不了,网上也没有找到什么办法,可是搞得我焦头烂额呀,怎么找也找不到,也不见大神有过提示,最后没办法,想着去看看它的配置文件吧,于是便找到了默 ...
- 027 ElasticSearch----全文检索技术02---快速入门
1.基本概念 Elasticsearch也是基于Lucene的全文检索库,本质也是存储数据,很多概念与MySQL类似的. 注意:6.0之前的版本有type(类型)概念,type相当于关系数据库的表,E ...
- something want to write
1.时间戳不能相信是因为机器时间有误差.相当于机器不断电的跑着时钟. 2.写log的时候记得log别人的ip,不然没办法很好的debug.
- mybatis-plus-generator 模板生成代码
maven: <dependencies> <dependency> <groupId>com.baomidou</groupId> <artif ...
- 卸载webpack,降低版本
卸载:npm uninstall webpack -g 重新安装:npm install webpack@3.7.1 -g
- mvc中hangfire全局简单配置
public void Configuration(IAppBuilder app) { ConfigureAuth(app); //指定使用Sql ...
- C#程序计算N阶行列式的值及N元一次方程组
C#程序计算N阶行列式的值及N元一次方程组 用了挺长时间自行完成了C#程序计算N阶行列式的值及N元一次方程组.由于自己没有在网上查阅其他资料,所以只能硬着头皮用最朴素的思想和基础的算法进行编程.在给出 ...
- C# 转成金额每三位逗号隔开
long aaaa = 14200666; Console.WriteLine(aaaa.ToString("N0")); Console.WriteLine(string.For ...
- vs2017js 方法注释
vs2017给js方法加注释,就像给C#类似 例如 function test1(a,b,c){ .... } 在function的上一行,打一个 " / " 再连续按两下 &qu ...