一、模块与组件、模块化与组件化的理解
模块
理解:向外提供特定功能的 js 程序,一般就是一个 js 文件
为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
作用:复用 js,简化 js 的编写,提高 js 运行效率
组件
理解:用来实现局部功能效果的代码和资源的集合( html/css/js/image 等等)
为什么要用组件:一个界面的功能更复杂
作用:复用编码,简化项目编码,提高运行效率
模块化
当应用的 js 都以模块来编写的,这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现,这个应用就是一个组件化的应用
二、React 面向组件编程
函数式组件
执行了 ReactDOM.render() 之后,发生了什么?
1、React 解析组件标签,找到了 MyComponent 组件。
2、发现组件是使用函数定义的,随后调用该函数,将返回的虚拟 DOM 转为真实 DOM,随后呈现在页面中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_函数式组件</title>
</head>
<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() {
// babel 编译后开启了严格模式 use strict,严格模式下禁止自定义函数的 this 指向 window,为 undefined
console.log(this) // undefined
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
// 2、渲染组件到页面(组件必须书写为标签形式,且闭合)
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
</script>
</body>
</html>
类式组件
执行了 ReactDOM.render() 之后,发生了什么?
1、React 解析组件标签,找到了 MyComponent 组件。
2、发现组件是使用类定义的,随后 new 出来该类的实例,并通过该实例调用到原型上的 render 方法。
3、将 render 返回的虚拟 DOM 转为真实 DOM,随后呈现在页面中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_类式组件</title>
</head>
<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、创建类式组件( * 继承 React 内置类 React.Component)
class MyComponent extends React.Component {
// * 类中的构造器不是必须要写的,要对实例进行一些初始化的操作,如添加指定属性时才写。
// * render方法必须有,且要有返回值
// render是放在哪里的?------ MyComponent的原型对象上,供实例使用。
// render中的this是谁?------ MyComponent的实例对象 <=> MyComponent组件实例对象。
render() {
console.log('render的this', this)
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
// 2、渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
</script>
</body>
</html>