什么是模块?模块是对JS文件的一个拆分,使得一个复杂的JS文件被拆分为拥有很多不同功能的模块。什么是组件?组件是用来实现局部功能效果的所有资源的一个集合。举个例子:下面的这个就是一个组件(将header的全部资源进行集中)什么是模块化?当应用的js文件都以模块来编写的,这个应用就是一个模块化的应用。什么是组件化?当应用是以多组件的方式实现,这个应用就是一个组件化的应用。...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-02-25 14:47:10
                            
                                63阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石。在React的组件构成中,按照状态来分可以分为有状态组件和无状态组件。            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2020-02-17 15:28:33
                            
                                776阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            一、不可控组件1.简介2.代码 1 2 3 4 5 琛ㄥ崟璇﹁В 6 7 8 9 10 36 37 二、可控组件1.简介2.代码 1 2 3 4 5 表单详解 6 7 8 9 10 36 37...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-12-19 00:00:00
                            
                                150阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            在react中使用input时,随着用户的输入,对value进行了更改,其后分为两种情况: 一 非受控组件 input中的value值并没有和react中state中的数据进行绑定,这个时候可以通过ref对value值进行读取 随用随取 class Demo extends React.Compon ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-09-10 14:49:00
                            
                                146阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            非受控组件:现用现取 // 创建组件 class Login extends React.Component{ handleSubmit = (event) => { event.preventDefault() alert(`用户名是${this.username.value},密码是${this ...            
                
                    
                        
                                                            
                                                                        
                                                                                        翻译
                                                                                    
                            2021-10-17 10:50:00
                            
                                421阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            Css Module (推荐) React 的脚手架已经内置了 css modules 的配置: .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等; 在以前我们的文件是这样的 index.css 如果使用了 CSS            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-05-10 12:12:00
                            
                                511阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            什么是React组件?
React组件是React应用的基本构建单元,它们是可复用的、独立的代码片段,用于构建用户界面。组件可以看作是自定义的HTML元素,它们接收输入(称为props)并返回描述UI应该是什么样子的React元素。组件化开发使得我们可以将复杂的用户界面拆分成更小、更易于管理的部分。
React组件本质上是函数或类,它们描述了UI应该如何根据不同的输入进行渲染。这种声明式的编程方式            
                
         
            
            
            
            一、受控组件 在 react 中,表单元素通过组件的 state 属性来自己维护 state,并根据用户输入调用setState()来进行数据更新,使 react 的 state 成为“唯一数据源”,被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。 class NameForm            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-09-22 19:42:00
                            
                                141阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            不要在函数组件主体或 class 组件 render 方法中设置 ref,这可能导致 ref 不一致。输入的值通过状态state来控制,onChange 也            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-09-30 19:23:07
                            
                                106阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            react的目的是将前端页面组件化,用状态机的思维模式去控制组件。组件和组件之间肯定是有关系得,通过合理得组件设计,给每一个组件划定合适得边界,可以有效降低当我们对页面进行重构时对其他组件之间得影响。同时也可以使我们得代码更加美观。1、高耦合低内聚。高耦合:将功能联系紧密得部分放到一个容器组件内对外暴漏出index.js,目录结构如下:├── components│ └── App└── inde            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-14 13:40:39
                            
                                117阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            重新设计 React 组件库
诚身
7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天,让我们再次回到软件工程界一个永恒问题的探讨上来,那就是如何提升一个开发团队的开发效率? 从宏观的角度来讲,其实只有良好的抽象才能真正提高一个团队的开发效率,而囿于不同产品所面临的不同业务需求,当我们抽丝剥茧般地将一个个前端工程抽象到最后一层,那么剩下的其实就只有            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-08-26 10:07:51
                            
                                61阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值。具体编辑页面中文本框相关的代码如下:        ... //render方法上面的内容            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2017-04-28 15:58:58
                            
                                947阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            受控组件与非受控组件 受控组件 在HTML中,标签、、的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其 ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-28 12:01:00
                            
                                167阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            前言
我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活,vue是一种死板的感觉。为什么有这种感觉呢,react有一种很强烈的欲望,all in js只要能够用够js写的,就全用js写,所以一切都很灵活,jsx很酷,高阶组件牛逼,es7的装饰器也是可以玩的飞起。反观vue,搞的.vue单文件还是尽量保留原来前端开发的模式,留下了            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-06-30 14:31:28
                            
                                204阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            前言我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活,vue是一种死板的感觉。为什么有这种感觉呢,react有一种很强烈的欲望,all in js只要能够用够js写的,就全用js写,所以一切都很灵活,jsx很酷,高阶组件牛逼,es7            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2022-03-29 13:49:13
                            
                                128阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            实例 <div id="example"></div> <script type="text/babel"> function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage /> ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-06-23 00:49:00
                            
                                222阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            传递props import React, {Component, VFC, ReactNode } from 'react'; const Hello: VFC<{ body: ReactNode }> = ({ body }) => { return <div>{body}</div>; };            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-08-27 16:35:00
                            
                                717阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/react.js"></script> <script src="js/react-dom.js"></scrip            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2017-08-09 09:16:00
                            
                                159阅读