Easy的React学习笔记（二.进阶）

上接

Easy的React学习笔记（一.基础）：

https://blog.csdn.net/qq_37279880/article/details/102487420

---

目录

 

15_使用PropTypes校验传递值的类型(Typechecking With PropTypes)

1.属性类型校验的意义：

2.校验传递值的类型，格式如下：

3.必需值校验（isRequired关键字）：

4.默认prop值（defaultProps关键字）

16_ref属性提高代码语义化、setState的回调函数与console.log

17_组件的生命周期函数

1.Mounting: 组件挂载阶段（组件挂载即组件插入DOM树）

2.Updating: 组件更新阶段

3.Unmounting---组件卸载卸载时

18_用生命周期函数shouldComponentUpdate改善程序性能

19_axios数据请求

1.axios安装

解决方法：用管理员身份运行命令提示符（cmd）再继续安装axios，安装成功：

---

15_使用PropTypes校验传递值的类型(Typechecking With PropTypes)

官方文档连接：

 

Typechecking With PropTypes

https://react.docschina.org/docs/typechecking-with-proptypes.html

1.属性类型校验的意义：

在父组件向子组件传递数据时，是在父组件中子组件添加属性（props）的方式，但是在子组件中并没有对这些属性进行校验，就是说父组件传递过来的任何值都不会报错，这在实际开发中是不允许的，在大型项目中如果不进行校验，开发后期业务逻辑会变得非常混乱出现错误，业务逻辑错误不像语法错误非常容易找，所以属性类型校验就非常有必要了。

应用：

在Xiaojiejie.js中为子组件XiaojiejieItem传递通过添加属性的方式传递了四个值，有字符串、数字、方法，在子组件XiaojiejieItem中都是可以通过PropTypes校验传递过来的值的类型。

XiaojiejieItem.js头部引入PropTypes：

import PropTypes from 'prop-types'
// import a from 'prop-types'

 注意这里是导入默认组件，所以前面的PropTypes想取名什么都可以，取a都可以，

关键是校验组件.propTypes的propTypes是唯一写法。

2.校验传递值的类型，格式如下：

组件.propTypes={

    属性:PropTypes.属性类型,

}

红框内propTypes是唯一写法，绿框内PropTypes在导入'prop-types'默认组件时，名字隋边取，不过为了方便阅读理解，我取PropTypes

XiaojiejieItem.js完整代码如下:

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

class XiaojiejieItem extends Component {
    constructor(props){
        super(props)
        this.handleClick=this.handleClick.bind(this)
    }
    render() { 
        return ( 
            <li onClick={this.handleClick}>{this.props.content}</li>
        )
    }
    handleClick(){
        // 测试能否取得list的索引
        // console.log(this.props.index)
        // 子组件不能直接修改父组件的数据，TypeError: Cannot assign to read only property 'list' of object '#<Object>'
        // this.props.list=[]，报错
        this.props.deleteItem(this.props.index)
    }
}

XiaojiejieItem.propTypes={
        // content:a.string,
        // index:a.func  
        // deleteItem:a.func,
    content:PropTypes.string,
    index:PropTypes.number,
    deleteItem:PropTypes.func
}

export default XiaojiejieItem;

 效果（没有报错，因为传递的值和我们要求的PropType值是一样）：

如果把index的PropType值改成string，console就会报错了：

XiaojiejieItem.propTypes={
        // content:a.string,
        // index:a.func  
        // deleteItem:a.func,
    content:PropTypes.string,
    index:PropTypes.string,
    deleteItem:PropTypes.func
}

意思是index属性传过来的number类型，我们自己要求的是string类型，所以报错了。

当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。出于性能方面的考虑，propTypes 仅在开发模式下进行检查。

 

3.必需值校验（isRequired关键字）：

在XiaojiejieItem.js中的<li></li>加入代码{this.personname}为你服务：

render() { 
    return ( 
    <li onClick={this.handleClick}>{this.props.personname}为你服务{this.props.content}</li>
    )
}

此时父组件Xiaojiejie.js没有传递personname的值过来，也不会报错：

如果我们在子组件XiaojiejieItem.js下方校验处，为personname的校验加上isRequired关键字，父组件Xiaojiejie不传值就会报错：

XiaojiejieItem.propTypes={
        // content:a.string,
        // index:a.func  
        // deleteItem:a.func,
    content:PropTypes.string,
    index:PropTypes.number,
    deleteItem:PropTypes.func,
    personname:PropTypes.string.isRequired
}

Warning: Failed prop type: The prop `personname` is marked as required in `XiaojiejieItem`, but its value is `undefined`.

意思是我们在XiaojiejieItem的校验时要求personname属性必须传值的，所以报错了。

我们在为父组件Xiaojiejie引用子组件XiaojiejieItem时，为XiaojiejieItem的personname属性定义值：

<XiaojiejieItem 
content={item} 
index={index}
key={item+index}
deleteItem={this.deleteItem.bind(this)}
personname='石原里美'
/>

报错解决： 

4.默认prop值（defaultProps关键字）

我们在为把父组件Xiaojiejie引用子组件XiaojiejieItem时XiaojiejieItem的personname属性删掉，在XiaojiejieItem.js中为personname属性加入默认值'新垣结衣'

XiaojiejieItem.defaultProps={
    personname:'新垣结衣'
}

实现效果：

格式：

子组件名.defaultProps={
    属性:'属性名'
}

16_ref属性提高代码语义化、setState的回调函数与console.log

1.用为标签加上ref属性，提高代码可读性（语义化）：

React开发过程中通常有不少语义化模糊的代码，代码语义化模糊影响开发效率、代码可读性，我们通过ref属性提高代码代码可读性。

之前的inputChange方法中通过inputValue:e.target.value的写法修改文本框的值，这种写法显然不直观。

如何实现：为标签加上ref属性，从而把标签绑定到'this.标签'上，实现代码语义化

为input标签加入ref属性，通过ref属性、箭头函数把input标签绑定到this.input上：

<input 
id='addList' 
className='input' 
value={this.state.inputValue} 
onChange={this.inputChange.bind(this)} 
// 通过ref属性、箭头函数把input标签绑定到this.input上
ref={(input)=>{this.input=input}}
/> 

inputValue:e.target.value就修改为：inputValue:this.input.value

inputChange(e){     //绑定响应事件改变文本框inputValue的值
    console.log(this);//onChange事件中重新bind了this指向Xiaojiejie,如果没bind就是undefined
    console.log(e);//e是合成事件SyntheticEvent
    console.log(e.target);//e.target是合成事件的target属性，即整个input标签
    console.log(e.target.value);//e.target.value即input标签的value值
    // this.state.inputValue=e.target.value;//错误写法：因为没用没用this.setState方法
    // console.log(this);//输出undefined,所以要bind方法绑定this
    // console.log(this === window);//false
    this.setState({      //React中改变组件内部的状态数据的值要用this.setState方法，注意setState的的大小写
        // inputValue:e.target.value
        inputValue:this.input.value
    })
}

效果：

原理：

实际上通过console.log发现，其实e.target就是input标签，所以我们通过为input标签加入ref属性，通过ref属性、箭头函数把i