首页 > 其他分享 >完整手写react第五天

完整手写react第五天

时间:2023-03-07 10:12:11浏览次数:39  
标签:render 更新 react API 第五天 手写 ReactDOM

如何触发更新

常见的触发更新的方式:

  • ReactDOM.createRoot().render(或老版的ReactDOM.render
  • this.setState
  • useStatedispatch方法

接下来的工作包括:

  • 实现mount时调用的API
  • 将该API接入上述更新机制中

需要考虑的事情:

  • 更新可能发生于任意组件,而更新流程是从根节点递归的
  • 需要一个统一的根节点保存通用信息

 

标签:render,更新,react,API,第五天,手写,ReactDOM
From: https://www.cnblogs.com/libertylhy/p/17187075.html

相关文章

  • 完整手写react第四天
    实现Reconciler架构ReactElement如果作为核心模块操作的数据结构,存在的问题:无法表达节点之间的关系字段有限,不好拓展(比如:无法表达状态)所以,需要一种新的数据结构,他的......
  • React课堂笔记3-生命周期
    一、组件component(续)1.1、组件的state1.1.1、componentWillUnmountcomponentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除t......
  • React 中使用React-Router
    React-Router帮助我们实现单页应用的路由跳转功能1.简单路由src/pags/home.jsconstHome=()=>{return(<div>Home</div>);};src/Routes.jsimpo......
  • react-router-dom V6路由参数
    一、标签组件  1.search方式    <Linkto={'/main/dataForm?id=123&name=aa'}>导航</Link>    <Linkto={{pathname:'/main/dataForm',search:`?id=123&na......
  • React - 改变不受控制的输入
    我有一个简单的React组件,我认为它具有一个受控输入的形式:importReactfrom'react';exportdefaultclassMyFormextendsReact.Component{constructor(......
  • 【前端】一个更底层库-React基础知识
    (目录)这一篇学习React知识点。分别从属性状态和相关API了解一下。属性状态属性状态要知道这几个PROPS,PROPVALIDATION,STATE。PROPS通过this.props可以获取传递给该......
  • 手写Dubbo框架「建议收藏」
    本文章向大家介绍手写Dubbo框架「建议收藏」,主要内容包括一句话认识Dubbo、一句话明白RPC、手写可扩展的RPC协议、项目地址、多模块设计、服务端、注册中心实现、HTTP协议......
  • HTML与CSS手写-4.实现常用布局(三栏、圣杯、双飞翼、吸顶),可是说出多种方式并理解其优缺
    实现常用布局两栏布局三栏、圣杯、双飞翼圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应......
  • HTML与CSS手写-1.手写图片瀑布流效果
    1.column多行布局实现瀑布流column 实现瀑布流主要依赖两个属性。column-count 属性,是控制屏幕分为多少列。column-gap 属性,是控制列与列之间的距离。<!DOCTYPEht......
  • HTML与CSS手写-2.使用CSS绘制几何图形(圆形、三角形、扇形、菱形等)
    使用CSS绘制几何图形(圆形、三角形、扇形、菱形等)//圆形<divclass="circle"></div><style>.circle{border-radius:50%;width:80px;height:80px;backg......