13. 生命周期函数的使用场景

生命周期函数的使用场景

shouldComponentUpdate

因为父组件的render函数执行的时候，会导致子组件的render每次都跟着执行，这样没有必要。我们可以将设计为当内容发生变化的时候子组件才渲染，避免每次子组件都跟着父组件渲染，从而提升性能。

import React, { Component } from 'react' 
import PropTypes from 'prop-types'

class TodoItem extends Component {
	constructor(props){
		super(props)
		this.deleteFunc = this.deleteFunc.bind(this) 
	} 
	render() {
			const { content } = this.props; 
			return (<li onClick={ this.deleteFunc } > { content } </li>)
		}
	deleteFunc(){
		const { index, deleteItem } = this.props; 
		deleteItem({ index })
	}
	// shouldComponentUpdate 可以接收两个参数，分别是新的Props值和State值
	shouldComponentUpdate(nextProps, nextState){
	// 这里进行一个判断，当content的内容和以前的一样，那么就返回false，子组件不渲染，反之就渲染子组件
		if (nextProps.content !== this.props.content){
			return true
		}else{
			return false
		}
	}
}
export default TodoItem;

axios

1. 安装 cnpm install axios

// 页面加载完成后发起ajax请求
componentDidMount(){
	axios.get('http://www.baidu.com').then(()=>{
		alert('执行成功')
	}).catch(()=>{
		alert('执行失败')
	})
}

https://github.com/rexyan/simple_react/tree/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF