2024年前端最全【React入门必备知识篇03】--- React 组件进阶(1)，史上超级详细

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

)

}

}

ReactDOM.render(

<Hello

name=“rose”

age={19}

colors={[‘red’, ‘green’, ‘blue’]}

fn={() => console.log(‘这是一个函数’)}

tag={

这是一个p标签

}

/>,

document.getElementById(‘root’)

)

---

（3）组件通讯的三种方式

3.1 父组件传递数据给子组件

• 父组件提供要传递的state数据；

• 给子组件标签添加属性，值为state中的数据；

• 子组件中通过props接收父组件中传递的数据；

完整代码演示如下：

import React from ‘react’

import ReactDOM from ‘react-dom’

import ‘./index.css’

/*

props

*/

// 父组件

class Parent extends React.Component {

state = {

lastName: ‘王’

}

render() {

return (

父组件：

)

}

}

// 子组件

const Child = props => {

console.log(‘子组件：’, props)

return (

子组件，接收到父组件的数据：{props.name}

)

}

ReactDOM.render(, document.getElementById(‘root’))

3.2 子组件传递数据给父组件

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

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

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

• 子组件通过 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 (

父组件：{this.state.parentMsg}

)

}

}

// 子组件

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 (

组件标签的子节点：

{/* {props.children} */}

)

}

ReactDOM.render(

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

document.getElementById(‘root’)

)

// children为：jsx或组件

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

// const App = props => {

// console.log(props)

// return (

//

//

组件标签的子节点：

// {props.children}

//

// )

// }

// ReactDOM.render(

//

// {/*

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

*/}

//

// ,

// document.getElementById(‘root’)

// )

// children为：文本节点

// const App = props => {

// console.log(props)

// return (

//

//

组件标签的子节点：

// {props.children}

//

// )

// }

// 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校验：

)

}

// 添加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 组件的生命周期概述

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

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

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

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

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

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader