关于react.js:react高频面试题总结一

React Hook 的应用限度有哪些？

React Hooks 的限度次要有两条：

• 不要在循环、条件或嵌套函数中调用 Hook；
• 在 React 的函数组件中调用 Hook。

那为什么会有这样的限度呢？Hooks 的设计初衷是为了改良 React 组件的开发模式。在旧有的开发模式下遇到了三个问题。

• 组件之间难以复用状态逻辑。过来常见的解决方案是高阶组件、render props 及状态治理框架。
• 简单的组件变得难以了解。生命周期函数与业务逻辑耦合太深，导致关联局部难以拆分。
• 人和机器都很容易混同类。常见的有 this 的问题，但在 React 团队中还有类难以优化的问题，心愿在编译优化层面做出一些改良。

这三个问题在肯定水平上妨碍了 React 的后续倒退，所以为了解决这三个问题，Hooks 基于函数组件 开始设计。然而第三个问题决定了 Hooks 只反对函数组件。

那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按程序退出数组中，如果应用循环、条件或嵌套函数很有可能导致数组取值错位，执行谬误的 Hook。当然，本质上 React 的源码里不是数组，是链表。

这些限度会在编码上造成肯定水平的心智累赘，老手可能会写错，为了防止这样的状况，能够引入 ESLint 的 Hooks 查看插件进行预防。

react16 版本的 reconciliation 阶段和 commit 阶段是什么

• reconciliation 阶段蕴含的次要工作是对 current tree 和 new tree 做 diff 计算，找出变动局部。进行遍历、比照等是能够中断，歇一会儿接着再来。
• commit 阶段是对上一阶段获取到的变动局部利用到实在的 DOM 树中，是一系列的 DOM 操作。不仅要保护更简单的 DOM 状态，而且中断后再持续，会对用户体验造成影响。在广泛的利用场景下，此阶段的耗时比 diff 计算等耗时绝对短。

state 是怎么注入到组件的，从 reducer 到组件经验了什么样的过程

通过 connect 和 mapStateToProps 将 state 注入到组件中：

import {connect} from 'react-redux'
import {setVisibilityFilter} from '@/reducers/Todo/actions'
import Link from '@/containers/Todo/components/Link'

const mapStateToProps = (state, ownProps) => ({active: ownProps.filter === state.visibilityFilter})

const mapDispatchToProps = (dispatch, ownProps) => ({setFilter: () => {dispatch(setVisibilityFilter(ownProps.filter))
    }
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Link)
复制代码

下面代码中，active 就是注入到 Link 组件中的状态。mapStateToProps（state，ownProps）中带有两个参数，含意是∶

• state-store 治理的全局状态对象，所有都组件状态数据都存储在该对象中。
• ownProps 组件通过 props 传入的参数。

reducer 到组件经验的过程：

• reducer 对 action 对象解决，更新组件状态，并将新的状态值返回 store。
• 通过 connect（mapStateToProps，mapDispatchToProps）（Component）对组件 Component 进行降级，此时将状态值从 store 取出并作为 props 参数传递到组件。

高阶组件实现源码∶

import React from 'react'
import PropTypes from 'prop-types'

// 高阶组件 contect 
export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
    class Connect extends React.Component {
        // 通过对 context 调用获取 store
        static contextTypes = {store: PropTypes.object}

        constructor() {super()
            this.state = {allProps: {}
            }
        }

        // 第一遍需初始化所有组件初始状态
        componentWillMount() {
            const store = this.context.store
            this._updateProps()
            store.subscribe(() => this._updateProps()); // 退出_updateProps()至 store 里的监听事件列表}

        // 执行 action 后更新 props，使组件能够更新至最新状态（相似于 setState）_updateProps() {
            const store = this.context.store;
            let stateProps = mapStateToProps ?
                mapStateToProps(store.getState(), this.props) : {} // 避免 mapStateToProps 没有传入
            let dispatchProps = mapDispatchToProps ?
                mapDispatchToProps(store.dispatch, this.props) : {dispatch: store.dispatch} // 避免 mapDispatchToProps 没有传入
            this.setState({
                allProps: {
                    ...stateProps,
                    ...dispatchProps,
                    ...this.props
                }
            })
        }

        render() {return <WrappedComponent {...this.state.allProps} />
        }
    }
    return Connect
}
复制代码

