React基础(中)
事件处理
绑定事件
采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写onclick
, React里的事件是驼峰onClick
,React的事件并不是原生事件,而是合成事件。
事件handler的写法
- 直接在render里写行内的箭头函数(不推荐)
- 在组件内使用箭头函数定义一个方法(推荐)
- 直接在组件内定义一个非箭头函数的方法,然后在render里直接使用
onClick={this.handleClick.bind(this)}
(不推荐) - 直接在组件内定义一个非箭头函数的方法,然后在constructor里bind(this)(推荐)
Event 对象
和普通浏览器一样,事件handler会被自动传入一个 event
对象,这个对象和普通的浏览器 event
对象所包含的方法和属性都基本一致。不同的是 React中的 event
对象并不是浏览器提供的,而是它自己内部所构建的。它同样具有event.stopPropagation
、event.preventDefault
这种常用的方法
事件对象中的值很多都是null,但是可以正常使用
事件的参数传递
- 在
render
里调用方法的地方外面包一层箭头函数 - 在
render
里通过this.handleEvent.bind(this, 参数)
这样的方式来传递 - 通过
event
传递 - 比较推荐的是做一个子组件, 在父组件中定义方法,通过
props
传递到子组件中,然后在子组件件通过this.props.method
来调用
处理用户输入
import React, { Component } from 'react'
import ReactDOM from 'react-dom'class App extends Component {constructor() {super()this.state = {xing: '',ming: ''}}handleInputChange = (e) => {this.setState({[e.target.name]: e.target.value})}render () {const {xing,ming} = this.statereturn (<div><label><span>姓:</span><inputtype="text"name="xing"value={xing}onChange={this.handleInputChange}/></label><label><span>名:</span><inputtype="text"name="ming"value={ming}onChange={this.handleInputChange}/></label><p>欢迎您: {xing}{ming}</p></div>)}
}
ReactDOM.render(<App/>,document.getElementById('root')
)
组件的生命周期
React中组件有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化、运行中、销毁、错误处理(16.3之后)
生命周期钩子函数一定不要写成箭头函数
初始化
在组件初始化阶段会执行
- constructor
- static getDerivedStateFromProps() ---- 将来会使用,
- componentWillMount() / UNSAFE_componentWillMount() 带有UNSAFE属于过时的钩子函数
- componentWillMount会在17版本之后弃用( 使用static getDerivedStateFromProps) - render()
- componentDidMount()
更新阶段
props
或state
的改变可能会引起组件的更新,组件重新渲染的过程中会调用以下方法:
- componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
- static getDerivedStateFromProps()
- shouldComponentUpdate() // react性能优化第二方案
- componentWillUpdate() / UNSAFE_componentWillUpdate()
- render()
- getSnapshotBeforeUpdate() ---- 将来会使用
- componentDidUpdate()
卸载阶段
- componentWillUnmount()
错误处理
- componentDidCatch() — 16.3版本之后才有的
各生命周期详解
1.constructor(props)
React组件的构造函数在挂载之前被调用。在实现React.Component
构造函数时,需要先在添加其他内容前,调用super(props)
,用来将父组件传来的props
绑定到这个类中,使用this.props
将会得到。
官方建议不要在constructor
引入任何具有副作用和订阅功能的代码,这些应当使用componentDidMount()
。
constructor
中应当做些初始化的动作,如:初始化state
,将事件处理函数绑定到类实例上,但也不要使用setState()
。如果没有必要初始化state或绑定方法,则不需要构造constructor
,或者把这个组件换成纯函数写法。
当然也可以利用props
初始化state
,在之后修改state
不会对props
造成任何修改,但仍然建议大家提升状态到父组件中,或使用redux
统一进行状态管理。
constructor(props) {super(props);this.state = {isLiked: props.isLiked};
}
2.static getDerivedStateFromProps(nextProps, prevState)
getDerivedStateFromProps
是react16.3之后新增,在组件实例化后,和接受新的props
后被调用。他必须返回一个对象来更新状态,或者返回null表示新的props不需要任何state的更新。
如果是由于父组件的props
更改,所带来的重新渲染,也会触发此方法。
调用steState()
不会触发getDerivedStateFromProps()
。
之前这里都是使用constructor
+componentWillRecieveProps
完成相同的功能的
3. componentWillMount() / UNSAFE_componentWillMount()
componentWillMount()
将在React未来版本(官方说法 17.0)中被弃用。UNSAFE_componentWillMount()
在组件挂载前被调用,在这个方法中调用setState()
不会起作用,是由于他在render()
前被调用。
为了避免副作用和其他的订阅,官方都建议使用componentDidMount()
代替。这个方法是用于在服务器渲染上的唯一方法。这个方法因为是在渲染之前被调用,也是惟一一个可以直接同步修改state的地方。
4.render()
render()方法是必需的。当他被调用时,他将计算this.props
和this.state
,并返回以下一种类型:
- React元素。通过jsx创建,既可以是dom元素,也可以是用户自定义的组件。
- 字符串或数字。他们将会以文本节点形式渲染到dom中。
- Portals【'portl】。react 16版本中提出的新的解决方案,可以使组件脱离父组件层级直接挂载在DOM树的任何位置。
- null,什么也不渲染
- 布尔值。也是什么都不渲染。
当返回null
,false
,ReactDOM.findDOMNode(this)
将会返回null,什么都不会渲染。
render()
方法必须是一个纯函数,他不应该改变state
,也不能直接和浏览器进行交互,应该将事件放在其他生命周期函数中。
如果shouldComponentUpdate()
返回false
,render()
不会被调用。
5. componentDidMount
componentDidMount
在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。
通常在这里进行ajax请求
如果要初始化第三方的dom库,也在这里进行初始化。只有到这里才能获取到真实的dom.
6.componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)
官方建议使用getDerivedStateFromProps
函数代替componentWillReceiveProps
。当组件挂载后,接收到新的props
后会被调用。如果需要更新state
来响应props
的更改,则可以进行this.props
和nextProps
的比较,并在此方法中使用this.setState()
。
如果父组件会让这个组件重新渲染,即使props
没有改变,也会调用这个方法。
React不会在组件初始化props时调用这个方法。调用this.setState
也不会触发。
7.shouldComponentUpdate(nextProps, nextState)
调用shouldComponentUpdate
使React知道,组件的输出是否受state
和props
的影响。默认每个状态的更改都会重新渲染,大多数情况下应该保持这个默认行为。
在渲染新的props
或state
前,shouldComponentUpdate
会被调用。默认为true
。这个方法不会在初始化时被调用,也不会在forceUpdate()
时被调用。返回false
不会阻止子组件在state
更改时重新渲染。
如果shouldComponentUpdate()
返回false
,componentWillUpdate
,render
和componentDidUpdate
不会被调用。
官方并不建议在
shouldComponentUpdate()
中进行深度查询或使用JSON.stringify()
,他效率非常低,并且损伤性能。
8.componentWillUpdate/UNSAFE_componentWillUpdate(nextProps, nextState)
在渲染新的state
或props
时,UNSAFE_componentWillUpdate
会被调用,将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。
不能在这里使用this.setState(),也不能做会触发视图更新的操作。如果需要更新state
或props
,调用getDerivedStateFromProps
。
9.getSnapshotBeforeUpdate()
在react render()
后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值(如滚动位置)。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
10.componentDidUpdate(prevProps, prevState, snapshot)
在更新发生后立即调用componentDidUpdate()
。此方法不用于初始渲染。当组件更新时,将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较(例如,如果props没有改变,则可能不需要网络请求),这也是做网络请求的好地方。
如果组件实现getSnapshotBeforeUpdate()
生命周期,则它返回的值将作为第三个“快照”参数传递给componentDidUpdate()
。否则,这个参数是undefined
。
11.componentWillUnmount()
在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理,例如使定时器无效,取消网络请求或清理在componentDidMount
中创建的任何监听。
12.componentDidCatch(error, info)
错误边界是React组件,可以在其子组件树中的任何位置捕获JavaScript错误,记录这些错误并显示回退UI,而不是崩溃的组件树。错误边界在渲染期间,生命周期方法以及整个树下的构造函数中捕获错误。
如果类组件定义了此生命周期方法,则它将成错误边界。在它中调用setState()
可以让你在下面的树中捕获未处理的JavaScript错误,并显示一个后备UI。只能使用错误边界从意外异常中恢复; 不要试图将它们用于控制流程。
错误边界只会捕获树中下面组件中的错误。错误边界本身不能捕获错误。
PureComponent
PureComponnet
里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话,就不会去重新render了
在里面也可以使用shouldComponentUpdate
,而且。是否重新渲染以shouldComponentUpdate
的返回值为最终的决定因素。
import React, { PureComponent } from 'react'class YourComponent extends PureComponent {……
}
ref
React提供的这个ref
属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()
返回的组件实例,ref
可以挂载到组件上也可以是dom元素上。
- 挂到组件(
class
声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性,因为它们没有实例: - 挂载到dom元素上时表示具体的dom元素节点。
在React 最新的版本中,要使用ref
, 需要使用React.createRef
方法先生成一个ref
。
import React, { Component, createRef } from 'react'
import ReactDOM from 'react-dom'class App extends Component {constructor() {super()// 创建inputRefthis.inputRef=createRef()}componentDidMount () {console.log(this.inputRef.current) // <input type="text">}render () {return (<div>{/* 关联ref和dom */}<input type="text" ref={this.inputRef} /></div>)}
}
ReactDOM.render(<App/>,document.getElementById('root')
)
React Hooks
React Hooks 是 React 16.7.0-alpha
版本推出的新特性, 有了React Hooks,在 react 函数组件中,也可以使用类组件(classes components)的 state 和 组件生命周期。通过下面几个例子来学习React Hooks。
- State Hook
// useState是react包提供的一个方法
import React, { useState } from "react";
import ReactDOM from "react-dom";const Counter = () => {// useState 这个方法可以为我们的函数组件拥有自己的state,它接收一个用于初始 state 的值,返回一对变量。这里我们把计数器的初始值设置为0, 方法都是以set开始const [count, setCount] = useState(0);return (<div><p>你点击了{count}次</p><button onClick={() => setCount(count + 1)}>点击</button></div>);
};const rootElement = document.getElementById("root");ReactDOM.render(<Counter />, rootElement);
- Effect Hook
// useState是react包提供的一个方法
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";const Counter = () => {// useState 这个方法可以为我们的函数组件拥有自己的state,它接收一个用于初始 state 的值,返回一对变量。这里我们把计数器的初始值设置为0, 方法都是以set开始const [count, setCount] = useState(0);// 类似于componentDidMount或者componentDidUpdate:useEffect(() => {// 更改网页的标题,还可以做其它的监听document.title = `你点击了${count}次`;});return (<div><p>你点击了{count}次</p><button onClick={() => setCount(count + 1)}>点击</button></div>);
};const rootElement = document.getElementById("root");ReactDOM.render(<Counter />, rootElement);
- React Hooks 的规则
- 只能在顶层调用Hooks。不要在循环,条件或嵌套函数中调用Hook。
- 不要从常规JavaScript函数中调用Hook。只在React函数式组件调用Hooks。
- 自定义hooks可以选择讲解
- react 内置hooks api
- Basic Hooks
useState
useEffect
useContext
- Additional Hooks
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
- Basic Hooks
组件通信
分类:
父子组件通信
无论父组件传递是props还是state,子组件都是通过props接收
子父组件通信
父组件传递方法给子组件,子组件调用父组件传递过来的方法
注意: 自己的状态自己更改
非父子组件通信
ref链
1. ref = ‘xxx’ this.refs.xxx
2. ref = { el => this.xxx = el } this.xxx 【 推荐 】
跨组件通信
context
使用流程
- 创建上下文 React.createContext()
- 使用上下文包裹目标组件的父组件
<MoneyContext.Provider value = { money }><Father></Father></MoneyContext.Provider>
- 在目标组件中先定义一个静态属性 static contextType = MoneyContext
- 通过 this.context来使用数据
多组件状态共享
Flux
redux
mobx ( 阿里 )
父组件与子组件通信
-
父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变
-
父组件利用
ref
对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法…
子组件与父组件通信
- 父组件将自己的某个方法传递给子组件,在方法里可以做任意操作,比如可以更改状态,子组件通过
this.props
接收到父组件的方法后调用。
跨组件通信
在react没有类似vue中的事件总线来解决这个问题,我们只能借助它们共同的父级组件来实现,将非父子关系装换成多维度的父子关系。react提供了context
api来实现跨组件通信, React 16.3之后的context
api较之前的好用。
实例,使用context
实现购物车中的加减功能
// counterContext.js
import React, { Component, createContext } from 'react'const {Provider,Consumer: CountConsumer
} = createContext()class CountProvider extends Component {constructor () {super()this.state = {count: 1}}increaseCount = () => {this.setState({count: this.state.count + 1})}decreaseCount = () => {this.setState({count: this.state.count - 1})}render() {return (<Provider value={{count: this.state.count,increaseCount: this.increaseCount,decreaseCount: this.decreaseCount}}>{this.props.children}</Provider>)}
}export {CountProvider,CountConsumer
}
// 定义CountButton组件
const CountButton = (props) => {return (<CountConsumer>// consumer的children必须是一个方法{({ increaseCount, decreaseCount }) => {const { type } = propsconst handleClick = type === 'increase' ? increaseCount : decreaseCountconst btnText = type === 'increase' ? '+' : '-'return <button onClick={handleClick}>{btnText}</button>}}</CountConsumer>)
}
// 定义count组件,用于显示数量
const Count = (prop) => {return (<CountConsumer>{({ count }) => {return <span>{count}</span>}}</CountConsumer>)
}
// 组合
class App extends Component {render () {return (<CountProvider><CountButton type='decrease' /><Count /><CountButton type='increase' /></CountProvider>)}
}
复杂的非父子组件通信在react中很难处理,多组件间的数据共享也不好处理,在实际的工作中我们会使用flux、redux、mobx来实现
HOC(高阶组件)
Higher-Order Components就是一个函数,传给它一个组件,它返回一个新的组件。
功能:
1. 进行某些方法或是属性的复用
2. 让外层的组件替我们完成任务,那么里层组件直接使用就可以了
const NewComponent = higherOrderComponent(YourComponent)
比如,我们想要我们的组件通过自动注入一个版权信息。
// withCopyright.js 定义一个高阶组件
import React, { Component, Fragment } from 'react'const withCopyright = (WrappedComponent) => {return class NewComponent extends Component {render() {return (<Fragment><WrappedComponent /><div>©版权所有 千锋教育 2019 </div></Fragment>)}}
}
export default withCopyright
// 使用方式
import withCopyright from './withCopyright'class App extends Component {render () {return (<div><h1>Awesome React</h1><p>React.js是一个构建用户界面的库</p></div>)}
}
const CopyrightApp = withCopyright(App)
这样只要我们有需要用到版权信息的组件,都可以直接使用withCopyright这个高阶组件包裹即可。
在这里要讲解在CRA 中配置装饰器模式的支持。
状态管理
传统MVC框架的缺陷
什么是MVC?
MVC
的全名是Model View Controller
,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范。
V
即View视图是指用户看到并与之交互的界面。
M
即Model模型是管理数据 ,很多业务逻辑都在模型中完成。在MVC的三个部件中,模型拥有最多的处理任务。
C
即Controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。
MVC只是看起来很美
MVC框架的数据流很理想,请求先到Controller, 由Controller调用Model中的数据交给View进行渲染,但是在实际的项目中,又是允许Model和View直接通信的。然后就出现了这样的结果:
前端几个核心框架出现的时间
1. Backbone.js MVP 2010.10
2. Angular.js ( 1.0 版本) MVC ->MVVM 2010.10
3. React 可以认为是MVC中的V 2013
4. Vue 1.0 MVVM 2014
5. Vue 2.0 MVVM 2016/9
6. Angular.ts( 2.0 版本) 2016年
Flux Redux 都是和MVC MVP MVVM 一样是架构层级
Flux Redux 都是状态管理工具
1. 数据的集中存储者( 集中存储数据的一个仓库 )
2. 数据的管理者
Flux
在2013年,Facebook让React
亮相的同时推出了Flux框架,React
的初衷实际上是用来替代jQuery
的,Flux
实际上就可以用来替代Backbone.js
,Ember.js
等一系列MVC
架构的前端JS框架。
其实Flux
在React
里的应用就类似于Vue
中的Vuex
的作用,但是在Vue
中,Vue
是完整的mvvm
框架,而Vuex
只是一个全局的插件。
React
只是一个MVC中的V(视图层),只管页面中的渲染,一旦有数据管理的时候,React
本身的能力就不足以支撑复杂组件结构的项目,在传统的MVC
中,就需要用到Model和Controller。Facebook对于当时世面上的MVC
框架并不满意,于是就有了Flux
, 但Flux
并不是一个MVC
框架,他是一种新的思想( 新的架构思想 )。
[外链图片转存失败(img-Xfqx0t4L-1562849685193)(./images/flux.png)]
Flux 组成部分
- View: 视图层 ( 用React的组件来代替 )
- ActionCreators(动作创造者):视图层发出的消息(比如mouseClick)
- Dispatcher(派发器):用来接收Actions、执行回调函数
- Store(数据层):用来存放应用的状态,一旦发生变动,就提醒Views要更新页面
Flux的流程:
- 组件获取到store中保存的数据挂载在自己的状态上
- 用户产生了操作,调用actions的方法
- actions接收到了用户的操作,进行一系列的逻辑代码、异步操作
- 然后actions会创建出对应的action,action带有标识性的属性
- actions调用dispatcher的dispatch方法将action传递给dispatcher
- dispatcher接收到action并根据标识信息判断之后,调用store的更改数据的方法
- store的方法被调用后,更改状态,并触发自己的某一个事件
- store更改状态后事件被触发,该事件的处理程序会通知view去获取最新的数据
Redux
Store 数据的管理者和数据的存储者
actionCreators 动作的创建者,发送动作给 reducers
react Components 组件( 用来充当视图层 )
reducers 数据的修改者,返回一个新的 newstate 给store
React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。
- 代码结构
- 组件之间的通信
2013年 Facebook 提出了 Flux 架构的思想,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构。
如果你不知道是否需要 Redux,那就是不需要它
只有遇到 React 实在解决不了的问题,你才需要 Redux
简单说,如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。
- 用户的使用方式非常简单
- 用户之间没有协作
- 不需要与服务器大量交互,也没有使用 WebSocket
- 视图层(View)只从单一来源获取数据
需要使用Redux的项目:
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式(比如普通用户和管理员)
- 多个用户之间可以协作
- 与服务器大量交互,或者使用了WebSocket
- View要从多个来源获取数据
从组件层面考虑,什么样子的需要Redux:
- 某个组件的状态,需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
Redux的设计思想:
- Web 应用是一个状态机,视图与状态是一一对应的。
- 所有的状态,保存在一个对象里面(唯一数据源)。
注意:flux、redux都不是必须和react搭配使用的,因为flux和redux是完整的架构,在学习react的时候,只是将react的组件作为redux中的视图层去使用了。
Redux的使用的三大原则:
- Single Source of Truth(唯一的数据源)
- State is read-only(状态是只读的)
- Changes are made with pure function(数据的改变必须通过纯函数完成)
自己实现Redux
这个部分,可以根据班级情况看是否讲解。对于学生使用redux有很大的帮助。不使用react,直接使用原生的html/js来写一个简易的的redux
基本的状态管理及数据渲染
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Redux principle 01</title>
</head>
<body><h1>redux principle</h1><div class="counter"><span class="btn" onclick="dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span><span class="count" id="count"></span><span class="btn" id="add" onclick="dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span></div><script>// 定义一个计数器的状态const countState = {count: 10}// 定一个方法叫changeState,用于处理state的数据,每次都返回一个新的状态const changeState = (action) => {switch(action.type) {// 处理减case 'COUNT_DECREMENT':countState.count -= action.numberbreak;// 处理加 case 'COUNT_INCREMENT':countState.count += action.numberbreak;default:break;}}// 定义一个方法用于渲染计数器的domconst renderCount = (state) => {const countDom = document.querySelector('#count')countDom.innerHTML = state.count}// 首次渲染数据renderCount(countState)// 定义一个dispatch的方法,接收到动作之后,自动调用const dispatch = (action) => {changeState(action)renderCount(countState)}</script>
</body>
</html>
创建createStore方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Redux principle 02</title>
</head>
<body><h1>redux principle</h1><div class="counter"><span class="btn" onclick="store.dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span><span class="count" id="count"></span><span class="btn" id="add" onclick="store.dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span></div><script>// 定义一个方法,用于集中管理state和dispatchconst createStore = (state, changeState) => {// getState用于获取状态const getState = () => state// 定义一个监听器,用于管理一些方法const listeners = []const subscribe = (listener) => listeners.push(listener)// 定义一个dispatch方法,让每次有action传入的时候返回render执行之后的结果const dispatch = (action) => {// 调用changeState来处理数据changeState(state, action)// 让监听器里的所以方法运行listeners.forEach(listener => listener())}return {getState,dispatch,subscribe}}// 定义一个计数器的状态const countState = {count: 10}// 定一个方法叫changeState,用于处理state的数据,每次都返回一个新的状态const changeState = (state, action) => {switch(action.type) {// 处理减case 'COUNT_DECREMENT':state.count -= action.numberbreak;// 处理加 case 'COUNT_INCREMENT':state.count += action.numberbreak;default:break;}}// 创建一个storeconst store = createStore(countState, changeState)// 定义一个方法用于渲染计数器的domconst renderCount = () => {const countDom = document.querySelector('#count')countDom.innerHTML = store.getState().count}// 初次渲染数据renderCount()// 监听,只要有dispatch,这个方法就会自动运行store.subscribe(renderCount)</script>
</body>
</html>
让changeState方法变为一个纯函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Redux principle 03</title>
</head>
<body><h1>redux principle</h1><div class="counter"><span class="btn" onclick="store.dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span><span class="count" id="count"></span><span class="btn" id="add" onclick="store.dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span></div><script>// 定义一个方法,用于集中管理state和dispatchconst createStore = (state, changeState) => {// getState用于获取状态const getState = () => state// 定义一个监听器,用于管理一些方法const listeners = []const subscribe = (listener) => listeners.push(listener)// 定义一个dispatch方法,让每次有action传入的时候返回render执行之后的结果const dispatch = (action) => {// 调用changeState来处理数据state = changeState(state, action)// 让监听器里的所有方法运行listeners.forEach(listener => listener())}return {getState,dispatch,subscribe}}// 定义一个计数器的状态const countState = {count: 10}// 定一个方法叫changeState,用于处理state的数据,每次都返回一个新的状态const changeState = (state, action) => {switch(action.type) {// 处理减case 'COUNT_DECREMENT':return {...state,count: state.count - action.number}// 处理加 case 'COUNT_INCREMENT':return {...state,count: state.count + action.number}default:return state}}// 创建一个storeconst store = createStore(countState, changeState)// 定义一个方法用于渲染计数器的domconst renderCount = () => {const countDom = document.querySelector('#count')countDom.innerHTML = store.getState().count}// 初次渲染数据renderCount()// 监听,只要有dispatch,这个方法就会自动运行store.subscribe(renderCount)</script>
</body>
</html>
合并state和changeState(最终版)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Redux principle 04</title>
</head>
<body><h1>redux principle</h1><div class="counter"><span class="btn" onclick="store.dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span><span class="count" id="count"></span><span class="btn" id="add" onclick="store.dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span></div><script>// 定义一个方法,用于集中管理state和dispatch, changeState改名了,专业的叫法是reducerconst createStore = (reducer) => {// 定义一个初始的statelet state = null// getState用于获取状态const getState = () => state// 定义一个监听器,用于管理一些方法const listeners = []const subscribe = (listener) => listeners.push(listener)// 定义一个dispatch方法,让每次有action传入的时候返回reducer执行之后的结果const dispatch = (action) => {// 调用reducer来处理数据state = reducer(state, action)// 让监听器里的所有方法运行listeners.forEach(listener => listener())}// 初始化statedispatch({})return {getState,dispatch,subscribe}}// 定义一个计数器的状态const countState = {count: 10}// 定一个方法叫changeState,用于处理state的数据,每次都返回一个新的状态const changeState = (state, action) => {// 如果state是null, 就返回countStateif (!state) return countStateswitch(action.type) {// 处理减case 'COUNT_DECREMENT':return {...state,count: state.count - action.number}// 处理加 case 'COUNT_INCREMENT':return {...state,count: state.count + action.number}default:return state}}// 创建一个storeconst store = createStore(changeState)// 定义一个方法用于渲染计数器的domconst renderCount = () => {const countDom = document.querySelector('#count')countDom.innerHTML = store.getState().count}// 初次渲染数据renderCount()// 监听,只要有dispatch,renderCount就会自动运行store.subscribe(renderCount)</script>
</body>
</html>
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- React基础知识学习笔记
React 组件1.React 特点2.Hello_React 小案例3.虚拟DOM的两种创建方式1.使用jsx创建虚拟DOM2.使用js创建虚拟DOM(一般不用)3.比较VDOM与TDOM4.JSX语法规则5.JSX练习6.js语句(代码)与js表达式区别4.模块,模块化,组件,组…...
2024/4/21 16:36:45 - React基础学习(一)
文章目录一、什么是React1.1 特点1.2 React的使用1.3 实例二、 React脚手架2.1 React脚手架意义2.2 使用React脚手架初始化项目2.3 脚手架中使用React三、JSX的使用3.1 概述JSX产生的原因JSX的概述3.2 简单入门使用使用步骤为什么在脚手架中可以使用JSX语法注意点3.3 JSX语法3.…...
2024/4/28 0:05:11 - React与前端:React家族介绍
我曾在微博上说过“React就是哪吒”,那么一个前端框架和哪吒有什么关系呢?其实我觉得二者有某些相似的地方。 哪吒家室显赫,拥有的神器多到需要三头六臂才能拿得过来,后来经历磨难,脱胎换骨,能够独当多面。…...
2024/4/21 16:36:41 - 全切双眼皮33天恢复图
...
2024/4/21 16:36:41 - 全切双眼皮 塌了
...
2024/4/21 16:36:40 - 全切双眼皮 三眼皮
...
2024/4/21 16:36:38 - Angular学习笔记(二十五)http通讯和webSocket通讯
http通讯 发送http请求 参考api文档处理http响应携带请求头部信息 需要注意的是: get(url: string, options?: RequestOptionsArgs): Observable<Response> 发送http请求返回的是个可观察者流,需要对其进行订阅获取相应消息。 写一个用get方…...
2024/4/21 16:36:37 - 用C#和Websocket实现实时通讯
说到websocket大家一定不会陌生,WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成,当浏览器和服务器握手成功后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可…...
2024/4/21 16:36:37 - Websocket实现心跳
Angular的实现,分成service部分,以及调用该service的component。 service代码 websocket.service.ts import {Injectable} from angular/core;Injectable({providedIn: root }) export class WebSocketService {constructor() {}createWebSocket(url: st…...
2024/4/20 14:19:57 - 解决WebSocket在angularjs里scope的值无法更新
转自: 出处...
2024/4/20 14:19:55 - websocket学习笔记
websocket是h5新出的支持全双工的,持久化的协议,它也支持服务器端推送。通常在客户端是通过new创建一个websocket对象 var socketnew WebSocket(url,[protocols])不是所有的浏览器都支持websocket协议,它接收两个参数,第一个是通…...
2024/4/20 14:19:52 - 利用Websocket实现ROS与Web的交互
ROS是现在应为最为广泛的机器人操作系统,为了将ROS与Web端的应用结合起来,ROS Web Tools社区开发了很多Web功能包,利用这些工具,我们能够在Web端实现对机器人的监测与控制。 工具的准备 首先介绍以下所需要的工具包:…...
2024/4/20 14:19:53 - 去日本修复去日本做双眼皮多少钱
...
2024/4/27 23:23:35 - 曲靖双眼皮那里做得好
...
2024/4/28 4:58:29 - avalon实现一个简单的带增删改查的成绩单
自从angular问世,一直就有去了解学习angular,一直想用angular去做一个项目,但无奈,大ng是国外产物,ng1.2版本就只兼容到IE8,1.3后的几个版本提升到IE9,据说NG2.0更是向移动端靠拢的。 一次次纠结…...
2024/4/27 23:34:43 - AngularJs实现sqlserver的增删改查--C#
前台代码: <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title></title> </head> <body ng-app"app" ng-controller"MyCtrl"><input type"text" placeholder"名字…...
2024/4/28 1:31:01 - AngularJS用户列表的增删改查样式
源代码如下: <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <script type"text/javascript" src"angular-1.3.0.js"></script> <title>练习</title> …...
2024/4/21 16:36:35 - ListCode增删改查代码生成器-支持java、php、python、nodejs
1. 简介listcode.cn 是一个代码生成的云服务网站。主要提供java,python,php,nodejs等常见语言和框架的 CRUD代码生成服务(即 常见的增删改查),后台代码、前端界面、js等,一站解决。相比于传统的…...
2024/4/20 19:44:10 - ListCode增删改查代码生成器,java,php,python,nodejs全支持
1. 简介 listcode.cn 是一个增删改查代码生成的云服务网站。 主要提供java,python,php,nodejs等常见语言和框架的 CRUD代码生成服务(即 常见的增删改查),后台代码、前端界面、js等,一站解…...
2024/4/21 16:36:33 - angularJs实现增删改查示例1-列表查询界面
先上效果图:*************************************以下是代码截图**************************************因为前端代码贴过来很多都直接变成前端组件了,所以直接截图1、导入的js、css引用,以及angularJs需要注意的地方,如&#…...
2024/4/21 16:36:33
最新文章
- python爬虫 - 爬取 json 格式数据(股票行情信息:雪球网,自选股)
文章目录 1. 第一步:安装requests库2. 第二步:获取爬虫所需的header和cookie3. 第三步:获取网页4. 第四步:解析网页5. 第五步:解析 json 结构数据体6. 代码实例以及结果展示 python爬虫五部曲: 第一步&…...
2024/4/28 6:37:33 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 巨控科技新品发布:全方位升级,引领智能控制新纪元
标签: #巨控科技 #智能控制 #新品发布 #GRM560 #OPC560 #NET400 在智能控制领域,巨控科技始终以其前沿技术和创新产品引领着市场的潮流。近日,巨控科技再次以其行业领先的研发实力,推出了三大系列的新产品,旨在为各行各业提供更…...
2024/4/23 6:25:41 - PHP获取亚马逊商品详情api接口
亚马逊提供了一个名为Product Advertising API(PA API)的接口,可以用来获取亚马逊商品的详细信息。 要使用PA API,您需要进行以下几个步骤: 注册为亚马逊合作伙伴,并创建一个亚马逊开发人员账户。创建一个…...
2024/4/26 23:25:20 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/26 18:09:39 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/28 3:28:32 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/26 23:05:52 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/27 4:00:35 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/27 9:01:45 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/28 1:22:35 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/27 11:43:08 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/27 8:32:30 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57