游魂博客

当前位置: 首页 > React学习笔记 > 正文

React组件进阶及生命周期

props - 类型校验

• 理解props都是外来的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错

// 开发者A创建的组件
const List = props => {
  const arr = props.colors
  const list = arr.map((item, index) => <li key={index}>{item.name}</li>)
    return (
        <ul>{list}</ul>
    )
}

// 开发者B去使用组件
<List colors={19} />

报错：TypeError: arr.map is not a function

• 通过 prop-types 可以在创建组件的时候进行类型检查，更合理的使用组件避免错误

  • 安装 yarn add prop-types

  • 导入 import PropTypes from 'prop-types'

  • 使用 组件名.propTypes = { 'props属性':'props校验规则' } 进行类型约定，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 = {
  // props属性：校验规则
  colors: PropTypes.array
}

Props - 类型校验常见类型

常见的校验规则

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

校验规则的使用

const Demo = (props) => {
  return <div>Demo组件</div>
}
Demo.propTypes = {
  // 常见类型
  optionalFunc: PropTypes.func,
  // 常见类型+必填
  requiredFunc: PropTypes.func.isRequired,
  // 特定结构的对象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })
}

props - 默认值

作用：给组件的props设置默认值，在未传入props的时候生效

设置props的默认值

// 分页组件
const Pagination = (props) => {
  return <div> pageSize的默认值：{props.pageSize}</div>
}
// 设置默认值
Pagination.defaultProps = {
    pageSize: 10
}
// 使用组件
<Pagination />

新版react推荐使用参数默认值来实现

// 分页组件
const Pagination = ({pageSize = 10}) => {
  return <div> pageSize的默认值：{pageSize}</div>
}
// 使用组件
<Pagination />

props - 静态属性写法

类的静态属性

• 实例属性需要实例化后，通过实例访问
• 静态属性，可以通过类直接访问

class Person {
  // 实例属性
  gender = '男'
  // 静态属性
  static age = 18
}
// 访问静态属性
console.log(Person.age) // 18
// 访问实例属性
const p = new Person()
console.log(p.gender)   // 男

类组件中 propTypes defaultProps 的使用

• 在类组件中通过 static propTypes = {} 定义props校验规则 static defaultProps = {} 定义props默认值

class Demo extends Component {
  // 校验
  static propTypes = {
    colors: PropTypes.array,
    gender: PropTypes.oneOf(['男', '女']).isRequired
  }
  // 默认值
  static defaultProps = {
    gender: '男'
  }

  render() {
    return <div>Demo组件</div>
  }
}

生命周期 - 概览

什么是组件生命周期

• 一个事物从创建到最后消亡经历的整个过程

React类组件的生命周期整体概览，组件从创建到消耗的过程

React组件生命周期

生命周期的意义

• 助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因
• 钩子函数为开发人员在不同阶段操作组件提供了时机

总结：只有类组件才有生命周期，分为 挂载阶段 更新阶段 卸载阶段

生命周期 - 挂载阶段

执行顺序

constructor() —> render() —> componentDidMount()

触发时机及作用

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

例：

import { Component } from 'react'

export default class App extends Component {
  constructor () {
    super()
    console.log('1. constructor执行')
  }
  componentDidMount () {
    console.log('3. componentDidMount执行')
  }
  render() {
    console.log('2. render执行')
    return <div>App组件</div>
  }
}

生命周期 - 更新阶段

执行顺序

render() —> componentDidUpdate()

何时触发更新阶段

1. setState()
2. forceUpdate() 强制组件更新
3. 组件接收到新的props（实际上，只需要父组件更新，子组件就会重新渲染）

触发时机及作用

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

例：

import { Component } from 'react'

class Child extends Component {
  render() {
    return <h1>统计豆豆被打的次数：</h1>
  }
}

export default class App extends Component {
  state = {
    count: 0
  }

    handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidUpdate() {
    console.log('2. componentDidUpdate执行')
  }

  render() {
    console.log('1. render执行')
    return (
      <div>
        <Child />
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

生命周期 - 卸载阶段

什么时候触发卸载？

• 在组件被移除的时候（消失）触发卸载阶段

触发时机及作用

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

例：

import { Component } from 'react'

class Child extends Component {
  componentWillUnmount () {
    console.log('componentWillUnmount执行')
  }
  render() {
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }
}

export default class App extends Component {
  state = {
    count: 0
  }

    handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        { this.state.count < 5 && <Child count={this.state.count} />}
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

setState扩展 - 发现问题

发现setState是“异步”的，多次setState会合并。

• 理解setState是“异步”的，理解setState会合并更新
  • 调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）
  • 如果多次调用 setState 更新状态，状态会进行合并，后面覆盖前面
  • 等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    this.setState({count: this.state.count+100})
    this.setState({count: this.state.count+1})
    console.log(this.state.count)  // 打印0
  }
  render() {
    console.log('render')
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>体现“异步”和合并</button> 
      </div>
    )
  }
}

• React这么处理的好处是什么？
  • “异步” 更新，或者做延时更新，为了等所有操作结束后去更新
  • 合并更新，是将多次setState合并，然后进行更新
  • 都是为了提高渲染性能

setState扩展 - 更多用法

• 多次使用setState让数据串联使用的写法

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // 页面展示 1
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    // 页面展示 3
  }
  render() {
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>setState串联更新数据</button> 
      </div>
    )
  }
}

• 调用setState后页面更新后执行逻辑写法

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    },()=>{
       console.log('更新后：', this.state.count)  // 打印：1
    })
    console.log('未更新：', this.state.count)  // 打印：0
  }
  render() {
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>setState更新后执行逻辑</button> 
      </div>
    )
  }
}

总结

• 使用 setState((prevState) => {}) 语法，可以解决多次调用状态依赖问题
• 使用 setState(updater[, callback]) 语法，在状态更新（页面完成重新渲染）后立即执行某个操作

setState扩展 - 异步OR同步

在react类组件中，多次的setState并不会立刻执行，而是合并成一个来执行。

• setState本身并不是一个异步方法，其之所以会表现出一种“异步”的形式，是因为react框架本身的一个性能优化机制
• React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新

知道何时出现“异步”，知道何时出现同步

• setState如果是在react的生命周期中或者是事件处理函数中，表现出来为：延迟合并更新（“异步更新”）
• setState如果是在setTimeout/setInterval或者原生事件中，表现出来是：立即更新（“同步更新”）

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    // 合成事件的处理函数 or 生命周期构造函数
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // 表现异步

    setTimeout(() => {
      this.setState({count: this.state.count+1})
      this.setState({count: this.state.count+1})
    }, 0);
    // 表现同步
  }
  render() {
    console.log('render')
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>同步OR异步</button> 
      </div>
    )
  }
}

全文完