摘要: 1.订阅发布模式进行兄弟组件通信的案例 1.构建一个调度中心 var bus = { list: [], //订阅 subscribe(callback) { this.list.push(callback) console.log(this.list) }, //发布 publish(name, 阅读全文
posted @ 2023-11-08 10:43 SadicZhou 阅读(44) 评论(0) 推荐(0) 编辑
摘要: 1.订阅发布模式的定义 订阅发布模式简单来说就是订阅者进行订阅,发布者进行发布,发布者发布时会通过调度中心通知到每一个订阅者。订阅者根据发布的内容选择是否进行对应的操作。 2.实现一个最简单的订阅发布 订阅发布模式的核心就是调度中心。一个最简单的调度中心里面应该具有三个要素 订阅方法,发布方法,回调 阅读全文
posted @ 2023-11-08 10:27 SadicZhou 阅读(26) 评论(0) 推荐(0) 编辑
摘要: 1.状态提升(中间人模式)的定义 React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件 上.在父组件上改变这个状态然后通过props分发给子组件。 2.状态提升的使用 简单讲解一下下面的代码,下面模拟了一个电影列表和详情页面。 进行通信的是列表的item和详情组件。 可 阅读全文
posted @ 2023-11-08 10:11 SadicZhou 阅读(21) 评论(0) 推荐(0) 编辑
摘要: 在React中子组件给父组件传参通过回调函数来进行。 父组件给子组件传递一个回调函数作为属性。 子组件在需要传递参数的地方调用父组件传递的回调函数即可。 import React, { Component } from 'react' class Navbar extends Component { 阅读全文
posted @ 2023-11-08 09:55 SadicZhou 阅读(19) 评论(0) 推荐(0) 编辑
摘要: 1.受控组件的定义 React组件的数据渲染是否被调用者传递的 props 完全控制,完全控制则为受控组件,否则非受控组件。即React 的 state 成为组件的唯一数据源。 下面用一个小案例来演示,案例中todolist组件的唯一数据源就是State,todolist组件就是一个受控组件 imp 阅读全文
posted @ 2023-11-04 11:27 SadicZhou 阅读(9) 评论(0) 推荐(0) 编辑
摘要: 1.非受控组件的定义 非受控组件即状态不是完全由React的state来控制的组件 React要编写一个非受控组件,可以 使用 ref 来从 DOM 节点中获取表单数据,就是非受控组件。 import React, { Component } from 'react' export default 阅读全文
posted @ 2023-11-04 11:16 SadicZhou 阅读(8) 评论(0) 推荐(0) 编辑
摘要: 相似点: 都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同) 不同点: 1. 属性能从父组件获取,状态不能 2. 属性可以由父组件修改,状态不能 3. 属性能在内部设置默认值,状态也可以,设置方式不一样 4. 属性不在组件内部修改,状态要在组件内部修改 5. 属性能设 阅读全文
posted @ 2023-11-03 14:30 SadicZhou 阅读(6) 评论(0) 推荐(0) 编辑
摘要: 1.属性的定义 props 是正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更 改,但是你可以通过父组件主动重新渲染的方式来传入新的 props。 这就是React中的单向数据流 2.属性的特点 属性是描述性质、特点的,组件自己不能随意更改,必须由父组件进行更改 3. 阅读全文
posted @ 2023-11-03 14:27 SadicZhou 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 先说结论: setState处在同步的逻辑中会异步更新状态,更新真实dom。 连续调用 setState 不会连续进行虚拟dom的对比和页面的更新 setState处在异步的逻辑中,同步更新状态,更新真实dom。 1.同步状态 先看同步状态 /* eslint-disable react/no-di 阅读全文
posted @ 2023-10-31 14:13 SadicZhou 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 1.使用场景 dangerouslySetInnerHTML指令能将字符串当做html解析 相当于vue中的v-html指令 一般我们用来渲染富文本返回的html文本 2.使用方法 {this.state.tolist.map((item,index)=>{ return ( <span dange 阅读全文
posted @ 2023-10-21 10:53 SadicZhou 阅读(176) 评论(0) 推荐(0) 编辑