文章目录
- 前言
- 一、模块化
- 1.模块：
- 2.模块化：
- 二、 组件化
- 1.组件：
- 2.组件化：
- 三、组件的分类
- 1.函数组件
- 2.类式组件
一、模块化
1.模块：
理解：向外提供特定功能的js程序,一般就是一个js文件。
为什么：要拆成模块，随着业务逻辑增加,代码越来越多且复杂。
作用：复用js,简化js的编写,提高js运行效率。
2.模块化：
当应用的js都以模块来编写,这个应用就是一个模块化的应用
二、 组件化
1.组件：
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)
为什么：要用组件，一个界面的功能复杂
作用：复用编码,简化项目编码,提高运行效率
2.组件化：
当应用是以多组件的方式实现,这个应用就是组件化的应用
三、组件的分类
实质：一个 React 应用就是构建在 React 组件之上的。
1.函数组件
函数组件：该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
1.1创建函数组件
function HelloPerson( ){
return <h1>你好，我是函数式组件!</h1>;
}
ReactDOM.render(<HelloPerson/>,document.getElementById('hello'));说明：解析组件标签HelloPerson，发现组件是函数定义的，调用该函数，将返回的虚拟DOM，转为真实的DOM，随后呈现在页面上。
1.2Props参数传递方法（重点）
function HelloPerson(person){
console.log(this);//此处undefined babel编译后采取严格模式
return ( 如果是多内容的话，return 使用括号的形式
<ul>
<li>姓名：{person.name}</li>
<li>年龄：{person.age}</li>
</ul>
)
}
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('hello'));复合函数组件
function GetName(props){
return <li>姓名：{props.name}</li>
}
function GetAge(props){
return <li>年龄：{props.age}</li>
}
function HelloPerson(person){
return (——如果是多组件，return 使用括号的形式
<ul>
<GetName name={person.name}/>
<GetAge age={person.age}/>
</ul>
)
}
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('hello'));2.类式组件
使用ES6 中的 class 来定义组件，通过继承React.Component。解析流程如下：
- · React解析组件标签，找到你所定义的组件。
- · 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
- · 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
2.1 创建实例
//创建类组件 1:继承react中的Component类 2：需要render
class Person extends React.Component{
render(){
return (
<h1>你好，我是类式组件！</h1>
)
}
}
ReactDOM.render(<Person/>,document.getElementById("hello"));2.2 用户自定义组件
const element = <Person/>
ReactDOM.render(element,document.getElementById("hello"));总结
以上就是今日的分享啦，希望能够帮助到你吧，最后，依旧诚挚祝福屏幕前的你健康快乐、平安喜乐！