IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> REACT全家桶(4)----组件 -> 正文阅读

[JavaScript知识库]REACT全家桶(4)----组件

一、状态state

1.设置了state的组件称之为有状态组件,没有设置state的组件称之为无状态组件

2.组件中的数据:

3.在类中定义state{只能写这个名字}对象? ?

state={key:value}

4.不要直接修改state:this.state.ok=’ok‘? ?

使用setState{key:value}

5.setState注意:

在同步逻辑中,异步更新状态与真实dom

在异步逻辑中,同步更新状态与真实dom

接受第二个参数,是个回调函数,在这里状态与dom更新完毕

二、属性props(只读)

1.state是内部属性,props是为了更好的实现复用性,从外部接受数据

2.某组件

3. MyNav.js

?属性验证:

三、属性及状态总结

属性是父组件对子组件的数据传输与操作

状态时组件自己内部的数据

四、表单

受控组件:

1.由React控制

2.value绑定state中的值

3.实现表单元素的change事件

4.优化:可以使用name属性,统一完成change事件

5.注意:选择框与其他表单元素获取的值方式不一样

非受控组件:

由DOM控制

在constructor中React.createRet()

五、通信

1.父传子:属性值

2.子传父:回调函数

3.在父组件中对子组件进行ref标记,可以获取到子组件的引用

4.中间人模式:由父组件充电中间人,利用子传父+父传子模式完成

5.发布订阅者模式

?6.context状态数传参(官方提供)

7.Redux

六、插槽

作用:

1.提高代码的复用性

2.一定程度上减少父子通信

默认形式:

??按顺序插入:

?七、生命周期(钩子函数)

初始化阶段:

conmponentWillMount:组件即将挂载

render:渲染

componentDidMount:成功执行完毕render并完成dom节点的渲染,可以对dom修改

运行中阶段:

componentWillReceiveProps(next Props):父组件修改属性触发

ShouldComponentUpdate(next Props , next State):返回false,会阻止render的调用

ComponentWillUpdate:组件将要更新,不能修改属性及状态

ComponentDidUpdate(preProps ,preState):可以修改dom参数是被修改之后的属性及状态

销毁阶段:?

componentWillUnmount:在删除组件前进行清理工作?

八、新生命周期(推荐)

老钩子问题componentWillmount会重复触发多次,如果绑定事件无法解绑
static.getDeriverStateFromProps(nextProps,nextState)

将属性转为状态

挂载之前与更新时会执行

返回一个状态对象

?

?

?

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-10-22 21:06:34  更:2022-10-22 21:07:18 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 17:09:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码