React Core Features
2024-09-01 20:46:15
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/
最新文章
- 【翻译】CEDEC2015 速成Albedo Chart 制作
- 【工具推荐】ELMAH——可插拔错误日志工具
- vi 常用命令行
- H264编码参数的一些小细节
- 尝试设计LFSR加密器,并用CAP4验证随机性
- 工作总结之动画与VR
- Swift - 使用CABasicAnimation实现动画效果
- sprintf格式化字符串带来的注入隐患
- BZOJ_2049_[Sdoi2008]Cave 洞穴勘测_LCT
- 工厂方法模式--java代码实现
- .net mvc + layui做图片上传(一)
- 107个JS常用方法(持续更新中)
- 洛谷P3242 接水果
- 完成将 toChineseNum, 可以将数字转换成中文大写的表示,处理到万级别,例如 toChineseNum(12345),返回 一万二千三百四十五
- 用Django ORM实现树状结构
- PEP 8 - Python代码样式指南
- java.lang.verifyerror:bad type on orerand stack
- 【转】C++ 枚举类型的思考
- 【bzoj4484】【jsoi2015】最小表示
- TP框架M方法 create方法丢失字段问题
热门文章
- linux -------- 使用xshell ,winscp 连接linux 以及一些问题解决
- windows下elasticsearch安装ik分词器后无法启动
- [转帖]来聊聊,华为与H3C(华三)的前世今生!
- [转帖]B4. Concurrent JVM 锁机制(synchronized)
- 数据库权限优化,权限设计BigInteger
- HashSet去重
- 封装:Cmd命令调用和常用命令
- C#读写设置修改调整UVC摄像头画面-倾斜
- 【真】CSP2019退役记(upd:12.21)
- 连接池未注册org.logicalcobwebs.proxool.ProxoolException: Attempt to refer to a unregistered pool by its alias 'XXX'