Redux 申请中间件如何解决并发

应用 redux-Saga redux-saga 是一个治理 redux 利用异步操作的中间件，用于代替 redux-thunk 的。它通过创立 Sagas 将所有异步操作逻辑寄存在一个中央进行集中处理，以此将 react 中的同步操作与异步操作辨别开来，以便于前期的治理与保护。redux-saga 如何解决并发：

• takeEvery

能够让多个 saga 工作并行被 fork 执行。

import {
    fork,
    take
} from "redux-saga/effects"

const takeEvery = (pattern, saga, ...args) => fork(function*() {while (true) {const action = yield take(pattern)
        yield fork(saga, ...args.concat(action))
    }
})
复制代码

• takeLatest

takeLatest 不容许多个 saga 工作并行地执行。一旦接管到新的发动的 action，它就会勾销后面所有 fork 过的工作（如果这些工作还在执行的话）。
在解决 AJAX 申请的时候，如果只心愿获取最初那个申请的响应，takeLatest 就会十分有用。

import {
    cancel,
    fork,
    take
} from "redux-saga/effects"

const takeLatest = (pattern, saga, ...args) => fork(function*() {
    let lastTask
    while (true) {const action = yield take(pattern)
        if (lastTask) {yield cancel(lastTask) // 如果工作曾经完结，则 cancel 为空操作
        }
        lastTask = yield fork(saga, ...args.concat(action))
    }
})
复制代码

**

React 与 Vue 的 diff 算法有何不同？

diff 算法是指生成更新补丁的形式，次要利用于虚构 DOM 树变动后，更新实在 DOM。所以 diff 算法肯定存在这样一个过程：触发更新 → 生成补丁 → 利用补丁。

React 的 diff 算法，触发更新的机会次要在 state 变动与 hooks 调用之后。此时触发虚构 DOM 树变更遍历，采纳了深度优先遍历算法。但传统的遍历形式，效率较低。为了优化效率，应用了分治的形式。将繁多节点比对转化为了 3 种类型节点的比对，别离是树、组件及元素，以此晋升效率。

• 树比对：因为网页视图中较少有跨层级节点挪动，两株虚构 DOM 树只对同一档次的节点进行比拟。
• 组件比对：如果组件是同一类型，则进行树比对，如果不是，则间接放入到补丁中。
• 元素比对：次要产生在同层级中，通过标记节点操作生成补丁，节点操作对应实在的 DOM 剪裁操作。

以上是经典的 React diff 算法内容。自 React 16 起，引入了 Fiber 架构。为了使整个更新过程可随时暂停复原，节点与树别离采纳了 FiberNode 与 FiberTree 进行重构。fiberNode 应用了双链表的构造，能够间接找到兄弟节点与子节点。整个更新过程由 current 与 workInProgress 两株树双缓冲实现。workInProgress 更新实现后，再通过批改 current 相干指针指向新节点。

Vue 的整体 diff 策略与 React 对齐，尽管不足工夫切片能力，但这并不意味着 Vue 的性能更差，因为在 Vue 3 初期引入过，前期因为收益不高移除掉了。除了高帧率动画，在 Vue 中其余的场景简直都能够应用防抖和节流去进步响应性能。

React 事件机制

<div onClick={this.handleClick.bind(this)}> 点我 </div>
复制代码

React 并不是将 click 事件绑定到了 div 的实在 DOM 上，而是在 document 处监听了所有的事件，当事件产生并且冒泡到 document 处的时候，React 将事件内容封装并交由真正的处理函数运行。这样的形式不仅仅缩小了内存的耗费，还能在组件挂在销毁时对立订阅和移除事件。

