YYece的博客

dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容import React from 'react';class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'<h1>标题名称</h1>'...

js 定时器有以下两个方法：setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setTimeout() ：在指定的毫秒数后调用函数或计算表达式。这里用的是setInterval1、定义在用定时器的时候，定义一个变量来记录定时器的返回值let myInterval: any;...

存输入框输入的值 <Input placeholder='请输入已绑定手机号' value={inputPhone} float ...

因为以下三个原因， Redux 轻而易举地实现撤销历史：不存在多个模型的问题，你需要关心的只是 state 的子树。state 是不可变数据，所有修改被描述成独立的 action，而这些 action 与预期的撤销堆栈模型很接近了。reducer 的签名 (state, action) => state 可以自然地实现 “reducer enhancers” 或者 “hig...

什么是衍生数据为什么要计算衍生数据In Redux, whenever an action is called anywhere in the application, all mounted & connected components call their mapStateToProps function. This is why Reselect is awesome. It ...

什么是服务端渲染服务端渲染（SSR）：当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。客户端渲染：客户端渲染模式下，服...

React Redux是啥React Redux是Redux的官方React绑定。它使您的React组件可以从Redux存储中读取数据，并向存储分派操作以更新数据这里需要再强调一下：Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。尽管如此，Redux 还是和 React 和 Deku 这类库搭配...

在 Redux 的世界中，Redux action 返回一个 JS 对象，被 Reducer 接收处理后返回新的 State，这一切看似十分美好。整个过程可以看作是：view -> actionCreator -> action -> reducer -> newState ->(map) container component但是真实业务开发我们需要处理异步...

参考https://www.jianshu.com/p/da511a1c0865https://www.jianshu.com/p/dd62f3bc95a0

严格的单向数据流是 Redux 架构的设计核心。这意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。Redux 数据的生命周期Redux 应用中数据的生命周期遵循下面 4 个步骤：1.调用 store.dispatch(action)2.Redux store 调用传入的 red...

Redux 应用只有一个单一的 store文章目录Store的职责Store方法createStore(reducer, [preloadedState], enhancer)参数返回值getState()dispatch(action)subscribe(listener)replaceReducer(nextReducer)构建有效的 Redux Store参考Store的职责维持...

什么是ReducerReducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。action只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。reducer就是一个纯函数（Pure Function），接受就得state和action，返回新的state(previousState, action) => newState之所以将这...

什么是ActionAction是数据从应用传递到 store/state 的载体。是store数据的唯一来源。一般通过store.dispatch()将action传给store如何定义const ADD_TODO = 'ADD_TODO'{ type: ADD_TODO, index: 5}action 内必须使用一个字符串类型的 type 字段来表示将要执行...

redux 是什么官方解释：Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预测的状态容器为什么使用Redux下面的图是不使用Redux和使用Redux时 父子组件之间的通信方式没有使用Redux的情况，如果两个组件(非父子关系)之间需要通信的话，可能需要多个中间组件为他们进行消...

与父组件区别有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑...

作用将子节点渲染在父组件以外的DOM节点的方案，portal是真实DOM，存在于DOM tree中用法import React, { Component } from "react";export default class Portal extends Component { render() { return React.createPortal(this.props.c...

例子使用类组件import React from 'react'class Welcome extends React.Component { constructor(props) { super(props); this.sayHi = this.sayHi.bind(this); } sayHi() { alert(`Hi ${this.props...

什么叫状态提升就是多个子组件共享一个状态（state），可以将state提到最近的父组件上，再用父组件的props分发给子组件比如多个并列的子组件的联系就是共有一个父组件，多考虑他们之间的关系...

V16之前class Parent extends Component { constructor(props, context) { super(props, context); this.r = null } componentDidMount() { this.r.onClick() } render(...

解决的问题为了能让父组件直接操作子组件中的元素import React, {Component} from 'react';function Child(props) { return <button>{props.children}</button>}class Parent extends Component { constructor(p...

作用减少不必要的节点嵌套react常常一个组件返回多个组件，fragments允许将子元素分组，而不用占用多个DOM节点render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Frag...