React第三天

2019-02-15  本文已影响0人  沉默成本

默认属性

组件名.defaultProps = {}

例如:在class组件外部添加

  1.UserItemCom.defaultProps={
      user:{
        username:"张三1111",
        comment:"张三评论的内容。。。。"
    }

}
 2.在class组件内部添加
static defaultProps={
    user:{
        username:"张三1111",
        comment:"张三评论的内容。。。。"
    }
}

数据类型检查

1.安装:

  npm install prop-types --save

2.在项目组件中引入:

import PropTypes from 'prop-types';

3.具体有哪些类型:

数组类型: PropTypes.array,
布尔类型: PropTypes.bool,
函数类型: PropTypes.func,
数值类型: PropTypes.number,
对象类型: PropTypes.object,
字符串类型: PropTypes.string,
symbol类型: PropTypes.symbol,

JS有哪些基本类型:number,string,boolean,undefined,null,Symbol(ES6新增的)
复杂类型:Object,Function

生命周期

React生命周期主要包括三个阶段:初始化阶段、运行中阶段和销毁阶段

(1)初始化阶段:
1.设置默认属性: defaultProps() {}
2.设置数据类型:propTypes={}
3.组件加载之前:componentWillMount() {}
4.组件渲染过程中:render() {}
5.组件dom加载完成:componentDidMount() {} //获取后台数据通常也是在这个钩子中

(2)运行中阶段

    1.组件接收到属性时触发:
        componentWillReceiveProps() {}
    2.????? shouldComponentUpdate() {} 做优化的,如果两次属性或state值相同,可以设置是否重新渲染
    3.更新前:componentWillUpdate() {}
    4.更新后:componentDidUpdate() {}

(3)销毁阶段:
         太累了 有空在补  ()


react生命周期一共有10个

React官方文档:https://juejin.im/post/5a062fb551882535cd4a4ce3

React中文官方文档:http://react.html.cn/docs/react-component.html

上一篇下一篇

猜你喜欢

热点阅读