除此之外，冒泡到 document 上的事件也不是原生的浏览器事件，而是由 react 本人实现的合成事件（SyntheticEvent）。因而如果不想要是事件冒泡的话应该调用 event.preventDefault()办法，而不是调用 event.stopProppagation()办法。JSX 上写的事件并没有绑定在对应的实在 DOM 上，而是通过事件代理的形式，将所有的事件都对立绑定在了 document 上。这样的形式不仅缩小了内存耗费，还能在组件挂载销毁时对立订阅和移除事件。

另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 本人实现的合成事件（SyntheticEvent）。因而咱们如果不想要事件冒泡的话，调用 event.stopPropagation 是有效的，而应该调用 event.preventDefault。

实现合成事件的目标如下：

• 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；
• 对于原生浏览器事件来说，浏览器会给监听器创立一个事件对象。如果你有很多的事件监听，那么就须要调配很多的事件对象，造成高额的内存调配问题。然而对于合成事件来说，有一个事件池专门来治理它们的创立和销毁，当事件须要被应用时，就会从池子中复用对象，事件回调完结后，就会销毁事件对象上的属性，从而便于下次复用事件对象。

请说岀 React 从 EMAScript5 编程标准到 EMAScript6 编程标准过程中的几点扭转。

次要扭转如下。
（1）创立组件的办法不同。
EMAScript5 版本中，定义组件用 React.createClass。EMAScript6 版本中，定义组件要定义组件类，并继承 Component 类。
（2）定义默认属性的办法不同。
EMAScript5 版本中，用 getDefaultProps 定义默认属性。EMAScript6 版本中，为组件定义 defaultProps 动态属性，来定义默认属性。
（3）定义初始化状态的办法不同。EMAScript5 版本中，用 getInitialState 定义初始化状态。EMAScript6 版本中，在构造函数中，通过 this. state 定义初始化状态。
留神：构造函数的第一个参数是属性数据，肯定要用 super 继承。
（4）定义属性束缚的办法不同。
EMAScript5 版本中，用 propTypes 定义属性的束缚。
EMAScript6 版本中，为组件定义 propsTypes 动态属性，来对属性进行束缚。
（5）应用混合对象、混合类的办法不同。
EMAScript5 版本中，通过 mixins 继承混合对象的办法。
EMAScript6 版本中，定义混合类，让混合类继承 Component 类，而后让组件类继承混合类，实现对混合类办法的继承。
（6）绑定事件的办法不同。
EMAScript5 版本中，绑定的事件回调函数作用域是组件实例化对象。
EMAScript6 版本中，绑定的事件回调函数作用域是 null。
（7）父组件传递办法的作用域不同。
EMAScript5 版本中，作用域是父组件。EMAScript6 版本中，变成了 null。
（8）组件办法作用域的批改办法不同。
EMAScript5 版本中，无奈扭转作用域。
EMAScript6 版本中，作用域是能够扭转的。

为何 React 事件要本人绑定 this

在 React 源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback 办法。

function invokeGuardedCallback(name, func, a) {
  try {func(a);
  } catch (x) {if (caughtError === null) {caughtError = x;}
  }
}

事件处理函数是间接调用的，并没有指定调用的组件，所以不进行手动绑定的状况下间接获取到的 this 是不精确的，所以咱们须要手动将以后组件绑定到 this 上

shouldComponentUpdate 有什么用？为什么它很重要？

组件状态数据或者属性数据产生更新的时候，组件会进入存在期，视图会渲染更新。在生命周期办法 should ComponentUpdate 中，容许抉择退出某些组件（和它们的子组件）的和解过程。
和解的最终目标是依据新的状态，以最无效的形式更新用户界面。如果咱们晓得用户界面的某一部分不会扭转，那么没有理由让 React 弄清楚它是否应该更新渲染。通过在 shouldComponentUpdate 办法中返回 false, React 将让以后组件及其所有子组件放弃与以后组件状态雷同。

React 最新的⽣命周期是怎么的？

React 16 之后有三个⽣命周期被废除(但并未删除)

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

官⽅打算在 17 版本齐全删除这三个函数，只保留 UNSAVE_前缀的三个函数，⽬的是为了向下兼容，然而对于开发者⽽⾔应该尽量避免使⽤他们，⽽是使⽤新增的⽣命周期函数代替它们。

