猿创征文|React组件化入门学习
目录
模块化
模块:
理解:向外提供特定功能的js程序,一般就是一个js文件。
为什么:要拆成模块,随着业务逻辑增加,代码越来越多且复杂。
作用:复用js,简化js的编写,提高js运行效率。
模块化:
当应用的js都以模块来编写,这个应用就是一个模块化的应用
组件化
组件:
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)
为什么:要用组件,一个界面的功能复杂
作用:复用编码,简化项目编码,提高运行效率
组件化:
当应用是以多组件的方式实现,这个应用就是组件化的应用
函数式组件
实质:一个 React 应用就是构建在 React 组件之上的。
函数组件:该函数是一个有效的 React 组件,因为它接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素。这类组件被称为“函数组件”,因为它本质上就是 JavaScript 函数。
创建函数组件
-
function HelloPerson(){
-
-
return <h1>你好,我是函数式组件!</h1>;
-
-
}
-
-
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));
说明:解析组件标签HelloPerson,发现组件是函数定义的,调用该函数,将返回的虚拟DOM,转为真实的DOM,随后呈现在页面上。
Props参数传递(重点)
-
function HelloPerson(person){
-
-
console.log(this);//此处undefined babel编译后采取严格模式
-
-
return (
-
-
<ul>
-
-
<li>姓名:{person.name}</li>
-
-
<li>年龄:{person.age}</li>
-
-
</ul>
-
-
)
-
-
}
-
-
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));
复合函数组件
-
function GetName(props){
-
return <li>姓名:{props.name}</li>
-
}
-
-
function GetAge(props){
-
return <li>年龄:{props.age}</li>
-
}
-
-
function HelloPerson(person){
-
return (
-
<ul>
-
<GetName name={person.name}/>
-
<GetAge age={person.age}/>
-
</ul>
-
-
)
-
-
}
-
-
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));
类式组件
ES6 的 class 来定义组件,通过继承React.Component。解析流程如下:
React解析组件标签,找到了MyComponent组件。
发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
创建实例
-
//创建类组件 1:继承react中的Component类 2:需要render
-
-
class Person extends React.Component{
-
-
render(){
-
-
return (
-
-
<h1>你好,我是类式组件!</h1>
-
-
)
-
-
}
-
-
}
-
-
ReactDOM.render(<Person/>,document.getElementById("root"));
用户自定义组件
-
const element = <Person/>
-
-
ReactDOM.render(element,document.getElementById("root"));
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgagbeh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01