React与Vue|React -- 函数式和类式组件 javascript|组件化|前端|react.js

欢迎学习交流！！！
持续更新中…

文章目录

模块与组件
- 组件规则注意事项
- 函数式组件（无状态）
- 类方式组件（有状态）

模块与组件模块：

向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件：

用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化：
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化：
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
组件规则注意事项

组件类的第一个首字母必须大写
组件类必须有 render 方法
组件类必须有且只有一个根节点
组件属性可以在组件的 props 获取
- 函数需要声明参数：props
- 类直接通过 this.props

函数式组件（无状态）

名字不能用小写
- React 在解析的时候，是以标签的首字母来区分的
- 如果首字母是小写则当作 HTML 来解析
- 如果首字母是大小则当作组件来解析
- 结论：组件首字母必须大写

注意：必须要有结束标签，如或

type="text/javascript" src="https://www.it610.com/article/js/react.development.js">type="text/javascript" src="https://www.it610.com/article/js/react-dom.development.js">type="text/javascript" src="https://www.it610.com/article/js/babel.min.js">type="text/babel"> // 1. 创建函数式组件 function MyComponent() {console.log(this)//undefined babel编译之后会开启严格模式（JS5中禁止this指向window） return 我是用函数定义的组件（适用于【简单组件】的定义） } // 2. 渲染组件到页面 ReactDOM.render(,document.getElementById('test')) /* 执行了ReactDOM.render(....之后发生了什么？ 1. React解析组件标签，找到MyComponent组件 2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面当中 */

类方式组件（有状态）有关类：

类中的构造器不是必须写的，要对实例进行一些初始化的操作，比如添加指定属性时才写。
如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
类中所定义的方法，都是放在了类的原型对象上，供实例去使用

【React与Vue|React -- 函数式和类式组件】在React中，定义/创建一个类必须要继承一个内置类Component

type="text/babel"> // 1. 创建类式组件-->类名就是组件名 class MyComponent extends React.Component{// 构造器中必须调用super，但构造器可以省略，render必须写且必须有返回值 render () {// render放在哪里？---类的原型对象上，供实例使用 // render中的this是谁？---MyComponent的实例对象即MyComponent组件实例对象 return 我是用类定义的组件（适用于【复杂组件】的定义） } } // 2. 渲染组件到页面(render在此处仅仅是重名了) React.render(,document.getElementById('test'))