今日分享：
生命周期
filter过滤处理
轮播实例
生命周期
组件的生命周期可分成三个状态：
- 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 type="text/javascript" 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}) //++在后 先赋值后加1，++在前，先加1再赋值
}
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('组件将要挂载');
};
componentDidMount () {
console.log('组件完成挂载');
};
componentWillUpdate() { //初始化并没有调用
console.log('组件将要更新 render前');
};
componentDidUpdate() { //初始化并没有调用
console.log('组件将要更新 render后');
};
componentWillUnmount(){
console.log('在组件从 DOM 中移除的时候立刻被调用');
}
render () {
console.log('render')
return (
<div>
<p>{this.props.myNum}</p>
</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 type="text/javascript" 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 = {
opacity: 1.0
};
};
componentDidMount(){ //挂载完成
this.timer = setInterval(()=>{
var opacity = this.state.opacity;
opacity -= .05;
if(opacity <0.1){
opacity = 1.0;
}
this.setState({
opacity:opacity
})
},500)
}
componentWillUnmount() { //组件销毁
clearInterval(this.timer);
}
render () {
return (
<div>
<p style={{opacity:this.state.opacity}}>hello world</p>
</div>
);
}
};
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
shouldComponentUpdate用法
传入值相同时，组件不渲染
class ParentList extends React.Component {
constructor(){
super();
this.state ={
name:'老张',
msg:'I am a Dad'
}
}
handleChange(e){
this.setState({
name:e.target.value
})
}
render(){
return (
<div>
<h1>我是父组件</h1>
<p>{this.state.name}</p>
<p>{this.state.msg}</p>
<input type="text" value={this.state.name} onChange={(e)=>this.handleChange(e)} />
<ChildList {...this.state}/>
</div>
)
}
};
class ChildList extends React.Component {
constructor(props){
super(props);
this.state ={
name:props.name
}
}
shouldComponentUpdate(nextProps,nextState) { //减少重复渲染 可以在你确认不需要更新组件时使用
//console.log(nextProps);
if(nextProps.name==this.state.name){
return false
}else {
return true
}
}
componentWillReceiveProps(nextProps){ //组件接收到props
}
render(){
console.log('render')
var {name,msg} = this.props;
return (
<div>
<h1>我是子组件</h1>
<p>{this.props.name}</p>
<p>{this.props.msg}</p>
</div>
)
}
};
ReactDOM.render(
<div>
<ParentList></ParentList>
</div>,
document.getElementById("my")
);
过滤
过滤：react 无过滤器，利用方法进行过滤
class List extends React.Component {
action(n){
// if(n==0) {
// return '已采购';
// }else {
// return '未采购';
// }
switch(n){
case 0:
return '已采购';
case 1:
return '未采购';
default:
return n;
}
}
action2(n){
if(n>20){
return '成年了';
}else {
return '未成年';
}
}
render(){
var info = {
state:0,
age:22
}
return (
<div>
<h1>我是组件,{this.action(info.state)}</h1>
</div>
)
}
}
轮播实例
<!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>轮播</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="example"></div>
<script type="text/babel">
class Banner extends React.Component{
constructor() {
super();
this.state = {
n: 1,
images:['img/banner1.jpg',
'img/banner2.jpg',
'img/banner3.jpg',
'img/banner4.jpg',
'img/banner5.jpg']
};
};
componentDidMount () {
this.play();
};
autoPlay(){
this.state.n++;
if(this.state.n == this.state.images.length){
this.state.n = 0;
}
this.setState({
n:this.state.n
})
}
play(){
// setInterval(函数体,时间);
// setInterval(() => {this.autoPlay()}, 2000);
setInterval(this.autoPlay.bind(this),2000);
}
render () {
const {n,images} = this.state
let imgList = images.map((item,index)=>{
return (<img key={index} src={item} style={{display:(index==n)?'block':'none'}}/>)
})
let liList = images.map((item,index)=>{
return (<li key={index} className={(index==n)?'selected':''}></li>)
})
return (
<div className="banner">
{imgList}
<div className="banner-circle">
<ul>
{liList}
</ul>
</div>
</div>
);
}
};
class App extends React.Component{
render () {
return (
<div>
<Banner />
</div>
);
}
};
ReactDOM.render(
<App/>,
document.getElementById('example')
);
</script>
</body>
</head>
版权声明：本文为weixin_42549581原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。