⽬前 React16.8+ 的⽣命周期分为三个阶段，别离是挂载阶段、更新阶段、卸载阶段。

挂载阶段：

• constructor：构造函数，最先被执⾏，咱们通常在构造函数⾥初始化 state 对象或者给⾃定义⽅法绑定 this；
• getDerivedStateFromProps：static getDerivedStateFromProps(nextProps, prevState)，这是个动态⽅法，当咱们接管到新的属性想去批改咱们 state，能够使⽤ getDerivedStateFromProps
• render：render 函数是纯函数，只返回须要渲染的东⻄，不应该蕴含其它的业务逻辑，能够返回原⽣的 DOM、React 组件、Fragment、Portals、字符串和数字、Boolean 和 null 等内容；
• componentDidMount：组件装载之后调⽤，此时咱们能够获取到 DOM 节点并操作，⽐如对 canvas，svg 的操作，服务器申请，订阅都能够写在这个⾥⾯，然而记得在 componentWillUnmount 中勾销订阅；

更新阶段：

• getDerivedStateFromProps: 此⽅法在更新个挂载阶段都可能会调⽤；
• shouldComponentUpdate：shouldComponentUpdate(nextProps, nextState)，有两个参数 nextProps 和 nextState，示意新的属性和变动之后的 state，返回⼀个布尔值，true 示意会触发从新渲染，false 示意不会触发从新渲染，默认返回 true，咱们通常利⽤此⽣命周期来优化 React 程序性能；
• render：更新阶段也会触发此⽣命周期；
• getSnapshotBeforeUpdate：getSnapshotBeforeUpdate(prevProps, prevState), 这个⽅法在 render 之后，componentDidUpdate 之前调⽤，有两个参数 prevProps 和 prevState，示意之前的属性和之前的 state，这个函数有⼀个返回值，会作为第三个参数传给 componentDidUpdate，如果你不想要返回值，能够返回 null，此⽣命周期必须与 componentDidUpdate 搭配使⽤；
• componentDidUpdate：componentDidUpdate(prevProps, prevState, snapshot)，该⽅法在 getSnapshotBeforeUpdate ⽅法之后被调⽤，有三个参数 prevProps，prevState，snapshot，示意之前的 props，之前的 state，和 snapshot。第三个参数是 getSnapshotBeforeUpdate 返回的，如果触发某些回调函数时须要⽤到 DOM 元素的状态，则将对⽐或计算的过程迁徙⾄ getSnapshotBeforeUpdate，而后在 componentDidUpdate 中统⼀触发回调或更新状态。

卸载阶段:

-componentWillUnmount：当咱们的组件被卸载或者销毁了就会调⽤，咱们能够在这个函数⾥去革除⼀些定时器，勾销⽹络申请，清理⽆效的 DOM 元素等垃圾清理⼯作。

总结：

• componentWillMount：在渲染之前执行，用于根组件中的 App 级配置；
• componentDidMount：在第一次渲染之后执行，能够在这里做 AJAX 申请，DOM 的操作或状态更新以及设置事件监听器；
• componentWillReceiveProps：在初始化 render 的时候不会执行，它会在组件承受到新的状态 (Props) 时被触发，个别用于父组件状态更新时子组件的从新渲染
• shouldComponentUpdate：确定是否更新组件。默认状况下，它返回 true。如果确定在 state 或 props 更新后组件不须要在从新渲染，则能够返回 false，这是一个进步性能的办法；
• componentWillUpdate：在 shouldComponentUpdate 返回 true 确定要更新组件之前件之前执行；
• componentDidUpdate：它次要用于更新 DOM 以响应 props 或 state 更改；
• componentWillUnmount：它用于勾销任何的网络申请，或删除与组件关联的所有事件监听器。

React Hooks 在平时开发中须要留神的问题和起因

（1）不要在循环，条件或嵌套函数中调用 Hook，必须始终在 React 函数的顶层应用 Hook

