Web学习笔记-React（组合Components）

news/2024/12/1 0:30:06/

笔记内容转载自 AcWing 的 Web 应用课讲义，课程链接：AcWing Web 应用课。

CONTENTS

    • 1. 创建父组件
    • 2. 从上往下传递数据
    • 3. 传递子节点
    • 4. 从下往上调用函数
    • 5. 兄弟组件间传递消息
    • 6. 无状态函数组件
    • 7. 组件的生命周期

本节内容是组件与组件之间的组合，例如用不同组件构成 DOM 树，以及给不同的组件传递数据或者调用不同组件的方法，还有不同组件的生命周期。

1. 创建父组件

我们还是继续在之前的 Box 组件上进行操作，首先创建一个 Boxes 组件，其中包含一系列 Box 组件。

在 components 目录中创建 boxes.jsx：

import React, { Component } from 'react';class Boxes extends Component {state = {  } render() { return (<h1>Boxes</h1>);}
}export default Boxes;

然后修改一下 index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import Boxes from './components/boxes';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Boxes />);

现在我们在 Boxes 中加入多个 Box，当一个组件中包含多个并列元素的时候，需要用一个标签将他们括起来，可以使用 React 中的一个虚拟标签 <React.Fragment>：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {state = {  } render() { return (<React.Fragment><Box /><Box /><Box /></React.Fragment>);}
}export default Boxes;

为了方便也可以用一个数组来表示，将 Box 的信息存到 state 里，由于 React 组件如果有若干个儿子那么他们的 key 需要不一样，因此还需要存一个唯一的 id：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 0},{id: 3, x: 0},{id: 4, x: 0},]} render() { return (<React.Fragment>{this.state.boxes.map(box => (<Box key={box.id} />))}</React.Fragment>);}
}export default Boxes;

2. 从上往下传递数据

通过 this.props 属性可以从上到下传递数据。例如我们在 Boxes 中传递 x：

...class Boxes extends Component {state = { ...} render() { return (<React.Fragment>{this.state.boxes.map(box => (<Box key={box.id} x={box.x} name='yyj' />))}</React.Fragment>);}
}export default Boxes;

可以在 Box 中输出信息 console.log(this.props); 查看内容：

在这里插入图片描述

修改 Box 中的 x：

import React, { Component } from 'react';  // 输入imrc即可补全class Box extends Component {  // 输入cc即可补全state = { x: this.props.x,};...
}export default Box;

3. 传递子节点

可以将标签写成 <Box></Box> 的形式，然后在标签中添加子标签：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 0},{id: 3, x: 0},{id: 4, x: 0},]} render() { return (<React.Fragment>{this.state.boxes.map(box => (<Box key={box.id} x={box.x} name='yyj'><h1>Title</h1></Box>))}</React.Fragment>);}
}export default Boxes;

这样 this.props 中会多一个属性 children，可以使用 [] 单独访问某个子标签。我们可以将这个传过来的值定义在任何地方，例如可以放到每个 Box 组件的最上方：

import React, { Component } from 'react';  // 输入imrc即可补全class Box extends Component {  // 输入cc即可补全state = { x: this.props.x,};handleClickLeft = (step) => {this.setState({x: this.state.x - step});}handleClickRight = (step) => {this.setState({x: this.state.x + step});}handleClickLeftTmp = () => {this.handleClickLeft(10);}render() {  // Component类的函数，用来返回当前组件最后渲染的HTML结构是什么console.log(this.props);return (// HTML标签中可以使用{}写一个表达式<React.Fragment>{this.props.children}<div style={this.getStyles()}>{this.state.x}</div><button onClick={this.handleClickLeftTmp} className='btn btn-primary m-2'>Left</button><button onClick={() => this.handleClickRight(10)} className='btn btn-success m-2'>Right</button></React.Fragment>);}getStyles() {...}
}export default Box;

4. 从下往上调用函数

父元素可以通过 this.props 向子元素传递信息，子元素也可以使用函数向父元素传递信息。假设我们需要实现通过点击删除按钮删除某个 Box，其信息保存在 Boxes 的 state 中，但是我们点击触发事件是在 Box 中（注意：每个组件的 this.state 只能在组件内部修改，不能在其他组件内修改）。

