七十七、React中的propTypes，defaultProps和生命周期函数

2020/11/19、 周四、今天又是奋斗的一天。

@Author：Runsen

React，相比于Vue，React更加灵活，但是对JavaScript基础的要求也更高一些。我继续学习React

propTypes

数据类型校验，当父组件传递的数据与子组件规定的数据类型不一样时会报警告错误。

import PropTypes from 'prop-types'

组件名.propTypes = {
    test: PropTypes.string.isRequired,//isRequired必须传递
    content: PropTypes.string,
    deleteIntem: PropTypes.func,
    index: PropTypes.number

propTypes可以用来做类型的校验，如果后面有isRequired ，组件中的数据必须要求传递

defaultProps

默认值，与上的test属性相结合，test是一个必填的值，当父组件没有传递test值时，则会自动调用defaultProps方法

TodoItem.defaultProps = {
    test: 'hello world'
}

refs

首先，我们TodoList中创建一个 ref 实例，并将其赋值给 this.Input，然后通过 ref 属性将其分配给 input 元素。

那么我们可以使用const value = this.input.value;替换const value = e.target.value;，

生命周期函数

生命周期函数指的在某一个时刻组件会自动调用执行的函数

Mounting（加载阶段：涉及6个钩子函数）

• constructor() 加载的时候调用一次，可以初始化state
• getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性
• getInitialState() 初始化state，可以直接在constructor中定义this.state
• componentWillMount() 组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state
• render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
• componentDidMount() 组件渲染之后调用，只调用一次

Updating（更新阶段：涉及5个钩子函数)

• componentWillReceiveProps(nextProps) 组件加载时不调用，组件接受新的props时调用
• shouldComponentUpdate(nextProps, nextState) 组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）
• componentWillUpdata(nextProps, nextState) 组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state
• render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
• componentDidUpdate() 组件加载时不调用，组件更新完成后调用