web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。
什么是组件?当一个页面所需要呈现出的内容过多,如果我们将所有的页面写在同一个.js文件中,会显得代码比较乱,给往后的代码维护造成困难。所以我们在编写代码的过程中,将某些部分提取出来,写在另一个组件中,然后在主页面中引入这个组件。
组件实际上是代码封装的一种,我们可以将经常使用到的一些功能及样式封装成一个组件,然后只需要调用这个组件便能调用这些功能和样式。这样做既方便了代码的管理又增加了可维护性。
在学习组件之前,我们必须先掌握组件的生命周期。一个组件从最开始的引入到最后的消亡,形成一段特殊的生命历程。这个生命历程成为组件的生命周期。如下图
(1)componentWillMount
在组件DOM树渲染前调用。当进入这个组件时执行。
(2)componentDidMount
在组件DOM第一次渲染结束之后执行。
(3)componentWillReceiveProps
在组件接收到新的props时执行。
(4)shouldComponentUpdate
在组件接收到新的props或则执行了this.setState()时执行,它会返回一个布尔值。
(5)componentWillUpdate
在组件接收到新的props或者state但还没有render时被调用。
(6)componentDidUpdate
在组件完成更新后执行,比如执行this.setState()之后,组件进行刷新。
(7)componentWillUnmount
在组件在DOM中移除,被销毁后执行。
代码如下:
import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
data:"render:react是优秀的前端三大框架之一"
};
}
render(){
let data = "装载完毕!准备起飞!我是101"
return (
<div className="zmz-react">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
我的第一个demo从react初始化开发
</p>
<a
className="App-link"
href="#"
rel="noopener noreferrer"
onClick={()=>this.click(this.state.data)}
>
点击准备起步==
{this.state.data}
</a>
</header>
</div>
);
}
click=(data)=>{
// alert("装载完毕!准备起飞");
// alert(data);
this.setState({
data:"你说的对!!!"
});
};
componentWillMount=()=>{
console.log(1);
};
componentDidMount=()=>{
console.log(2);
};
componentWillReceiveProps=()=>{
console.log(3);
};
shouldComponentUpdate=()=>{
console.log(4);
return true;
};
componentWillUpdate=()=>{
console.log(5);
};
componentDidUpdate=()=>{
console.log(6);
};
componentWillUnmount=()=>{
console.log(7);
};
}
export default Demo;
效果如下:
生命周期第三个涉及到接受新的props,以后再说明。第七个销毁组件时执行,因为涉及到路由跳转才能看出来,当你离开页面的时候会触发,
如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤
追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)
可以通过git clone方式下载项目结构。
本文地址:https://www.zhuimengzhu.com/details/220.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。