我们可以在父元素中定义好函数，然后将函数传给子元素：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 0},{id: 3, x: 0},{id: 4, x: 0},]}handleDelete = (boxId) => {// 遍历一遍state.boxes，将box.id不为传入的参数boxId的数据保留下来const res = this.state.boxes.filter(box => box.id !== boxId);this.setState({boxes: res});}render() { return (<React.Fragment>{this.state.boxes.map(box => (<Box key={box.id} id={box.id} x={box.x} name='yyj'onDelete={this.handleDelete}/>))}</React.Fragment>);}
}export default Boxes;

这样子元素就能调用函数对父元素进行操作了：

import React, { Component } from 'react';  // 输入imrc即可补全class Box extends Component {  // 输入cc即可补全...render() {  // Component类的函数，用来返回当前组件最后渲染的HTML结构是什么console.log(this.props);return (// HTML标签中可以使用{}写一个表达式<React.Fragment>...<button onClick={() => this.props.onDelete(this.props.id)} className='btn btn-danger m-2'>Delete</button></React.Fragment>);}getStyles() {...}
}export default Box;

现在我们在 Boxes 中实现一个 Reset 按钮实现清空所有 Box 的 x：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 1},{id: 3, x: 2},{id: 4, x: 3},]}handleDelete = (boxId) => {...}handleReset = () => {const res = this.state.boxes.map(box => {return {id: box.id,x: 0,}});this.setState({boxes: res});}render() {console.log(this.state.boxes);return (<React.Fragment><buttononClick={this.handleReset}style={{marginBottom: '15px'}}className='btn btn-info'>Reset</button>{this.state.boxes.map(box => (<Box key={box.id} id={box.id} x={box.x} name='yyj'onDelete={this.handleDelete}/>))}</React.Fragment>);}
}export default Boxes;

在控制台观察时可以发现点击 Reset 按钮后 x 确实置零了，但是 Box 显示出来的 x 并没有改变，这是因为 state 值不能在外部修改，因此我们可以将 Box 中的 state 删掉，需要在该组件中渲染外面的 state 的值。

每个维护的数据仅能保存在一个 this.state 中，不要直接修改 this.state 的值，因为 setState 函数可能会将修改覆盖掉。

修改 Boxes，将之前 Box 中操作 state 的函数转移过来：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 1},{id: 3, x: 2},{id: 4, x: 3},]}handleDelete = (boxId) => {// 遍历一遍state.boxes，将box.id不为传入的参数boxId的数据保留下来const res = this.state.boxes.filter(box => box.id !== boxId);this.setState({boxes: res});}handleReset = () => {const res = this.state.boxes.map(box => {return {id: box.id,x: 0,}});this.setState({boxes: res});}// 需要知道修改的是哪个boxhandleClickLeft = (box) => {const boxes = [...this.state.boxes];  // 浅拷贝一份const k = boxes.indexOf(box);  // 传入的box是引用，找出其在boxes中的下标kboxes[k] = {...boxes[k]};  // 再clone一遍，相当于创建新的state，深拷贝boxes[k].x--;this.setState({boxes: boxes});}handleClickRight = (box) => {const boxes = [...this.state.boxes];const k = boxes.indexOf(box);boxes[k] = {...boxes[k]};boxes[k].x++;this.setState({boxes: boxes});}render() {return (<React.Fragment><buttononClick={this.handleReset}style={{marginBottom: '15px'}}className='btn btn-info'>Reset</button>{this.state.boxes.map(box => (<Box key={box.id} id={box.id} x={box.x} name='yyj'onDelete={this.handleDelete}onClickLeft={() => this.handleClickLeft(box)}onClickRight={() => this.handleClickRight(box)}/>))}</React.Fragment>);}
}export default Boxes;

然后修改 Box，将 this.state 替换成父组件传递过来的 props：

import React, { Component } from 'react';  // 输入imrc即可补全class Box extends Component {  // 输入cc即可补全render() {  // Component类的函数，用来返回当前组件最后渲染的HTML结构是什么return (// HTML标签中可以使用{}写一个表达式<React.Fragment><div style={this.getStyles()}>{this.props.x}</div><button onClick={this.props.onClickLeft} className='btn btn-primary m-2'>Left</button><button onClick={this.props.onClickRight} className='btn btn-success m-2'>Right</button><button onClick={() => this.props.onDelete(this.props.id)} className='btn btn-danger m-2'>Delete</button></React.Fragment>);}getStyles() {let styles = {width: '50px',height: '50px',backgroundColor: 'lightblue',color: 'white',textAlign: 'center',lineHeight: '50px',borderRadius: '5px',position: 'relative',left: this.props.x};if (this.props.x === 0) {styles.backgroundColor = 'orange';}return styles;}
}export default Box;

