react-基础操作（3）生命周期和ajax

2020-03-28

字数统计: 530字 | 阅读时长≈ 2分

生命周期

生命周期图谱

挂载

当组件实例被创建并插入DOM中，生命周期调用顺序如下**

construstor() 只执行一次。初始化，在super之后构建

static getDerivedStateFromProps()

render() 负责渲染，即合成虚拟DOM

componentDidMount() 获取真实DOM比如ajax

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

卸载

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()

错误处理（不常用，一般用console.log）

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

static getDerivedStateFromError()

componentDidCatch()

`是ES6新增的模版字符串

“hello” + str + “world !”

``hello ${str} world !

减少更新次数

方法一：

把Component改成PureComponent，但这种只做了第一层，方法二是更深层的。

方法二：

第一个判断

1
2
3

shouldComponentUpdate(nextProps,nextState){
	return (nextProps.isCompleted !== this.props.isCompleted)||(nextProps.xxx != this.props.xxx)
}

第二个判断

老版本的坑：

constructor里面通过props来初始化一个state，在props修改之后，这个state不会再次更新。需要借助于componentWillReceiveProps来做一次修正

新版本：

constructor(){
        super()
        this.state = {
            completedText: ''
        }
    }
    
    static getDerivedStateFromProps(props){
        return{
            completedText: props.isCompleted ? 'wancheng':'weiwancheng'
        }
    }

Ajax

json官网前后端接口

npm install axios -S

新建 src/services/apis.js

export default{
    baseURL: 'https://jsonplaceholder.typicode.com',
    //获取todos的接口
    todos: '/todos'
}

新建src/services/index.js

import axios from 'axios'

import apis from './apis'

const ajax = axios.create({
    baseURL: apis.baseURL
})

//在这里还回去做一些全局的拦截器处理

export const getTodos = ()=>{
    return ajax.get(apis.todos)
}

在App.js中引入

1	import { getTodos } from './services'

同时

constructor() {
        super()
        this.state = {
            title: '待办事情',
            desc:'有点多',
            article: '<div>123456 <i>654321</i></div>',
            todos:[],
            isLoading: true
        }
    }

    getData = () => {
        getTodos()
            .then(resp => {
                //console.log(resp)
                if (resp.status === 200) {
                    this.setState({
                        todos: resp.data
                    })
                    //setTimeout(() => {这里具体操作},5000)
                }else {
                    //处理错误
                }
            })
            .catch(err =>{
                console.log(err)
            })
            .finally(() => {
                this.setState({
                    isLoading: false
                })
            })
    }

    componentDidMount (){
        this.getData()
    }

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react5/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！