react基础学习（二）

react进阶

chilren属性

表示该组件的子节点，只要组件内部有子节点，props中就有该属性，其中可以是普通文本、普通标签元素、函数/对象、JSX等

只要你在组件内部写有内容，他就会出现在props的chilren属性中。

props校验

我们通常无法保证父组件传给子组件的数据是否符合我们需要的数据类型，当不存在ts语法给予错误判断时，若传入的数据格式不对，则会导致组件内部的错误。而这时，我们可以使用props校验，虽然比较鸡肋，还是更推荐tsx。

常见支持校验：

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})

实现步骤：

• 安装属性校验包：yarn add prop-types
• 导入prop-types 包
• 使用 组件名.propTypes = {} 给组件添加校验规则

import PropTypes from 'prop-types'

const List = props => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
  return <ul>{lis}</ul>
}

List.propTypes = {
  colors: PropTypes.array
}

此校验还可以给组件配置默认值：通过 defaultProps 可以给组件的props设置默认值，在未传入props的时候生效

1. 函数组件配置

   function List({pageSize = 10}) {
     return (
       <div>
         此处展示props的默认值：{ pageSize }
       </div>
     )
   }
   
   // 不传入pageSize属性
   <List />
   

2. 类组件

   class List extends Component {
     static defaultProps = {
       pageSize: 10
     }
     render() {
       return (
         <div>
           此处展示props的默认值：{this.props.pageSize}
         </div>
       )
     }
   }
   <List />
   

生命周期

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程。

注意，只有类组件才有生命周期（函数组件不需要实例化）

图像链接：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

在react中，生命周期主要分为三个大阶段，以下分别简要讲述：

挂载阶段

钩子函数	触发时机	作用
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState() ）
componentDidMount	组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求 2.DOM操作

更新阶段

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate	组件更新后（DOM渲染完毕）	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

卸载阶段

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	组件卸载（从页面中消失）