React 中的生命周期函数是很重要的。
我们在写组件的时候，组件都是继承自ponent 的，Component内置了其他所有生命周期函数，唯独没有render 函数。因此我们在写组件的时候，一定要定义render 函数。
1.shouldComponentUpdate 函数
我们在浏览器打开todolist，在chrome的调试工具中勾选highlight update 如下。然后每次组件有更新渲染就会在页面上有框提示。
我们会发现 在todolist 中，父组件中，每次输入框的值变化，父组件render 会重新渲染，子组件下面的list 也会重新渲染。
子组件被重新渲染，是因为父组件的render 被执行了。
其实，子组件的数据没有发生变化，因此在这种情况下，子组件重新渲染是会降低一些性能的。
这时候，就要用到生命周期函数 shouldComponentUpdate，
shouldComponentUpdate() {return false;}
但是，一般使用shouldComponentUpdate 函数，我们会像下面这样使用。nextProps 是接下来Props会变成什么样，nextState 是接下来state 会变成什么样。
shouldComponentUpdate(nextProps, nextState) {if( nextProps.content !== this.props.content) {return true;} else {return false;}}render() {const {content,test} = this.props;return (<div onClick={this.handleDelete}>{test} - {content}</div>)}
2. componentDidMount 函数
当我们在组件中，需要使用AJAX请求去接口访问数据的时候，我们的请求一般是放在componentDidMount 生命周期函数中的。
因为它只会被执行一次，在页面挂载成功的时候执行。当然，把ajax 请求放到componentWillMount 函数中，也是可以的。但是在ReactNative 、用React做服务器端的同构，更高的技术的时候就会有问题，因此还是把ajax 放在componentDidMount 中。
React 并没有提供ajax的一些函数，我们可以安装第三方的工具 axios .
进入项目目录，然后输入下面命令即可
npm install axios
安装好了后，使用很简单，如下，先引入
import React, {Component} from 'react';import TodoItem from './TodoItem';import axios from 'axios';
然后
componentDidMount() {axios.get('/api/todolist').then( () => {console.log('ajax request');} ).catch( () => {console.log('ajax failed')} )}
3. 前端模拟数据
上面的ajax 请求会返回404 因为没有上面的接口。下面我们将在本地模拟数据。
当然，使用工具 Charles。
它的官网：/
下载完安装包后直接安装即可。
下面，我们现在，桌面建一个文件 todolist.json (mac 上 touch todolist.json )
然后在这个文件里输入一些数据，如下。
["red", "green"]
接着，我们打开Charles 软件，点击map local 如下。
然后，点击 “add”
出现下面的对话框。添好内容。确定即可。
注意，使用mac 电脑的时候，要 在proxy - macOS proxy 中输入一些信息。之后就可以正常使用了。
然后，我们把代码稍加改造。如下。
componentDidMount() {axios.get('/api/todolist').then( (res) => {this.setState({list: [...res.data]})} ).catch( () => {console.log('ajax failed')} )}
