【React入门必备知识篇03】--- React 组件进阶，2024最新百度、头条等公司前端面试题目

• 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数；

• 父组件提供一个回调函数，用来接收数据；

• 将该函数作为属性的值，传递给子组件；

• 子组件通过 props 调用回调函数；

• 将子组件的数据作为参数传递给回调函数；

完整代码演示如下：

import React from 'react'

import ReactDOM from 'react-dom'

import './index.css'

/*

props

*/

// 父组件

class Parent extends React.Component {

state = {

parentMsg: ''

}

// 提供回调函数，用来接收数据

getChildMsg = data => {

console.log('接收到子组件中传递过来的数据：', data)

this.setState({

parentMsg: data

})

}

render() {

return (

)

}

}

// 子组件

class Child extends React.Component {

state = {

msg: '刷抖音'

}

handleClick = () => {

// 子组件调用父组件中传递过来的回调函数

this.props.getMsg(this.state.msg)

}

render() {

return (

)

}

}

ReactDOM.render(, document.getElementById('root'))

3.3 兄弟组件

• 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态；

• 思想：状态提升；

• 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法；

• 要通讯的子组件只需要通过props接收状态或操作状态的方法；

完整代码演示如下：

import React from 'react'

import ReactDOM from 'react-dom'

/*

兄弟组件通讯

*/

// 父组件

class Counter extends React.Component {

// 提供共享状态

state = {

count: 0

}

// 提供修改状态的方法

onIncrement = () => {

this.setState({

count: this.state.count + 1

})

}

render() {

return (

)

}

}

const Child1 = props => {

return

计数器：{props.count}

}

const Child2 = props => {

return <button onClick={() => props.onIncrement()}>+1

}

ReactDOM.render(, document.getElementById('root'))

---

（4）Context

• 如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递；

• 作用： 跨组件传递数据（比如：主题、语言等）；

1️⃣ 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件；

const { Provider, Consumer } = React.createContext()

2️⃣ 使用 Provider 组件作为父节点；

3️⃣ 设置 value 属性，表示要传递的数据；

4️⃣ 调用 Consumer 组件接收数据；

{data => data参数表示接收到的数据 -- {data}}

😆小结😆：

1. 如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯；

2. Context提供了两个组件：Provider 和 Consumer；

3. Provider组件：用来提供数据；

4. Consumer组件：用来消费数据；

---

（5）props 深入

5.1 children 属性

• children属性： 表示组件标签的子节点，当组件标签有子节点时，props就会有该属性

• children属性与普通的props一样，值可以使任意值（文本、react元素、组件、甚至是函数）

完整代码演示如下：

import React from 'react'

import ReactDOM from 'react-dom'

/*

children 属性

*/

const App = props => {

console.log(props)

props.children()

return (

)

}

ReactDOM.render(

{() => console.log('这是一个函数子节点')},

document.getElementById('root')

)

// children为：jsx或组件

// const Test = () => 我是button组件

// const App = props => {

// console.log(props)

// return (

//

// )

// }

// ReactDOM.render(

//

// {/*

我是子节点，是一个p标签

*/}

//

// ,

// document.getElementById('root')

// )

// children为：文本节点

// const App = props => {

// console.log(props)

// return (

//

// )

// }

// ReactDOM.render(我是子节点, document.getElementById('root'))

5.2 props 校验

• props 校验：允许在创建组件的时候，就指定 props 的类型、格式等；

• 作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮；

5.2.1 使用步骤

1. 安装包 prop-types （yarn add prop-types / npm i props-types）

2. 导入 prop-types 包

3. 使用组件名.propTypes = {} 来给组件的props添加校验规则

4. 校验规则通过 PropTypes 对象来指定

代码演示如下：

import PropTypes from 'prop-types'

function App(props) {

return (

Hi, {props.colors}

)

}

App.propTypes = {

// 约定colors属性为array类型

// 如果类型不对，则报出明确错误，便于分析错误原因

colors: PropTypes.array

}

5.2.2 约束规则

1. 常见类型：array、bool、func、number、object、string

2. React元素类型：element

3. 必填项：isRequired

4. 特定结构的对象：shape({ })

