1.在子组件中，shouldComponentUpdate可以用来避免不必要的渲染，节省性能

shouldComponentUpdate(nextProps, nextState, nextContext) {
    //nextProps指的是接下来我的props会变成什么样
    //nextState指的是接下来我的state会变成什么样

    //如果我接下来的props里的content不等于当前prop里面的content 则需要渲染
    if (nextProps.content !== this.props.content){
      return true;
    } else {
      return false;
    }
  }

2.生命周期中，使用ajax数据请求

在终端将axios库安装到项目中,重新启动服务器
LYKdeMacBook-Pro:my-app hm$ yarn add axios
npm run start

在页面引入

import axios from 'axios';

//componentWillMount、componentDidMount只有在页面第一次挂载的时候被执行
  //ajax请求放在componentWillMount,可能会和以后更高端的方法起到冲突
  componentWillMount() {

  }
  //ajax请求放在这里不会有问题
  componentDidMount() {
       axios.get('/api/my-app')
         .then(()=>{alert('success')})
         .catch(()=>{alert('error')})
  }

使用Charles实现本地数据

1.安装Charles 略
2.打开Charles
到菜单 Tool ——> Map Local Setting里设置

Snip20190430_2.png Snip20190430_7.png
选择创建的存储数据的.json文件，如我的.json文件中内容为：
["Dell" , "Lee" , "IMOOC"] Snip20190430_5.png Snip20190430_8.png
command + R刷新网页弹出success。
谷歌浏览器可能有未知错误，请换其他浏览器操作。
操作成功，修改代码让数据显示

componentDidMount() {
       axios.get('/api/todolists')
         .then((res)=>{
           console.log(res.data);
           this.setState(() => {
             return {
               list: res.data
             }
           })
         })
         .catch(()=>{alert('error')})
  }

优化这段代码

componentDidMount() {
       axios.get('/api/todolists')
         .then((res)=>{
           console.log(res.data);
           this.setState(() => ({
               list: [...res.data]
             }))
         })
         .catch(()=>{alert('error')})
  }