这是因为 React 须要利用调用程序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用 Hook，就容易导致调用程序的不一致性，从而产生难以预料到的结果。

（2）应用 useState 时候，应用 push，pop，splice 等间接更改数组对象的坑

应用 push 间接更改数组无奈获取到新值，应该采纳析构形式，然而在 class 外面不会有这个问题。代码示例：

function Indicatorfilter() {let [num,setNums] = useState([0,1,2,3])
  const test = () => {
    // 这里坑是间接采纳 push 去更新 num
    // setNums(num)是无奈更新 num 的
    // 必须应用 num = [...num ,1]
    num.push(1)
    // num = [...num ,1]
    setNums(num)
  }
return (
    <div className='filter'>
      <div onClick={test}> 测试 </div>
        <div>
          {num.map((item,index) => (<div key={index}>{item}</div>
          ))}      </div>
    </div>
  )
}

class Indicatorfilter extends React.Component<any,any>{constructor(props:any){super(props)
      this.state = {nums:[1,2,3]
      }
      this.test = this.test.bind(this)
  }

  test(){
      // class 采纳同样的形式是没有问题的
      this.state.nums.push(1)
      this.setState({nums: this.state.nums})
  }

  render(){let {nums} = this.state
      return(
          <div>
              <div onClick={this.test}> 测试 </div>
                  <div>
                      {nums.map((item:any,index:number) => (<div key={index}>{item}</div>
                      ))}                  </div>
          </div>

      )
  }
}
复制代码

（3）useState 设置状态的时候，只有第一次失效，前期须要更新状态，必须通过 useEffect

TableDeail 是一个公共组件，在调用它的父组件外面，咱们通过 set 扭转 columns 的值，认为传递给 TableDeail 的 columns 是最新的值，所以 tabColumn 每次也是最新的值，然而理论 tabColumn 是最开始的值，不会随着 columns 的更新而更新：

const TableDeail = ({columns,}:TableData) => {const [tabColumn, setTabColumn] = useState(columns) 
}

// 正确的做法是通过 useEffect 扭转这个值
const TableDeail = ({columns,}:TableData) => {const [tabColumn, setTabColumn] = useState(columns) 
    useEffect(() =>{setTabColumn(columns)},[columns])
}

复制代码

（4）善用 useCallback

父组件传递给子组件事件句柄时，如果咱们没有任何参数变动可能会选用 useMemo。然而每一次父组件渲染子组件即便没变动也会跟着渲染一次。

（5）不要滥用 useContext

能够应用基于 useContext 封装的状态管理工具。

什么是 React 的 refs？为什么它们很重要

refs 容许你间接拜访 DOM 元素或组件实例。为了应用它们，能够向组件增加个 ref 属性。
如果该属性的值是一个回调函数，它将承受底层的 DOM 元素或组件的已挂载实例作为其第一个参数。能够在组件中存储它。

export class App extends Component {showResult() {console.log(this.input.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={this.showResult.bind(this)}> 展现后果 </button>
      </div>
    );
  }
}

如果该属性值是一个字符串，React 将会在组件实例化对象的 refs 属性中，存储一个同名属性，该属性是对这个 DOM 元素的援用。能够通过原生的 DOM API 操作它。

export class App extends Component {showResult() {console.log(this.refs.username.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref="username" />
        <button onClick={this.showResu1t.bind(this)}> 展现后果 </button>
      </div>
    );
  }
}

应用 React 有何长处

• 只需查看 render 函数就会很容易晓得一个组件是如何被渲染的
• JSX 的引入，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何相互援用的
• 反对服务端渲染，这能够改良 SEO 和性能
• 易于测试
• React 只关注 View 层，所以能够和其它任何框架 (如 Backbone.js, Angular.js) 一起应用

对 React-Fiber 的了解，它解决了什么问题？

React V15 在渲染时，会递归比对 VirtualDOM 树，找出须要变动的节点，而后同步更新它们，零打碎敲。这个过程期间，React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。

