ref 的功能,在 react 当中。我们写了一个组件,在这个时候,我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点,有时候我们会希望有这样的需求,就是我们要获取某个 dom 节点,或者是某个子组件的实例。去对他进行一些手动的操作,而不仅仅是 props 更新这            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-26 20:24:00
                            
                                357阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            children是什么意思呢?就是我们拿到组件内部的props的时候,有props.children这么一个属性,大部分情况下,我们直接把 props.children 渲染到 JSX 里面就可以了。很少有情况我们需要去操作这个 children 。 但是如果一旦你需要去操作这个 children             
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-30 17:32:00
                            
                                162阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            React中最重要的就是组件,写的更多的组件都是继承至 React.Component 。大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能。他帮助我们去运行了这个 render function 。然后最终把我们写在里面的 dom 标签或者子组件之类的            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-22 20:41:00
                            
                                230阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            react源码解析3.react源码架构视频讲解(高效学习):进入学习(https://xiaochen1024.com/series/60b1b600712e370039088e24/60b1b636712e370039088e25)往期文章:1.开篇介绍和面试题(https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-12-13 09:30:03
                            
                                380阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            r这一章的目的是让我们认识一下react源码架构和各个模块。在真正的代码学习之前,我们需要在大脑中有一个react源码的地图,知道react渲染的大致流程和            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-04-12 08:43:56
                            
                                231阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            我们先初步了解下 hooks,使用 useState 和 useEffect。 /** * 必须要react和react-dom 16.7以上 */ import React, { useState, useEffect } from 'react' export default () => { c            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-29 19:44:00
                            
                                238阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            addons:工具方法插件:PureRenderMixin、CSSTransitionGrouo、Fragment、LinkedStateMixin。isomorphic:包含一系列同构方法。shared:公用方法和常用方法。test:测试方法。core/tests:边界错误的测试用例。renderers:React的核心代码,包含大部分功能实现,因此进行单独分析。dom:包含client,ser            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-12-14 11:53:26
                            
                                31阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            指导链接:React 原理解析1. createElementJSX 代码会被 Babel 编译为 React.createElement:<div id="testId">  <div id="testId2">222</div>  <div id="testId3">333</div></div>// 解析成以下样子React.createElement(  "div", // -> type  {            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-11-30 15:56:29
                            
                                74阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            React 采用 monorepo 的管理方式。仓库中包含多个独立的包,以便于更改可以一起联调码的            
                
                    
                        
                                                            
                                                                        
                                                                                        翻译
                                                                                    
                            2022-11-23 00:27:06
                            
                                60阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            源码学习记录1. React Api2. React中的创建更新3. React调度过程(Fiber Scheduler)4. 组件如何进行更新5. 组件更新完成后进行的操作1. 虚拟Dom对比2. 渲染中出现错误的处理过程6. 真实Dom更新7. 各种功能的实现(content,ref,hydrate...)8. Suspense (超前体验)9. Hooks1. React ApiFibe...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-11-30 16:05:00
                            
                                137阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            我们知道在react当中,组件与组件的沟通是通过props,父组件通过props给子组件传递一些属性,父组件可以传递一些回调函数给子组件,让子组件在某些特定的时候,可以调用父组件的一些特性。 但是我们会存在一个问题就是,react 的应用当中,组件和组件之间并不一定只有父子关系。他们还会存在着父子嵌            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-27 20:22:00
                            
                                100阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1.总结一下今年,2月份从深圳来到广州,工作到现在,回头看,完成的项目4-5个,公司基本没有懂技术的领导,所以在技术选型上,我们非常的自由,所以内心一直都不满足现状,加上一起工作的小伙伴给力(哈哈哈,我们一共就2个人),填坑能力不错,所以敢于把新技术,新架构用于项目当中,反正一切都可控,怎么开心怎么来。小项目不说了,基本都是面向服务在做,架构也是以前技术积累下来的一个脚手架项目,直接套进去用。云课            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-17 21:31:38
                            
                                96阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            前言适合有一定 React 项目经验阅读,默认对 React 的常用 api 较为熟悉研究 React 源码是结合网上的一些分析文章+自己看代码理解最开始看是因为项目中遇到性能问题,网上没有相关资料,所以想找到具体影响的点以下的代码解析以 15.4.1 版本为基础,且去除了开发环境的warning,为了区分,保留的注释都为英文,新增的注释为中文,尽量保持原注释文中有部分自己的演绎、理解、猜测,如有            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-06-18 10:16:45
                            
                                74阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.provider方法2.connect方法处理默认值3.完整myReactRedux.jsimport React, { createContext, useContext, useEffect, useState, useMemo } from "react";
import { bindActionCreators } from 'redux';
const ThemeContext =            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                            精选
                                                        
                            2023-06-26 15:06:38
                            
                                247阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            React源码解析————ReactHooks(一)2021SC@SDUSCHooks使用userState():状态钩子useContext():共享状态钩子useReducer():Action钩子useEffect():副作用钩子ReactHooks.js 2021SC@SDUSC2021SC@SDUSCHooks使用众所周知,React的组件创建方式,一种是类组件,一种是函数组件,一般来            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-29 11:12:57
                            
                                67阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            准备源码下载代码,并切换到最新标签 v17.0.2下git clone https://github.com/facebook/react.git执行 yaru            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-11-30 15:52:35
                            
                                682阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            文章目录JSX编译方式的改变 不再需要引入ReactComponentthis.setStatePrevComponent节点类型Fiberdiff替换原            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-02-14 10:17:14
                            
                                61阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            初入 React Hooks 的小伙伴可能比较疑惑,为什么 useCallback 这个 Hook 每次写一个都要传入相应的 deeps 呢?,简直不要太麻烦了。其实,useCallback 是用链表来进行存储和和初始化的。1.源码解读useCallback 用法如下:const memoizedCallback = useCallback(
  () =&            
                
         
            
            
            
            常有小伙伴问我会不会写react源码文章,我基本发别人的源码文章~            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2022-07-26 09:45:04
                            
                                262阅读
                            
                                                                             
                 
                
                                
                    