完整代码演示如下：

import React from 'react'

import ReactDOM from 'react-dom'

/*

props校验

*/

import PropTypes from 'prop-types'

const App = props => {

return (

)

}

// 添加props校验

// 属性 a 的类型： 数值（number）

// 属性 fn 的类型： 函数（func）并且为必填项

// 属性 tag 的类型： React元素（element）

// 属性 filter 的类型： 对象（{area: '上海', price: 1999}）

App.propTypes = {

a: PropTypes.number,

fn: PropTypes.func.isRequired,

tag: PropTypes.element,

filter: PropTypes.shape({

area: PropTypes.string,

price: PropTypes.number

})

}

ReactDOM.render(<App fn={() => { }} />, document.getElementById('root'))

---

（6）组件的生命周期

6.1 组件的生命周期概述

• 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等；

• 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程；

• 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数；

• 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机；

• 只有 类组件 才有生命周期；

6.2 生命周期的三个阶段

6.2.1 创建时（挂载阶段）

• 执行时机：组件创建时（页面加载时）

• 执行顺序：constructor() → render() → componentDidMount()

| 钩子函数 | 触发时机 | 作用 |

| --- | --- | --- |

| constructor | 创建组件时，最先执行 | 1. 初始化state

2. 为事件处理程序绑定this |

| render | 每次组件渲染都会触发 | 渲染UI（注意：不能调用setState() ） |

| componentDidMount | 组件挂载（完成DOM渲染）后 | 1. 发送网络请求

2. DOM操作 |

6.2.2 更新时（更新阶段）

• 执行时机：1.setState()、 2.forceUpdate()、 3.组件接收到新的props

• 说明：以上三者任意一种变化，组件就会重新渲染

• 执行顺序：render() → componentDidUpdate()

| 钩子函数 | 触发时机 | 作用 |

| --- | --- | --- |

| render | 每次组件渲染都会触发 | 渲染UI（与 挂载阶段 是同一个render） |

| componentDidUpdate | 组件更新（完成DOM渲染）后 | 1 发送网络请求

2 DOM操作

注意：如果要setState() 必须放在一个if条件中 |

6.2.3 卸载时（卸载阶段）

• 执行时机：组件从页面中消失

| 钩子函数 | 触发时机 | 作用 |

| --- | --- | --- |

| componentWillUnmount | 组件卸载（从页面中消失） | 执行清理工作（比如：清理定时器等） |

6.3 不常用钩子函数介绍

新版完整生命周期钩子函数（了解即可）:

😆**getDerivedStateFromProps()**

• getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容

• 不管原因是什么，都会在_每次_渲染前触发此方法

😆 shouldComponentUpdate()

• 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染

• 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true

😆 getSnapshotBeforeUpdate()

• getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

• 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等

---

（7）高阶组件

7.1 React组件复用概述

思考：如果两个组件中的部分功能相似或相同，该如何处理？

• 处理方式：复用相似的功能（联想函数封装）

• 复用什么？1. state 2. 操作state的方法 （组件状态逻辑 ）

• 两种方式：1. render props模式 2. 高阶组件（HOC）

• 注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）

7.2 高阶组件

• 高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件；

• 高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件 WrappedComponent；

const EnhancedComponent = withHOC(WrappedComponent)

// 高阶组件内部创建的类组件：

class Mouse extends React.Component {

render() {

return <WrappedComponent {...this.state} />

}

}

7.2.1 使用步骤

1️⃣ 创建一个函数，名称约定以 with 开头

function withMouse() {}

2️⃣ 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）

function withMouse(WrappedComponent) {}

3️⃣ 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回

function withMouse(WrappedComponent) {

class Mouse extends React.Component {}

return Mouse

}

4️⃣ 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件

// Mouse组件的render方法中：

return <WrappedComponent {...this.state} />

5️⃣ 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

// 创建组件

const MousePosition = withMouse(Position)

// 渲染组件

7.2.2 设置displayName

• 使用高阶组件存在的问题：得到两个组件的名称相同

• 原因：默认情况下，React使用组件名称作为displayName 总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

开源分享：docs.qq.com/doc/DSmRnRG…