创建好一个react应用程序后，我们就需要创建组件并且使用组件，其实react开发本身就是创建组件、使用组件的过程。下面来看一下示例： 上图中的html页面上总共有三个组件：根组件、Home组件和列表组件，下面就具体聊聊该怎么创建这些组件以及如何使用它们。创建组件：1 我们修改一下默认创建的react应用程序的代码结构，在src目录下创建相应的文件夹及文件，方...
原创
2021-08-26 15:16:06
297阅读
创建好一个react应用程序后，我们就需要创建组件并且使用组件，其实react开发本身就是创建组件、使用组件的过程。下面来看一下示例： 上图中的html页面上总共有三个组件：根组件、Home组件和列表组件，下面就具体聊聊该怎么创建这些组件以及如何使用它们。创建组件：1 我们修改一下默认创建的react应用程序的代码结构，在src目录下创建相应的文件夹及文件，方...
原创
2022-02-21 17:53:25
217阅读
我还是一个react的初学者，一直写vue，在学的过程中突然想起react能不能动态加载，结果好像都要自己实现，vue的路由可以用()=>import(url), react 好像没有，
转载
2021-07-15 15:21:00
1921阅读
2评论
类组件：使用ES6的class创建组件约定1：类名称必须以大写字母开头约定2：类组件应该
原创
2022-11-18 00:07:25
46阅读
需求描述由于我所在的业务是资讯内容类业务，因而在业务中会经常碰到如下场景：有一个内容列表，列表中需要按照一定的规则插入广告。除了获取广告数据，广告展现和点击后需要有打点上报逻辑。正常来说我们会这么写：import React from 'react';export default class extends React.Component { state = {newsData: [], adD
原创
2021-05-18 17:44:26
1413阅读
一.组件 React可以将模块拆分为多个组件，用分而治之的思想，让各个组件专注于实现某个功能。在设计上，符合高内聚、低耦合原则。高内聚是组件内部实现自己的逻辑，像展示页面的jsx，定义行为的js，甚至是样式css。低耦合是，各个组件相互依赖关系要弱化，每个组件尽量独立。 二.组件交互 定义一个Hom ...
转载
2021-10-08 11:22:00
150阅读
2评论
componentDidMount()是React类组件生命周期中的一个重要方法，它在组件被挂载到DOM后立即自动调用。此时组件已经完成渲染并插入到DOM中，可以安全地进行DOM操作、网络请求或设置订阅。主要作用与使用场景网络请求：在组件挂载后从服务器获取数据DOM操作：对DOM元素进行初始化设置事件订阅：设置事件监听器或WebSocket连接初始化动画：启动组件相关的动画效果类组件操作代码imp
重新设计 React 组件库
诚身
7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天，让我们再次回到软件工程界一个永恒问题的探讨上来，那就是如何提升一个开发团队的开发效率？ 从宏观的角度来讲，其实只有良好的抽象才能真正提高一个团队的开发效率，而囿于不同产品所面临的不同业务需求，当我们抽丝剥茧般地将一个个前端工程抽象到最后一层，那么剩下的其实就只有
转载
2024-08-26 10:07:51
61阅读
react的目的是将前端页面组件化，用状态机的思维模式去控制组件。组件和组件之间肯定是有关系得，通过合理得组件设计，给每一个组件划定合适得边界，可以有效降低当我们对页面进行重构时对其他组件之间得影响。同时也可以使我们得代码更加美观。1、高耦合低内聚。高耦合：将功能联系紧密得部分放到一个容器组件内对外暴漏出index.js，目录结构如下:├── components│ └── App└── inde
转载
2023-07-14 13:40:39
115阅读
使用js中函数函数创建组件： 函数组件守则一：函数名称必须以大写字母开头 （react据此> <d
原创
2022-11-18 00:01:42
101阅读
一、Ant Design of React ://ant.design/docs/react/introduce 二、建立webpack工程 webpack+react demo下载 项目的启动，参考 三、简单配置 1.工程下载下来之后，在src目录下新建目录“table”，新建app.js
转载
2016-07-20 21:21:00
663阅读
2评论
React处理表单的几种主要方式，比如受控组件、非受控组件，以及一些高级用法比如表单验证和处理多个输入。
HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。
在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React
在React中，组件卸载（Unmounting）阶段的生命周期方法。React中组件卸载阶段的正确方法是：1. 类组件中的componentWillUnmount在类组件中，componentWillUnmount方法会在组件卸载前被调用，通常用于清理操作（如移除事件监听器、清除定时器等）。使用方法class ExampleComponent extends React.Component {
IOC（控制反转）是一种编程思想，可以解耦组件，提高组件复用性。本文包括两部分：介绍IOC概念IOC在React中的应用IOC是什么让我们来看个例子：我们有个士兵的类，在类内部会实例化一种武器：class Soldier { constructor() { // 这里我们实例化一把步枪 this.weapon = new Rifle(); } a
转载
2022-11-11 21:09:00
106阅读
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。高阶组件只提供逻辑代码
原创
2022-07-06 16:46:21
138阅读
React 组件 API 涉及多个重要的方面，包括生命周期方法、状态管理、属性传递和事件处理。
以下是 React 组件 API 的详细说明：
生命周期方法
React 组件的生命周期方法分为三个主要阶段：挂载、更新和卸载，详细说明参见：React 组件的生命周期 。
挂载阶段
constructor(props): 构造函数，用于初始化状态或绑定方法。
static getDerivedStat