5. 兄弟组件间传递消息

如果组件的结构关系更为复杂，那么就需要将多个组件共用的数据存放到最近公共祖先的 this.state 中。

我们创建一个 App 组件，其包含两个子组件 NavBar（导航栏）和 Boxes，这两个组件为兄弟组件。

首先是 navbar.jsx：

import React, { Component } from 'react';class NavBar extends Component {state = {  } render() { return (<nav className="navbar bg-body-tertiary"><div className="container-fluid"><a className="navbar-brand" href="/">Navbar</a></div></nav>);}
}export default NavBar;

然后是 app.jsx：

import React, { Component } from 'react';
import NavBar from './navbar';
import Boxes from './boxes';class App extends Component {state = {  } render() { return (<React.Fragment><div className='container'><NavBar /><Boxes /></div></React.Fragment>);}
}export default App;

现在假设我们要在 NavBar 中存放 Boxes 中有几个 Box 的信息，那么只能把信息放到这两个组件的最近公共祖先 App 中。

我们将 Boxes 中与 state 有关的内容都移到 App 中：

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {render() {return (<React.Fragment><buttononClick={this.props.onReset}style={{marginBottom: '15px'}}className='btn btn-info'>Reset</button>{this.props.boxes.map(box => (<Box key={box.id} id={box.id} x={box.x} name='yyj'onDelete={this.props.onDelete}onClickLeft={() => this.props.onClickLeft(box)}onClickRight={() => this.props.onClickRight(box)}/>))}</React.Fragment>);}
}export default Boxes;

移动后的 App 如下：

import React, { Component } from 'react';
import NavBar from './navbar';
import Boxes from './boxes';class App extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 1},{id: 3, x: 2},{id: 4, x: 3},]}handleDelete = (boxId) => {// 遍历一遍state.boxes，将box.id不为传入的参数boxId的数据保留下来const res = this.state.boxes.filter(box => box.id !== boxId);this.setState({boxes: res});}handleReset = () => {const res = this.state.boxes.map(box => {return {id: box.id,x: 0,}});this.setState({boxes: res});}// 需要知道修改的是哪个boxhandleClickLeft = (box) => {const boxes = [...this.state.boxes];  // 浅拷贝一份const k = boxes.indexOf(box);  // 传入的box是引用，找出其在boxes中的下标kboxes[k] = {...boxes[k]};  // 再clone一遍，相当于创建新的state，深拷贝boxes[k].x--;this.setState({boxes: boxes});}handleClickRight = (box) => {const boxes = [...this.state.boxes];const k = boxes.indexOf(box);boxes[k] = {...boxes[k]};boxes[k].x++;this.setState({boxes: boxes});}render() { return (<React.Fragment><div className='container'><NavBarboxesCount={this.state.boxes.length}  // 将长度传给NavBar/><Boxesboxes={this.state.boxes}onReset={this.handleReset}onClickLeft={this.handleClickLeft}onClickRight={this.handleClickRight}onDelete={this.handleDelete}/></div></React.Fragment>);}
}export default App;

现在即可在 NavBar 中读取 Boxes 的长度信息了：

import React, { Component } from 'react';class NavBar extends Component {state = {  } render() { return (<nav className="navbar bg-body-tertiary"><div className="container-fluid"><a className="navbar-brand" href="/">Navbar <span>Boxes Count: {this.props.boxesCount}</span></a></div></nav>);}
}export default NavBar;

6. 无状态函数组件

当组件中没有用到 this.state 时，可以简写为无状态的函数组件。类相对于函数最大的好处就是可以很方便地维护状态（局部变量）。

无状态函数组件（Stateless Funtion Component），输入 sfc 即可自动补全出来。函数组件相当于只有 render 函数的类组件。注意：函数的传入参数为 props 对象：

import React from 'react';const NavBar = (props) => {return (<nav className="navbar bg-body-tertiary"><div className="container-fluid"><a className="navbar-brand" href="/">Navbar <span>Boxes Count: {props.boxesCount}</span></a></div></nav>);
}export default NavBar;

7. 组件的生命周期

  • Mount 周期（挂载，表示对象被创建出来），执行顺序（按顺序执行三个函数）：constructor() -> render() -> componentDidMount()
  • Update 周期（修改，例如点击按钮），执行顺序：render() -> componentDidUpdate()
  • Unmount 周期（删除），执行顺序：componentWillUnmount()

