React学习：生命周期、过滤器、event、axios-学习笔记
生命周期
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM（挂载）
- Updating：正在被重新渲染（更新）
- Unmounting：已移出真实 DOM（卸载）
Mounting
componentWillMount()组件将要挂载
componentDidMount()组件完成挂载
Updating
componentWillReceiveProps()组件将要接收prop，这个方法在初始化render时不会被调用。
shouldComponentUpdate()返回一个布尔值，在组件接收到新的props或者state时被调用。在初始化时不被调用，减少重复渲染 可以在你确认不需要更新组件时使用。
componentWillUpdate()在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
render()渲染
componentDidUpdate()在组件完成更新后立即调用。在初始化时不会被调用。Unmounting
componentWillUnmount()在组件从 DOM 中移除的时候立刻被调用
Error Handling
componentDidCatch()错误处理
<!DOCTYPE html>
<html>
<head>
<title>生命周期</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor() {
super();
this.state = {
data: 0
};
};
setNum(){
this.setState({data:++this.state.data})
}
render () {
console.log('1-hello---render');
return (
<div>
<button onClick={() => this.setNum()}>ADD</button>
<p>{this.state.data}</p>
<Num myNum={this.state.data}/>
</div>
);
}
};
class Num extends React.Component{
componentWillMount(){
console.log('2-组件将要挂载');
};
componentDidMount () {
console.log('4-组件完成挂载');
};
// shouldComponentUpdate(nextProps,nextState){
// console.log('在组件接收到新的props或者state时被调用');
// if(条件){
// return false;
// }else {
// return true;
// }
// }
componentWillUpdate() {
console.log('组件将要更新-在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。');
};
componentDidUpdate(){
console.log('在组件完成更新后立即调用。在初始化时不会被调用');
}
render () {
console.log('3-num---render');
return (
<div>
<p>{this.props.myNum}</p>
</div>
);
}
};
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>生命周期2</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
<div id="my"></div>
<script type="text/babel">
window.onload = function(){
//父组件
class ParentList extends React.Component{
constructor(){
super();
this.state = {
name:'老张',
age:50
}
};
handleChange(e){
this.setState({age:e.target.value})
}
handleParent(child){
//alert(child);
this.setState({age:child})
}
render(){
console.log('1-render')
return (
<div>
<h1>我是父组件</h1>
<p>姓名:{this.state.name}</p>
<p>年龄:{this.state.age}</p>
<input type="text" value={this.state.age} onChange={(event)=>this.handleChange(event)} />
<ChildList {...this.state} handleParent={this.handleParent.bind(this)}/>
</div>
)
}
};
// 子组件
class ChildList extends React.Component{
constructor(props){
super();
this.state = {
name:'小张',
//age:props.age
age:20
}
};
componentWillMount(){
console.log('2-组件将要挂载');
};
componentDidMount () {
console.log('4-组件完成挂载');
};
componentWillReceiveProps(nextProps){
console.log('update1-组件将要接收prop，这个方法在初始化render时不会被调用。');
}
shouldComponentUpdate(nextProps,nextState){
console.log('update2-在组件接收到新的props或者state时被调用');
//在render函数调用前判断 如果 state中的值不变 通过return false阻止render调用
if(nextProps.age == this.state.age){ //nextProps 获取最新props的值
return true //满足了条件 才会执行组件更新钩子函数
}else {
return false //false阻止render调用
}
}
componentWillUpdate() {
console.log('update3-组件将要更新-在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。');
};
componentDidUpdate(){
console.log('update5-在组件完成更新后立即调用。在初始化时不会被调用');
}
handleChange(e){
this.setState({age:e.target.value});
this.props.handleParent(e.target.value);
}
render(){
console.log('3-render====update4-render')
return (
<div>
<h1>我是子组件</h1>
<p>爸爸的姓名:{this.props.name}</p>
<p>爸爸的年龄:{this.props.age}</p>
<p>我的年龄:{this.state.age}</p>
<input type="text" value={this.state.age} onChange={(event)=>this.handleChange(event)} />
</div>
)
}
};
ReactDOM.render(
<div>
<ParentList></ParentList>
</div>,
document.getElementById("my")
);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>生命周期3</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor() {
super();
this.timer = null; //定时器
this.state = {
opacity: 1
};
};
componentDidMount () {
console.log('4-组件完成挂载');
this.timer = setInterval(()=>{
var a = this.state.opacity;
a-=0.05;
if(a<0.1){
a = 1;
};
this.setState({opacity:a})
},200)
};
componentWillUnMount(){
console.log('销毁');
clearInterval(this.timer);
}
render () {
return (
<div>
<h1 style={{opacity:this.state.opacity}}>hello world</h1>
</div>
);
}
};
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
过滤器
<!DOCTYPE html>
<html>
<head>
<title>过滤器filter</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor() {
super();
this.state = {
date: 1595426683
};
};
getDate(date){
var d=new Date(date*1000);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
}
render () {
return (
<div>
<h1>北京时间：{this.getDate(this.state.date)}</h1>
</div>
);
}
};
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>过滤器</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<style>
.lists {
color:#f60;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class HelloMessage extends React.Component{
constructor() {
super();
this.state = {
value: ''
};
};
getDate(data){
var d = new Date(data*1000);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
}
action(item){
if(item>25){
return '到了结婚年龄喽'
}else {
return '还年轻着呢'
}
};
action2(item){
switch(item){
case "1":
return "启动";
case "2":
return "离线";
case "3":
return "连接";
default:
return item;
}
}
// 输入的内容长度大于多少出现省略号
toShortShow(data,n){
if(!data) return;
if(data.length >= n){
var s = data.substr(0,n);
return s+'...';
}else {
return data;
}
}
handleChange(event){
this.setState({value:event.target.value})
};
render(){
const user = {
name:'lili',
age:22,
n:'1'
};
return (
<div>
<h1>北京时间：{this.getDate('1595426683')}</h1>
<h1 className="lists">hello,{this.action(user.age)}</h1>
<h1 className="lists">hello,{this.action2(user.n)}</h1>
<input type="text" value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
<h1>{this.toShortShow(this.state.value,5)}</h1>
</div>
)
}
};
ReactDOM.render(
<HelloMessage/>,
document.getElementById('example')
);
</script>
</body>
</html>
webapp小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>webapp首页</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="font/iconfont.css">
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<body>
<!--页面容器-->
<div class="index-content" id="my"></div>
<script type="text/babel">
window.onload = function(){
class App extends React.Component{
render () {
return (
<div>
<Banner />
<Category />
</div>
);
}
};
class Banner extends React.Component{
constructor() {
super();
this.timer = null;
this.state = {
n:0, //初始化
img:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'],
};
};
componentDidMount () { //挂载完成
this.autoPlay();
};
autoPlay(){
this.timer = setInterval(()=>{
this.play();
},2000)
};
play(){
let {n,img} = this.state;
n++;
if(n==img.length){
n = 0;
};
this.setState({
n //n:n
})
};
componentWillUnMount(){ //销毁
console.log('销毁');
clearInterval(this.timer);
}
render () {
let {n,img} = this.state;
var imgList = img.map((item,i)=>{
return <img key={i} src={item} style={{display:(i==n)?'block':'none'}}/>
});
var liList = img.map((item,i)=>{
return <li key={i} className={i==n?"selected":""}></li>
});
return (
<div className="banner">
{imgList}
<div className="banner-circle">
<ul>
{liList}
</ul>
</div>
</div>
);
}
};
class Category extends React.Component{
constructor() {
super();
this.state = {
lists:[
{title:'在线咨询1',icon:'icon-shenghuo',color:'#f60'},
{title:'在线咨询2',icon:'icon-shenghuo',color:'#49dacf'},
{title:'在线咨询3',icon:'icon-jiaoyu',color:'#fa6900'},
{title:'在线咨询4',icon:'icon-shenghuo',color:'#49dacf'},
{title:'在线咨询5',icon:'icon-jiajujiafang',color:'#f60'},
{title:'在线咨询6',icon:'icon-shenghuo',color:'#49dacf'},
{title:'在线咨询7',icon:'icon-11',color:'#f00'}
]
};
};
render () {
let {lists} = this.state;
var _list = lists.map((item,i)=>{
return (
<div className="category" key={i}>
<i className={[`iconfont ${item.icon}`]} style={{background:item.color}}></i>
<label>{item.title}</label>
</div>
)
})
return (
<div className="index-category">
{_list}
</div>
);
}
};
ReactDOM.render(
<App />,
document.getElementById("my")
)
}
</script>
</body>
</html>
common.js
*{
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
body {
font-size: 14px;
background: #fff;
overflow-y:scroll;
overflow-x:hidden;
}
html,body {
max-width:720px;
height:100%;
margin:0 auto;
}
/*index*/
.index-content .banner {
position: relative;
}
.index-content .banner .banner-circle {
position: absolute;
bottom: 5px;
left: 0;
right: 0;
color: #fff;
}
.index-content .banner .banner-circle li{
display:inline-block;
background: rgba(0,0,0,.3);
border-radius: 50%;
padding:7px;
margin:2px;
}
.index-content .banner .banner-circle ul {
text-align: center;
}
.index-content .banner .banner-circle .selected {
background: #f60;
}
.index-content .banner img {
width: 100%;
margin: 0;
padding: 0;
}
/*index-category*/
.index-content .index-category .category {
width: 33.3%;
float:left;
padding: 17px 0;
text-align:center;
border-bottom: 1px solid #f0f0f0;
}
.index-content .index-category .category .iconfont {
font-size: 40px;
display:inline-block;
padding: 10%;
border-radius: 50%;
color:#fff;
border: 3px solid #f9f9f9;
box-shadow: 0px 0px 6px rgba(0,0,0,.5);
}
.index-content .index-category .category .iconfont{
background: #49dacf;
}
.index-content .index-category .category label {
display: block;
padding: 5px 0;
color: #999;
}
/*index-category end*/
字体图标可见下文有提到iconfont：
https://blog.csdn.net/hhhmonkey/article/details/118657708
event - 和原生JavaScript写法一样的
<!DOCTYPE html>
<html>
<head>
<title>event</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class TabList extends React.Component{
constructor() {
super();
};
setParent(e) {
console.log('parent');
};
setChild(e) {
console.log('child');
e.stopPropagation(); //阻止冒泡
};
setOpen(e) {
console.log('open');
e.stopPropagation(); //阻止冒泡
e.preventDefault() ; //取消事件默 认行为
}
render () {
return(
<div onClick={(event) => this.setParent(event)}>parent
<button onClick={(event) => this.setChild(event)}>child</button>
<a href="www.baidu.com" onClick={(event) => this.setOpen(event)}>open</a>
</div>
)
}
};
ReactDOM.render(
<TabList />,
document.getElementById('example')
);
</script>
</body>
</html>
axios
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8" />
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class TabList extends React.Component{
constructor() {
super();
this.state = {
result:[],
name:'',
select:'red'
};
};
componentDidMount () {
// this.handleChange();
};
handleChange(){
axios({
method:'get',
url:'http://localhost:3333/get_table'
}).then(response=>{
if(response.data.code=='200'){
this.setState({result:response.data.result})
}
}).catch(function(error){
console.log(error);
})
}
handleChange2(e){
var name = e.target.name;
this.setState({
[name]:e.target.value
})
}
submit(){
var {name,select} = this.state;
axios({
method:'post',
url:'http://localhost:3333/form_register',
data:JSON.stringify({name:name,select:select})
}).then(response=>{
if(response.data.code=='200'){
console.log('ok')
}
}).catch(function(error){
console.log(error);
})
}
render () {
let color = ['red','blue','green'];
return(
<div>
<button onClick={(event)=>this.handleChange(event)}>click</button>
<ul>
{
this.state.result.map(function(item,index){
return <li key={index}>{item.name}-{item.city}</li>
})
}
</ul>
<div>
name:<input type='text' name='name' value={this.state.name}
onChange={(event)=>this.handleChange2(event)} />
color:
<select name='select' value={this.state.select}
onChange={(event)=>this.handleChange2(event)} >
{
color.map((item,index)=>{
return <option key={index}>{item}</option>
})
}
</select>
<button onClick={()=>this.submit()}>提交</button>
</div>
</div>
)
}
};
ReactDOM.render(
<TabList />,
document.getElementById('example')
);
</script>
</body>
</html>
1796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
