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')} )}