其中，componentDidUpdate 函数有两个参数，分别表示更新前的 props 和 state：

import React, { Component } from 'react';
import NavBar from './navbar';
import Boxes from './boxes';class App extends Component {state = { boxes: [{id: 1, x: 0},{id: 2, x: 1},{id: 3, x: 2},{id: 4, x: 3},]}componentDidUpdate(prevProps, prevState) {console.log('App - Update');console.log(prevProps, this.props);console.log(prevState, this.state);}...render() {console.log('App - Render');return (...);}
}export default App;

输出的 state 内容如下：

{boxes: Array(4)}boxes: Array(4)0: {id: 1, x: 0}1: {id: 2, x: 1}2: {id: 3, x: 2}3: {id: 4, x: 3}length: 4[[Prototype]]: Array(0)[[Prototype]]: Object{boxes: Array(4)}boxes: Array(4)0: {id: 1, x: 1}  (此处有区别)1: {id: 2, x: 1}2: {id: 3, x: 2}3: {id: 4, x: 3}length: 4[[Prototype]]: Array(0)[[Prototype]]: Object

http://www.ppmy.cn/news/1107324.html

相关文章

ArGIS Engine专题（11）之GP模型集成Python脚本实现要素服务自动发布

ArGIS Engine专题（11）之GP模型集成Python脚本实现要素服务自动发布

前一篇文章我们介绍了如何构建GP模型实现相邻要素自动聚合合并，这篇文章将介绍如何在gp模型中集成arcpython脚本，实现要素服务的自动化发布，从而减轻人工发布的时间成本，提高工作效率，使业务流程一键自动化管理成为可能。 一、软件环境 本文采用了以下软件环境测试完成：…
阅读更多...
【Linux-Day10-信号量，共享内存，消息队列】

【Linux-Day10-信号量，共享内存，消息队列】

信号量 信号量描述 信号量是一个特殊的变量&#xff0c;一般取正数值。它的值代表允许访问的资源数目&#xff0c;获取资源 时&#xff0c;需要对信号量的值进行原子减一&#xff0c;该操作被称为 P 操作。 当信号量值为 0 时&#xff0c;代表没有资源可用&#xff0c;P 操作…
阅读更多...
大功率光伏应用不同多电平变换器拓扑的比较研究(Simulink)

大功率光伏应用不同多电平变换器拓扑的比较研究(Simulink)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
结构型模式-外观模式

结构型模式-外观模式

隐藏系统的复杂性&#xff0c;并向客户端提供了一个客户端可以访问系统的接口。这种类型的设计模式属于结构型模式&#xff0c;它向现有的系统添加一个接口&#xff0c;来隐藏系统的复杂性。 这种模式涉及到一个单一的类&#xff0c;该类提供了客户端请求的简化方法和对现有系…
阅读更多...
Python网络爬虫的实践与应用

Python网络爬虫的实践与应用

Python网络爬虫是一种自动化程序&#xff0c;可以自动遍历互联网上的网页并提取有用的信息。网络爬虫可以用于各种目的&#xff0c;例如收集数据、搜索引擎优化、市场研究等。在这篇文章中&#xff0c;我们将介绍Python网络爬虫的步骤。 确定目标 首先&#xff0c;我们需要确定…
阅读更多...
如何判断一篇论文有没有被SCI收录？

如何判断一篇论文有没有被SCI收录？

打开 Web of Science 网站设置 SCI 筛选条件&#xff08;因为 WoS 收录的不只是 SCI&#xff09; 3. 输入论文题目&#xff0c;点击搜索
阅读更多...
[Python从零到壹] 七十一.图像识别及经典案例篇之图像特效（滤镜和均衡化特效）

[Python从零到壹] 七十一.图像识别及经典案例篇之图像特效（滤镜和均衡化特效）

九月太忙，还是写一篇吧！ 欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足…
阅读更多...
glTF和GLB有什么区别？

glTF和GLB有什么区别？

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 自1960年代末开始以来&#xff0c;3D扫描突飞猛进&#xff0c;彻底改变了我们创建真实世界物体和环境的数字模型的方式。虽然很容易考虑它在建筑、工程和游戏等领域的使用&#xff0c;但实际应用要广泛得多。2023年&…
阅读更多...
最新文章

Copyright @ 2022~2023