react07-组件化开发

react07-组件

react中全部都是局部组件(函数,类,hooks组件)

函数组件

  • 一般组件都是放到src下的view文件夹中
  • 每创建一个jsx文件,在该文件中定义一个方法,返回jsx元素、jsx视图、virtualDom对象 : 这就是创建一个函数组件
  • 调用: 按照es6的规范,调用 import *** from "路经" ,调用时可以忽略文件后缀名,倒入后,当作标签使用即可,调用的组件可以设置(传递)各种属性
    在调用组件的时候可以把一些数据和信息 基于props传递给组件 ,组件的双闭合调用可以传递子节点,在传递给函数的props中会增加一个children属性
  • 注意:如果传递的属性值不是字符串就要使用 {} 来嵌套数据

函数组件的渲染机制

基于 Babel-preset- react- app :把调用的函数组件转换成create Element格式
然后执行 createElement方法创建出虚拟dom对象
注意:函数组件中的type不再是标签字符串了,而是一个方法,

基于 render 方法将虚拟dom转变成真实dom :

  • 此过程中: 执行定义的函数方法
  • 把virtualDom中的props传递给函数---> demoOne(props) : 这就是父传子
  • 接收函数返回的结果,也就是函数组件中返回的jsx元素(当前元素的虚拟dom)
  • 基于render方法将返回的虚拟dom转变成真实dom,插入到#root容器中

函数组件的应用

属性props的处理

  • 调用组件时传递进来的属性是只读的,只能获取不能修改 : 因为props对象被冻结了
  • 但可以修改结构后的属性值,只要不直接修改 props 中的属性
  • 作用: 父组件调用子组件时,可以基于属性,把不同的信息传递给子组件,子组件接收响应的属性值,呈现不同的效果,提过复用性
  • 可以利用 prop-typs库 对传递进来的属性做规则校验

也可以看react官网,用上面的方法

对象三大规则:冻结,密封,不可扩展

相关推荐
tech_zjf33 分钟前
当 AI 把 Next.js Route 越写越快:我为什么做了 next-route-kit
前端·后端
常宇佳36 分钟前
vue3 @代指src路径设置
前端·typescript·vue
砚凝霜1 小时前
软考网络工程师|案例分析:Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结
前端·css·网络
珐恩AI-人工智能1 小时前
大模型意图召回偏差分析:GEO如何解决“有收录却不触发问答曝光”的难题
大数据·前端·人工智能·html·流量运营·geo优化
程序员老赵2 小时前
Docker 部署禅道 ZenTao:轻松搭建研发项目管理平台
前端·后端·github
前端小卡拉2 小时前
用了大半年 AI 编程工具,我才搞懂 Skill 到底是什么
前端·javascript
hunterandroid2 小时前
[鸿蒙从零到一] HarmonyOS 单元测试与 UI 自动化测试实战:从代码质量到用户体验的全链路保障
前端
郭邯2 小时前
用 Intl.DateTimeFormat 手写一个时区转换器,顺便聊聊我和 AI 结对编程的日常
前端·javascript
阿奇__2 小时前
微前端、iframe与Auth Code技术方案对比
前端
FungLeo2 小时前
React 管理后台实战 · 前端请求层怎么写?401 静默刷新、token 并发竞争、强制改密拦截一次说清
前端·react.js·前端框架