【React 基础五】组件基础之生命周期和上下文

泡泡码客
419 阅读3分钟

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

什么时候掘金的更文能看质量不看数量呢 -_-

本篇主要内容为 React 组件化基础，组件化基础共三篇，如下：

React - 组件生命周期函数

什么是生命周期函数？ ​

生命周期就是程序运行到某一时刻时自动调用执行的函数 ​

开发者希望在程序运行到某一时刻时去做自定义的事情，就可以利用生命周期函数 ​

组件生命周期分为三个阶段：组件挂载、组件数据更新、组件卸载 ​

组件挂载时和组件数据更新时都会重新渲染组件 ​

函数组件的生命周期函数

以下通过 React 函数组件 Hooks 示例一下函数组件生命周期的几个阶段是如何触发的 ​

React Hooks 后面会单开一个章节具体介绍和使用

import React, { useEffect, useState } from 'react'
const App = () => {
  const [user, setUser] = useState({ name: "醒途" })
  
	useEffect(() => {
  	componentMount()
  }, [])
  
  useEffect(() => {
    dataUpdate()
    return componentUnmount
  }, [user])
  
  // 该函数在组件挂载时执行
  const componentMount = () => {}
  
  // 该函数在组件数据（user）发生更新时执行
  const dataUpdate = () => {}
  
  // 该函数在组件卸载时执行
  const componentUnmount = () => {}
  
  return <div>user.name</div>
}

类组件的生命周期函数

这里再拓展一下 React 类组件的生命周期函数执行顺序，除了几个特殊点的生命周期函数，其它不做过多展开 ​

  • 组件挂载
    • constructor
    • getDerivedStateFromProps
    • render
    • ---React update Dom
    • componentDidMount
  • 组件数据更新（New Props、setState、forceUpdate 时）
    • getDerivedStateFromProps
      • 每次 re-rendering 之前被调用，是一个静态函数（没有 this）
      • 返回值为 null 时表示对于 state 不进行任何操作
      • 如果需要修改 state，则将修改后的值作为返回值
    • shouldComponentUpdate
      • false 返回值将截断不继续向下走
    • render
    • getSnapshotBeforeUpdate
      • 组件完成更新后执行，可用于执行一些逻辑和计算，返回值被作为 componentDidUpdate 第三参数传入
    • ---React update Dom
    • componentDidUpdate
  • 组件卸载
    • componentWillUnmount

React - 组件上下文 Context

我们上篇说到过 React 单向数据流的原因，如果多个组件需要共享状态的话，这个状态就需要放在共同的上级组件进行管理 ​

如果这些组件的层级过多导致单向数据流的原因，共享状态就需要层层向下传递，这样管理和使用起来就比较麻烦 ​

这个时候，我们就可以使用 Context 跨级传递数据 ​

// -----------------------------------------------
// dataContext.js
import React from 'react'

// 创建一个上下文对象，createContext 接收一个入参作为初始数据
const dataContext = React.createContext(defaultValue)
// Provider 是从上向下传递数据的
const DataProvider = dataContext.Provider
// Consumer 是从上面 “取” 向下传递的数据的
const DataConsumer = dataContext.Consumer

// 可解构简写为：const {Provider, Consumer} = React.createContext(defaultValue)

export { DataProvider, DataConsumer }


// -----------------------------------------------
// App.js
import { DataProvider } from './dataContext'

const App = () => {
  return (
    // 在最上层组件使用 Provider 注入我们需要向下传递的数据
    // 如这里传递了一个 value
  	<DataProvider value={{ name: "醒途" }}>
      <Main />
    </DataProvider>
  )
}


// -----------------------------------------------
// Content.js  -  比如这个 Content 是 Main 组件的孙子级
// App -> Main -> ... -> Content
import { DataConsumer } from './dataContext'

const Content = () => {
	return (
  	<div>
      // 在要用到数据的地方使用 Consumer 来消费数据
      // Consumer 中间可使用一个回调函数，函数的参数就是
      <DataConsumer>
        {value => {
        	return <div>{value.name}</div>
        }}
      </DataConsumer>
    </div>
  )
}

好了，React 基础篇就介绍就到这里 ​

在下篇介绍完 React 路由 react-router-dom 后 ​

我们的 React VirtualDOM 和 Diff 算法就也要开章啦 ​

我们下期再见 ​

​

本篇为 React 系列第 5 篇

vx👦:mmm7nnn

公号🐓：醒途

邮箱📧：suanzao@wacai.com（欢迎找我内推）

如果喜欢这个系列请给我一个点赞👍或者一个关注➕，诸君的支持是我创作的最大的动力

avatar
文章
阅读
粉丝