React -- 函数式和类式组件
Posted 我真的爱敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React -- 函数式和类式组件相关的知识，希望对你有一定的参考价值。
欢迎学习交流！！！
持续更新中…
模块与组件
模块：
- 向外提供特定功能的js程序, 一般就是一个js文件
- 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
- 作用：复用js, 简化js的编写, 提高js运行效率
组件：
- 用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 为什么要用组件： 一个界面的功能更复杂
- 作用：复用编码, 简化项目编码, 提高运行效率
模块化：
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化：
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
组件规则注意事项
- 组件类的第一个首字母必须大写
- 组件类必须有
render方法 - 组件类必须有且只有一个根节点
- 组件属性可以在组件的
props获取- 函数需要声明参数：
props - 类直接通过
this.props
- 函数需要声明参数：
函数式组件（无状态）
- 名字不能用小写
- React 在解析的时候，是以标签的首字母来区分的
- 如果首字母是小写则当作 HTML 来解析
- 如果首字母是大小则当作组件来解析
- 结论：组件首字母必须大写
注意：必须要有结束标签，如<MyComponent />或<MyComponent><MyComponent />
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel">
// 1. 创建函数式组件
function MyComponent() {
console.log(this) //undefined babel编译之后会开启严格模式（JS5中禁止this指向window）
return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
}
// 2. 渲染组件到页面
ReactDOM.render(<MyComponent />,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent />....之后发生了什么？
1. React解析组件标签，找到MyComponent组件
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面当中
*/
</script>
</body>
类方式组件（有状态）
有关类：
- 类中的构造器不是必须写的，要对实例进行一些初始化的操作，比如添加指定属性时才写。
- 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
- 类中所定义的方法，都是放在了类的原型对象上，供实例去使用
在React中，定义/创建一个类必须要继承一个内置类Component
<script type="text/babel">
// 1. 创建类式组件 -->类名就是组件名
class MyComponent extends React.Component{
// 构造器中必须调用super，但构造器可以省略，render必须写且必须有返回值
render () {
// render放在哪里？ ---类的原型对象上，供实例使用
// render中的this是谁？ ---MyComponent的实例对象即MyComponent组件实例对象
return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
}
}
// 2. 渲染组件到页面 (render在此处仅仅是重名了)
React.render(<MyComponent />,document.getElementById('test'))
</script>
以上是关于React -- 函数式和类式组件的主要内容，如果未能解决你的问题，请参考以下文章