为了给用户制作一种利用很快的“假象”，不能让一个工作长期霸占着资源。能够将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“过程”，须要通过某些调度策略正当地调配 CPU 资源，从而进步浏览器的用户响应速率, 同时兼顾工作执行效率。

所以 React 通过 Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了能够让浏览器及时地响应用户的交互，还有其余益处:

• 分批延时对 DOM 进行操作，防止一次性操作大量 DOM 节点，能够失去更好的用户体验；
• 给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修改。

核心思想: Fiber 也称协程或者纤程。它和线程并不一样，协程自身是没有并发或者并行能力的（须要配合线程），它只是一种管制流程的让出机制。让出 CPU 的执行权，让 CPU 能在这段时间执行其余的操作。渲染的过程能够被中断，能够将控制权交回浏览器，让位给高优先级的工作，浏览器闲暇后再复原渲染。

constructor

答案是：在 constructor 函数外面，须要用到 props 的值的时候，就须要调用 super(props)

1. class 语法糖默认会帮你定义一个 constructor，所以当你不须要应用 constructor 的时候，是能够不必本人定义的
2. 当你本人定义一个 constructor 的时候，就肯定要写 super()，否则拿不到 this
3. 当你在 constructor 外面想要应用 props 的值，就须要传入 props 这个参数给 super，调用 super(props)，否则只须要写 super()

useEffect 与 useLayoutEffect 的区别

（1）共同点

• 使用成果： useEffect 与 useLayoutEffect 两者都是用于解决副作用，这些副作用包含扭转 DOM、设置订阅、操作定时器等。在函数组件外部操作副作用是不被容许的，所以须要应用这两个函数去解决。
• 应用形式： useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的，都是调用的 mountEffectImpl 办法，在应用上也没什么差别，根本能够间接替换。

（2）不同点

• 应用场景： useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；而 useLayoutEffect 会在所有的 DOM 变更之后同步调用，次要用于解决 DOM 操作、调整款式、防止页面闪动等问题。也正因为是同步解决，所以须要防止在 useLayoutEffect 做计算量较大的耗时工作从而造成阻塞。
• 应用成果： useEffect 是依照程序执行代码的，扭转屏幕像素之后执行（先渲染，后扭转 DOM），当扭转屏幕内容时可能会产生闪动；useLayoutEffect 是扭转屏幕像素之前就执行了（会推延页面显示的事件，先扭转 DOM 后渲染），不会产生闪动。useLayoutEffect 总是比 useEffect 先执行。

在将来的趋势上，两个 API 是会长期共存的，临时没有删减合并的打算，须要开发者依据场景去自行抉择。React 团队的倡议十分实用，如果切实分不清，先用 useEffect，个别问题不大；如果页面有异样，再间接替换为 useLayoutEffect 即可。

在应用 React Router 时，如何获取以后页面的路由或浏览器中地址栏中的地址？

在以后组件的 props 中，蕴含 location 属性对象，蕴含以后页面路由地址信息，在 match 中存储以后路由的参数等数据信息。能够间接通过 this .props 应用它们。

React 中的 setState 和 replaceState 的区别是什么？

（1）setState() setState()用于设置状态对象，其语法如下：

setState(object nextState[, function callback])
复制代码

• nextState，将要设置的新状态，该状态会和以后的 state 合并
• callback，可选参数，回调函数。该函数会在 setState 设置胜利，且组件从新渲染后调用。

合并 nextState 和以后 state，并从新渲染组件。setState 是 React 事件处理函数中和申请回调函数中触发 UI 更新的次要办法。

（2）replaceState() replaceState()办法与 setState()相似，然而办法只会保留 nextState 中状态，原 state 不在 nextState 中的状态都会被删除。其语法如下：

replaceState(object nextState[, function callback])
复制代码

• nextState，将要设置的新状态，该状态会替换以后的 state。
• callback，可选参数，回调函数。该函数会在 replaceState 设置胜利，且组件从新渲染后调用。

总结： setState 是批改其中的局部状态，相当于 Object.assign，只是笼罩，不会缩小原来的状态。而 replaceState 是齐全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性缩小，那么 state 中就没有这个状态了。