# React组件是怎么来的
组件的创造方法为React.createClass() ——创造一个类,react系统内部设计了一套类系统,利用它来创造react组件。但这并不是必须的,我们还可以用es6的class类来创造组件,这也是Facebook官方推荐的写法。
这两种写法实现的功能一样但是原理却是不同,es6的class类可以看作是构造函数的一个语法糖,可以把它当成构造函数来看,extends实现了类之间的继承 —— 定义一个类Main 继承React.Component所有的属性和方法,组件的生命周期函数就是从这来的。constructor是构造器,在实例化对象时调用,super调用了父类的constructor创造了父类的实例对象this,然后用子类的构造函数进行修改。这和es5的原型继承是不同的,原型继承是先创造一个实例化对象this,然后再继承父级的原型方法。
当我们使用组件<Counter />时,其实是对Main类的实例化——new Counter,只不过react对这个过程进行了封装,让它看起来更像是一个标签。
有三点值得注意:
1、定义类名字的首字母必须大写 。
2、因为class变成了关键字,类选择器需要用className来代替。
3、类和模块内部默认使用严格模式,所以不需要用use strict指定运行模式。
- 简介
- 第一章 React入门
- 1.1 创建一个React项目
- 1.2 组件
- 1.3 JSX
- 1.4 eject
- 1.5 渲染
- 第二章 React组件
- 2.1 组件定义
- 2.2 数据处理
- 2.2.1 props
- 2.2.2 state
- 2.3 生命周期
- 2.3.1 装载过程
- 2.3.2 更新过程
- 2.3.3 卸载过程
- 2.4 事件处理
- 2.5 条件渲染
- 2.6 列表渲染
- 第三章 React高级
- 3.1 静态类型检查
- 3.1.1 flow
- 3.1.2 typescript
- 3.2 React Developer Tools
- 第四章 Redux状态管理
- 4.1 安装与配置
- 4.2 一个简单的计数器开始
- 4.3 Store
- 4.3.1 获取state
- 4.3.2 subscribe
- 4.4 Action
- 4.4.1 Action Creators
- 4.5 Reducer
- 4.5.1 Reducer 的拆分
- 4.6 与其他状态管理工具的对比
- 第五章 React-Router路由
- 参考资料